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