Passing parameters in nested navigation react-native

user_14469491 0
Viewed 761

i want to pass a parameter from Search.js to Stats.js The navigator is structured like this:

Search.js

const Search = () => {
    <searchstack.Navigator>
        <searchstack.Screen name="Search" component={SearchScreen}/>
    </searchstack.Navigator>
}
const SearchScreen = () => {
    //..
}

App.js - UPDATE WITH FULL CODE

import SearchFile from './Search';
import StatsFile from './Stats'

function HomeScreen() {
  return (
    <Tab.Navigator>
        <Tab.Screen name="TabA" component={SearchFile} />
        <Tab.Screen name="TabB" component={StatFila} />
    </Tab.Navigator>
  );
}
export default function App() {
  return (
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen}/>
          <Drawer.Screen name="Profile" component={Profile} />
          <Drawer.Screen name="Setting" component={Setting}/>
        </Drawer.Navigator>
      </NavigationContainer>
  )

I update the APP.js with the full code, i can't understand how to pass a parameter from search to statsFile, so i have to pass a parameter from an inside StackNavigator to another StackNavigator, defined in the same TabNavigator. So, from SearchStack i have to go "up" to the Tab, move to the Stat, and then go "down" on the StatStack.

react-navigation react-native reactjs
1 Answers

I updated my answer.

This is how you navigate on a nested component

    navigate('StatsStack', {
      screen: 'Stats',
      params: {
        foo: 'bar',
      },
    });

import 'react-native-gesture-handler';
import React from 'react';
import {Button, Text} from 'react-native';
import {
  NavigationContainer,
  useNavigation,
  useRoute,
} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const {
  Screen: SearchScreen,
  Navigator: SearchNavigator,
} = createStackNavigator();

const Search = () => {
  const {navigate} = useNavigation();

  const goToStats = () =>
    navigate('StatsStack', {
      screen: 'Stats',
      params: {
        foo: 'bar',
      },
    });

  return <Button onPress={goToStats} title="Go to stats" />;
};

const SearchStack = () => (
  <SearchNavigator>
    <SearchScreen component={Search} name="Search" />
  </SearchNavigator>
);

const {Screen: StatsScreen, Navigator: StatsNavigator} = createStackNavigator();

const Stats = () => {
  const {params} = useRoute();

  return <Text>{params.foo}</Text>;
};

const StatsStack = () => (
  <StatsNavigator>
    <StatsScreen component={Stats} name="Stats" />
  </StatsNavigator>
);

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen component={SearchStack} name="SearchStack" />
      <Tab.Screen component={StatsStack} name="StatsStack" />
    </Tab.Navigator>
  );
};

export default () => (
  <NavigationContainer>
    <App />
  </NavigationContainer>
);
user_82646380
Related