Inserting Elements between Navigator.Screen in Navigation Drawer v5

Viewed 229

I'm unable to figure out how to insert custom elements between Navigator.Screen elements in React Navigation Drawer version 5 (latest). I am able to create custom elements, but they default to showing at the bottom of the screen.

const Divider = () => {
  return <View style={styles.divider}></View>;
};

const styles = StyleSheet.create({
      divider: {
        backgroundColor: "white",
        marginVertical: 10,
        opacity: 0.25,
        height: 5,
        width: 150,
        borderRadius: 4,
      },
    });


function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />

      <Divider />
      
    </DrawerContentScrollView>
  );
} 
const Drawer = createDrawerNavigator();

function MainNavigation() {
  return (
    <Drawer.Navigator
      initialRouteName="Notifications"
      drawerPosition="right"
      drawerType="slide"
      drawerContent={(props) => <CustomDrawerContent {...props} />}
      hideStatusBar="true"
      overlayColor="transparent"
      drawerContentOptions={{
        activeTintColor: Color.white,
        inactiveTintColor: Color.white,
        contentContainerStyle: {
          marginTop: 50,
          flexDirection: "column",
          alignItems: "center",
        },
        itemStyle: {
          height: 45,

          width: 175,
          alignContent: "center",
          justifyContent: "center",
          flexDirection: "column",
          flex: 1,
          marginVertical: -2,
        },
        labelStyle: {
          fontFamily: FontType.medium,
          fontSize: 15,
        },
      }}
      drawerStyle={{
        backgroundColor: Color.blue,
        flexDirection: "column",
        justifyContent: "center",
        paddingLeft: -20,
        width: 175,
      }}
      screenOptions={{ swipeEnabled: false }}
    >
      <Drawer.Screen name="Progress" component={NotificationsScreen} />
      <Drawer.Screen name="Buddies" component={NotificationsScreen} />

      <Drawer.Screen name="Trainers" component={NotificationsScreen} />
      <Drawer.Screen name="Daily Check In" component={NotificationsScreen} />
      <Drawer.Screen name="Rewards" component={NotificationsScreen} />

      <Drawer.Screen name="Settings" component={NotificationsScreen} />
      <Drawer.Screen name="Log Out" component={NotificationsScreen} />
    </Drawer.Navigator>
  );
}

This is what it looks like right now: current screen

I'd like for it to like this: goal

0 Answers
Related