Pass parameter values to drawer Navigator component

272 Views Asked by At

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>
  );
}
1

There are 1 best solutions below

0
On BEST ANSWER

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>
  );
}