I have a bottom navigator that has a route that routes a nested stack navigator.

when I do

navigator.navigate("parentNavigator", {id: id})

It gets route.params as undefined in the default component of parent compent. I Thinking in changing my app style only because of this limitation. Here is my code

I have this styled “button”

import { useNavigation } from '@react-navigation/native';
import React from 'react';
import { View, Text, Pressable, StyleSheet, Image } from 'react-native';

interface ServiceTileProps {
  categoryName?: string; 
  foto?: any// Assuming categoryName is a string, adjust the type accordingly
  id?: number
}

const ServiceTile: React.FC<ServiceTileProps> = ({ id, categoryName, foto }) => {

  const navigation = useNavigation(); // Obtenha o objeto de navegação

  console.log("id")
  console.log(categoryName)


  return (


    <View style={style.tileItem}>

      <Pressable onPress={() => { console.log("logar clique"); navigation.navigate('procurar', { id: id, servicoProcurado: categoryName }) }} android_ripple={{ color: "#ccc" }} style={style.pressableButton}>

        <Text style={style.label}>{categoryName}</Text>
        <View style={style.innerContainer}>

          <Image style={style.image} source={foto} />


        </View>
      </Pressable>
    </View >





  );
}

export default ServiceTile;

LIke the code does, it routes to the parent navigator

goes to the “procurar” route

 onPress={() => { console.log("logar clique"); navigation.navigate('procurar', { id: id, servicoProcurado: categoryName }) }}

This is my app.tsx

     import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TextInput, View } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import * as Notifications from 'expo-notifications';

import Main from './screens/Main'
import { Ionicons } from '@expo/vector-icons'
import Profile from './screens/Profile';
import LoginOptions from './screens/LoginOptions';
import LoginTelefone from './screens/LoginTelefone';
import ProfileMenu from './screens/ProfileMenu';
import SearchServices from './screens/SearchServices';
import WorkOrders from './screens/WorkOrders';
import UserInformationContextProvider from './store/context/state';
import DetalhesPrestador from './screens/DetalhesPrestador';

const bottomTabNavigator = createBottomTabNavigator()
const stackNavigator = createNativeStackNavigator()

function StackNavigator() {
  return <stackNavigator.Navigator
    screenOptions={{
      contentStyle: { backgroundColor: '#fff' }
    }}
    initialRouteName='listaPrestadores'

  >


    <stackNavigator.Screen 
     options={{
      title: 'Busca de Serviços'

    }}
      
    name="listaPrestadores"  component={SearchServices}>

    </stackNavigator.Screen>


    <stackNavigator.Screen 
     options={{
      title: 'Prestador do Serviço'

    }}

    name="detalhesPrestador"  component={DetalhesPrestador}>

    </stackNavigator.Screen>


  </stackNavigator.Navigator >;
}



Notifications.setNotificationHandler({
  handleNotification: async () => {
    return {
      shouldPlaySound: false,
      shouldSetBadge: false,
      shouldShowAlert: true
    };
  }
});


export default function App() {

  scheduleNotificationHandler()

  async function scheduleNotificationHandler() {
    try {
      const notificationId = await Notifications.scheduleNotificationAsync({
        content: {
          title: 'A tomada não funciona, a casa anda uma bagunça...',
          body: 'Pró serviços - o serviço que você procura.'
        },
        trigger: {
          seconds: 1
        }
      });
      console.log(`Notification scheduled with id: ${notificationId}`);
    } catch (error) {
      console.error('Error scheduling notification:', error);
    }
  }

  return (
    <UserInformationContextProvider>


      <NavigationContainer

      >
        <bottomTabNavigator.Navigator

          screenOptions={{
            headerShown: false,
            tabBarStyle: { backgroundColor: 'white' }
          }}

        >

          <bottomTabNavigator.Screen
            options={{
              tabBarIcon: ({ color, size }) => (
                <Ionicons name="home" color={color} size={size} />
              )
            }}
            name="serviços comuns" component={Main}   >

          </bottomTabNavigator.Screen>


          <bottomTabNavigator.Screen

            options={{
              tabBarIcon: ({ color, size }) => (
                <Ionicons name="search" color={color} size={size} />
              )
            }}

            name="procurar"  component={StackNavigator}>

          </bottomTabNavigator.Screen>

        </bottomTabNavigator.Navigator>
      </NavigationContainer>
    </UserInformationContextProvider>
  );
}

