CODEWITHSUNDEEP
javascriptreactjsreact-nativeexpo
Mislav
Mislav

Reputation: 658

Passing parameters to multiple screens in the same time

I'm sending some data through my nested navigators. I've got 2 screens on my tab navigator QR kod and eINFO. I'm passing my data to qr kod here

      navigation.navigate("Drawer", {
        screen: "Home",
        params: {
          screen: "QR kod",
          params: { user: newUser },
        },
      });

these are my navigators

  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          let iconName;

          if (route.name === 'QR kod') {
            iconName = focused ? 'qrcode' : 'qrcode';
          } else if (route.name === 'eINFO') {
            iconName = focused ? 'infocirlceo' : 'infocirlceo';
          }

          return <AntDesign name={iconName} size={24} color={'black'} />;
        },
      })}
      tabBarOptions={{
        activeTintColor: 'red',
        inactiveTintColor: 'grey',
      }}>
      <Tab.Screen name="QR kod" component={Main} />
      <Tab.Screen name="eINFO" component={Einfo} />
    </Tab.Navigator>
  );
}

function DrawerNav() {
  return (
    <Drawer.Navigator initialRouteName="QR kod">
      <Drawer.Screen name="Home" component={TabNavigation} />
    </Drawer.Navigator>
  );
}

How do I pass the data to both eINFO and QR kod at the same time

Upvotes: 0

Views: 1547

Answers (2)

GitGitBoom
GitGitBoom

Reputation: 1912

Using the initialParams prop on your tabs may work. It's useful to pass params to child screens automatically.

function Home(props) {
  const params = props.route.params;
  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          let iconName;
          ...
    }>
      <Tab.Screen name="QR kod" component={Main} initialParams={params} />
      <Tab.Screen name="eINFO" component={Einfo} initialParams={params} />
    </Tab.Navigator>
  );
}

Then your user param will be passed to both screens.

Change your navigate call to:

navigation.navigate("Drawer", {
  screen: "Home",
  params: {
    screen: "QR kod",
    user: newUser,
  },
});

I'm not sure exactly how your data flow is structured from what you have posted. Usually however, something like 'user data' is best handled by Redux as Giovanni Esposito said.

Upvotes: 0

Giovanni Esposito
Giovanni Esposito

Reputation: 11156

Ciao, unfortunately if you are using navigation.navigate to pass data to qr kod screen, you cannot pass same data to eINFO screen at the same time. If you want to have the same data in both screens at the same time my suggest is to use a global state manager like react-redux. With react-redux you don't need to pass data between screens with navigation.navigate anymore. Just dispatch data you need to redux store and then read data dispatched in any screen you need.

Upvotes: 1

Related Questions