All navigation components were from React Navigation React Navigation docs

In App.js, the main navigator that is used is , defined from lines 201-246. The Drawer navigator renders three screens, each of which are a Stack Navigator for their respective categories of screens.

HomeStack is defined from lines 154-178 and renders the BottomNav (defined in BottomNav.js) and the single PetScreen

BottomNav.js is a bottom tab navigator that renders the HomeScreen which displays "My Pets" and a future "Pets I Sit" page

CalendarStack is defined from lines 180-199 and renders the CalendarScreen aka "tasks"

UserProfileStack is defined lines 129-152 and renders the UserScreen and single PetScreen

Drawer Navigation Docs

Article on Combining Navigators

Another article that shows multiple navigators

The custom menu icon is imported from Expo Ionicons and utilizes the custom options on each screen in each Stack (HomeStack, CalendarStack, UserProfileStack). Navigation of the drawer is passed down through props and implemented in the onPress of the menu icon.

headerLeft: () => <Ionicons name="ios-menu" size={32} color={colors.yellow} onPress={() => navigation.toggleDrawer()}/>

The custom back icon is only rendered on the single Pet Screen in both the UserProfileStack and the HomeStack and is made possible with the custom options (headerBackImage)

headerBackImage: () => (<Ionicons name={"ios-arrow-back"} size={32} color={colors.yellow}/>)

The logout functionality is also in the drawer and is defined from lines 85-117. It is passed into the Drawer Navigator is drawerContent

Line 208 drawerContent={(props) => <CustomDrawerContent {...props} />}

The custom header image on each Stack Screen navigates to the My Pets page onPress through navigation, passed down in props

Lines 119-127 function LogoTitle(props) { return ( <Image style={{ width: 200, height: 40, resizeMode: "contain" }} source={require("./assets/pawsome_logo.png")} onPress={() => props.navigation.jumpTo('My Pets')} /> ); }