React Native Nested Stack Inside BottomTabNavigator issue - reactjs

Question

The navigation process I want to achieve is (BottomTabNavigator -> RoutinesStackNavigator -> Routines) which I'm using a stack navigator nested inside a bottom tab navigator
When I navigate to the RoutinesStackNavigator it isn't loading the Routines page and I am not sure why.
BottomTabNavigation.tsx
export default function Navigation() {
return (
<>
<SoundProvider>
<TimerProvider>
<NavigationContainer>
<Tab.Navigator
sceneContainerStyle={{ backgroundColor: COLORS.white }}
initialRouteName="Pomodoro"
screenOptions={({ route, navigation }) => ({
tabBarShowLabel: false,
headerShown: false,
tabBarStyle: [styles.tabBar, styles.tabBarBoxShadow],
tabBarIcon: ({ focused }) => {
let rn = route.name;
let iconTag;
// assigning navigation icon based on name of route
if (rn === pomodoroName) {
// assigning JSX Tag
iconTag = (
<PomodoroIcon
size={iconSize}
fillColor={iconColor}
isFocused={focused}
/>
);
} else if (rn === agendaName) {
iconTag = (
<AgendaIcon
size={iconSize}
fillColor={iconColor}
isFocused={focused}
/>
);
} else if (rn === tutorialsName) {
iconTag = (
<TutorialsIcon
size={iconSize}
fillColor={iconColor}
isFocused={focused}
/>
);
} else if (rn === routinesStackNavigatorName) {
iconTag = (
<RoutinesIcon
size={iconSize}
fillColor={iconColor}
isFocused={focused}
/>
);
}
return (
<Pressable
onPress={() => {
// add haptic feedback and navigate to new route
addLightHapticFeedback("light");
navigation.navigate(rn);
}}
>
{iconTag}
</Pressable>
);
},
})}
>
<Tab.Screen name={pomodoroName} component={Pomodoro} />
<Tab.Screen name={agendaName} component={Agenda} />
<Tab.Screen name={tutorialsName} component={Tutorials} />
<Tab.Screen
name={routinesStackNavigatorName}
component={RoutinesStackNavigator}
/>
</Tab.Navigator>
</NavigationContainer>
</TimerProvider>
</SoundProvider>
</>
);
}
RoutinesStackNavigator.tsx
export default function RoutinesStackNavigator() {
const Stack = createStackNavigator();
return (
<>
<SafeAreaView>
<Stack.Navigator initialRouteName="Routines">
<Stack.Screen name="Routines" component={Routines} />
<Stack.Screen name="CreateRoutine" component={CreateRoutine} />
</Stack.Navigator>
</SafeAreaView>
</>
);
}
index.Routines.tsx
export default function Routines() {
const { width } = useWindowDimensions();
return (
<>
<FocusedStatusBar barStyle="light-content" />
<View style={styles.container}>
<View style={styles.row}>
<Text style={styles.title}>{STRINGS.routinesTitle}</Text>
<TouchableOpacity onPress={() => {}}>
<AntDesign name="pluscircle" size={44} color={COLORS.white} />
</TouchableOpacity>
</View>
<View style={[styles.main, { width: width }]}>
<View style={{ height: "72%" }}>
<ScrollView
showsVerticalScrollIndicator={true}
style={{ marginTop: 10, marginBottom: 10 }}
>
<RoutineCard />
<RoutineCard />
</ScrollView>
</View>
<TouchableOpacity style={styles.button} onPress={() => {}}>
<Text style={styles.buttonText}>Start Session</Text>
</TouchableOpacity>
</View>
</View>
</>
);
}
none of the Routines component renders, except the StatusBar color changes. So the component must be rendering but the rest of the content doesn't show up.

Answer 1

You have to remove <SafeAreaView> from RoutinesStackNavigator.tsx
const Stack = createStackNavigator();
export default function RoutinesStackNavigator() {
return (
<Stack.Navigator initialRouteName="Routines">
<Stack.Screen name="Routines" component={Routines} />
<Stack.Screen name="CreateRoutine" component={CreateRoutine} />
</Stack.Navigator>
);
}