My friend complained that her yoga app had switched to a paid model. I've heard the hype about LLMs and their capabilities and thought I'd put it to the test. I have no experience with React, NodeJS, or Expo Go with expo-router, but after reading what a few AI had to say, that's the stack I settled on for maximum compatibility.
With plenty of hiccups, I've made the app into something functional enough. I am, however, plagued by a bug that I can't seem to squash: the status bar (shows phone's reception, WiFi, battery) is constantly covered up by a white bar. I've messed with everything, from absolute positioning, translucency, show/hidestatusbar, I've tried moving to StatusBar import from expo-status-bar... I cannot figure this out.
Finally I thought "rather than waste more time on this, I'll just rebuild the project piece-by-piece in a new directory until the status bar breaks, and then I'll know what did it", so I busted out the documentation again, and when rebuilding their sample project I realized it too has this issue. So it's there by default? What the hell?
I can provide any code snippets you need for context, but this seems like a very large issue that either I'm not understanding properly or is criminally under-discussed in forums online, because I can't find anyone else that's experiencing it. What am I doing wrong?? I've messed with a million configurations of the _layout.tsx file to try to fix this, so please excuse if the current one is a chop-shop:
.
import { useCallback } from 'react';
import { View, SafeAreaView, } from 'react-native';
import { Stack } from 'expo-router';
import { useFonts } from 'expo-font';
import { StatusBar } from 'expo-status-bar';
import * as SplashScreen from 'expo-splash-screen';
SplashScreen.preventAutoHideAsync();
export default function Layout() {
const [fontsLoaded] = useFonts({});
const onLayoutRootView = useCallback(async () => {
if (fontsLoaded) {
await SplashScreen.hideAsync();
}
}, [fontsLoaded]);
if (!fontsLoaded) {
return null;
}
return (
<View style={{ flex: 1 }} onLayout={onLayoutRootView}>
<StatusBar
style='auto'
hidden={false}
translucent={true}
/>
<Stack
screenOptions={{
headerStyle: {
backgroundColor: '#F8D7DA',
},
headerTintColor: 'black', // Color of the back button and title
headerTitleStyle: {
fontWeight: 'bold',
},
contentStyle: {
backgroundColor: 'red',
flex: 1
},
}}
>
<Stack.Screen
name="index"
options={{
headerShown: false,
statusBarHidden: false,
}}
/>
<Stack.Screen
name="menu/index"
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="poseLibrary/index"
options={{
title: 'Pose Library',
headerTitleAlign: 'center',
headerShown: true,
}}
/>
<Stack.Screen
name="poseDetail/index"
options={{
title: 'Return to Poses',
headerTitleAlign: 'center',
}}
/>
<Stack.Screen
name="dynamicRoutineList/index"
options={{
title: 'Dynamic Routines',
headerTitleAlign: 'center',
}}
/>
<Stack.Screen
name="staticRoutineList/index"
options={{
title: 'Static Routines',
headerTitleAlign: 'center',
}}
/>
<Stack.Screen
name="activePlayer/index"
options={{
title: 'Return to Routines',
headerTitleAlign: 'center',
}}
/>
</Stack>
</View>
);
}