When I access searchServices component, it is undefined

import React, { useEffect, useState } from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
import { NavigationProp, ParamListBase, useRoute } from '@react-navigation/native';
import { getPrestadoresServicos } from '../utils/http';
import SearchResult from '../components/SearchResult';
import RNPickerSelect from 'react-native-picker-select';

interface ProfileMenuProps {
  navigation: NavigationProp<ParamListBase>;
}

const SearchServices: React.FC<ProfileMenuProps> = ({ navigation }) => {




  const [prestadoresServicos, setPrestadoresServicos] = useState<any[]>([]);
  const [resultado, setResultado] = useState([]);
  const [servicoProcurado, setServicoProcurado] = useState<string>('');
  const [selectedLabel, setSelectedLabel] = useState<string>('');

  const [selectedValue, setSelectedValue] = useState("6");

  const handleChange = (value: string, label: string) => {
    setSelectedValue(value);
   
   
  };



  const options = [
    { label: 'Segurança Residencial', value: "5" },
    { label: 'Elétrica', value: "6" },
    { label: 'Internet e Redes', value: "7" },
    { label: 'Televisão', value: "8" },
    { label: 'Telefonia', value: "9" },
    { label: 'Limpeza Doméstica', value: "10" },
    { label: 'Instalação de Equipamentos', value: "11" },
    { label: 'Instalação de Câmeras', value: "12" },
  ];
  const route = useRoute();

  
  console.log("parajhjjms")
  console.log(route)


  useEffect(() => {

    const fetchPrestadores = async (id: string) => {
      const resultado = await getPrestadoresServicos(id);
      setPrestadoresServicos(resultado);
      
      
    };

  

    if (route.params !== undefined) {
      const { id, servicoProcurado } = route.params; // undefined
      alert(id)
      fetchPrestadores(id);

   
    }
   

  

  }, [selectedValue]);

  const popularResultados = async (idServiçoSelecionado: string) => {
    
      const resultado = await getPrestadoresServicos(idServiçoSelecionado);
      setResultado(resultado);
      
      const selectedOption = options.find(option => option.value === idServiçoSelecionado);
    if (selectedOption) {
      setSelectedLabel(selectedOption.label);
    }
     

  };

  return (
    <View>
    <View>
          <Text>Tipo de Serviço Procurado</Text>
          <View>
          <RNPickerSelect
 onValueChange={(value, label) => handleChange(value, label)}      items={
     
options
      }
      value={selectedValue}
    />
          </View>
          <View>
            <Button title="buscar" onPress={() => {popularResultados(selectedValue)}} />
          </View>
          <View>
            <Text>resultado para: {selectedLabel}</Text>
          </View>
          <View>
            {resultado.map((item, index) => (
              <SearchResult  id={item.id} foto={item.foto} primeiroNome={item.primeiroNome} whatsapp={item.celular} descricao={item.descricao} ></SearchResult>
            ))}
          </View>
          {resultado.length === 0 && (
          
          <View style={styles.containerSemResultado}>
            <Text style={styles.semResultado}>Nenhum resultado encontrado</Text>
              <View>
              <Text style={styles.semResultado2}>Estamos trabalhando para conseguir mais prestadores na sua região.</Text>
                </View>
          </View>)}
           
        </View>
    </View>
  );
};

export default SearchServices;

here is undefined

   const { id, servicoProcurado } = route.params; // undefined