Search code examples
react-nativereact-native-navigationreact-native-drawer

Pass parameter values to drawer Navigator component


Cannot pass parameter to functions or const via Drawer Screen component. Is there any better way to achieve this. the idea is to use single function which change the content accordingly.

function Pagef(param1) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile Screen</Text>
      <Text>{param1}</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator useLegacyImplementation initialRouteName="Feed">
      <Drawer.Screen
        name="Feed"
        component={Pagef('Home')}
        options={{ drawerLabel: 'Home' }}
      />
      <Drawer.Screen
        name="Notifications"
        component={Pagef('Updates')}
        options={{ drawerLabel: 'Updates' }}
      />
      <Drawer.Screen
        name="Profile"
        component={Pagef('Profile')}
        options={{ drawerLabel: 'Profile' }}
      />
    </Drawer.Navigator>
  );
}

Solution

  • Use initialParams to pass route params to component.

    <Drawer.Screen name="Feed" component={Pagef} initialParams={{ param1: "Home" }}/>
    
    ...
    
    function Pagef({route: {params: {param1}}}) {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Profile Screen</Text>
          <Text>{param1}</Text>
        </View>
      );
    }