Passing Props to React Native BottomNavigation Scenes

Question

I have User a Profile management page with bottom navigation. Something like the original example:

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 socialRoute = () => <Social />;
const friendsRoute = () => <Friends />;

const HomeTabs = (props) => {
   
   const [index, setIndex] = React.useState(0);
   const [user, setUser] = React.useState()

   useEffect(()=>{
       // here we load user data from remote server and set it in the user 
       setUser(remoteUserInfo)
   }, [])

   const [routes] = React.useState([
      { key: 'home', title: 'Home', icon: 'home' },
      { key: 'social', title: 'Social', icon: 'social' },
      { key: 'friends', title: 'Friends', icon: 'friends' }
   ]);
   
   const renderScene = BottomNavigation.SceneMap({
      home: homeRoute,
      social: socialRoute,
      friends: friendsRoute
   });

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

export default HomeTabs;

Since I have the user info in the HomeTabs component and it gets used in each of the Scenes I would like a way to pass it (typically via props). But I couldn't find any way to do so. I tried:

const homeRoute = ({user}) => <Home user={user} />;

const renderScene = BottomNavigation.SceneMap({
          home: <homeRoute user={user}/>,
          social: <socialRoute user={user}/>,
          friends: <friendsRoute user={user}/>
       });

But that doesn't work. Any suggestion? I would like to stay away from complex solutions (e.g. Redux or Context).

https://stackoverflow.com/a/73302236/2690257 – FabricioG Aug 24 '23 at 23:50 — FabricioG, Aug 24 '23 at 23:50

score 0 · Answer 1 · answered Jul 18 '22 at 06:39

0

if you are going to pass props you should declare your routes as follows

const homeRoute = (props) => <Home {...props}/>;

answered Jul 18 '22 at 06:39

FaysalB

330
1
11

This doesn't address the issue of passing the props to the Scenes – FabricioG Aug 24 '23 at 23:13

user21489919 · Answer 2 · 2023-03-25T18:13:38.867

I had the same problem and solved it like this with typescript:

type UserProps={user: User|undefined};

type NavProps = {
  route: {key: string};
  jumpTo: (key: string) => void;
};

function HomeView(props:UserProps&NavProps) {
    const user=props.user;
    const setUser=props.setUser;
    const route=props.route;
    const jumpTo=props.jumpTo;
}

const HomeSceen = (props:NavProps) => <HomeView {...props}  user={user} />;

const renderScene = BottomNavigation.SceneMap({
    home: HomeSceen,
  });

Passing Props to React Native BottomNavigation Scenes

2 Answers2