CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-v5react-native-paper
Sam
Sam

Reputation: 30388

Passing navigation to BottomNavigation

In my React Native app, I use react-navigation version 5.

How do I pass the navigation object to the scenes in BottomNavigation?

Here's the component where I create the BottomNavigation:

import React from 'react';
import { BottomNavigation } from 'react-native-paper';

// Components
import CodeScanner from '../../../screens/vendors/CodeScannerScreen';
import Home from '../../../screens/home/HomeScreen';
import Vendors from '../vendors/VendorsStack';
   
// Routes
const homeRoute = () => <Home />;
const vendorsRoute = () => <Vendors />;
const scanRoute = () => <CodeScanner />;

const HomeTabs = (props) => {
   
   const [index, setIndex] = React.useState(0);
   
   const [routes] = React.useState([
      { key: 'home', title: 'Home', icon: 'newspaper-variant-multiple' },
      { key: 'vendors', title: 'Vendors', icon: 'storefront' },
      { key: 'codescanner', title: 'Scan', icon: 'qrcode-scan' }
   ]);
   
   const renderScene = BottomNavigation.SceneMap({
      home: homeRoute,
      vendors: vendorsRoute,
      codescanner: scanRoute
   });

   return (
      <BottomNavigation
         navigationState={{ index, routes }}
         onIndexChange={setIndex}
         renderScene={renderScene}
         labeled={false} />
   );
}

export default HomeTabs;

In this code, I do have the navigation in the props but haven't been able to figure out a way to pass navigation to the screens. Please also note that the vendor one is actually a stack navigator. In particular, that's where I need access to navigation so that I can open up other screens.

Upvotes: 0

Views: 1870

Answers (3)

digicommons
digicommons

Reputation: 11

You may pass data to the vendors screen through the route like so:

const HomeTabs = ( props ) => {
  ...
  const [routes] = React.useState([
    ...
    { key: 'vendors', title: 'Vendors', icon: 'storefront', props: props },
    ...
  ]);
  ...
}

On your vendor screen you can then retrieve and use the data like this:

const VendorsRoute = ({ route }) => {
  const props = route.props;

  <Vendors />
}

Upvotes: 1

anthony willis mu&#241;oz
anthony willis mu&#241;oz

Reputation: 2478

You should pass it from tabBar prop like below (I use TypeScript) and BottomTabBarProps:

export declare type BottomTabBarProps = BottomTabBarOptions & {
    state: TabNavigationState
    descriptors: BottomTabDescriptorMap
    navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>
}

So you pass BottomTabBarProps to your custom tab component

<BottomTab.Navigator
    screenOptions={TabBarVisibleOnRootScreenOptions}
    initialRouteName={'Explore'}
    tabBar={(props: BottomTabBarProps) => <HomeTabs {...props} />}
>
    <BottomTab.Screen name="Explore" component={ExploreScreen} />
    ...
</BottomTab.Navigator>

So inner HomeTabs you got props.navigation

Upvotes: 1

Anhdevit
Anhdevit

Reputation: 2104

I think you don't need to pass navigation to BottomNavigation. Because in react-navigation v5 navigation can access anywhere with hook Read this document https://reactnavigation.org/docs/connecting-navigation-prop/

Upvotes: 0

Related Questions