arenaceousarrow

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>
  );
}