ExpoStartProject/my-expo-app--gluestack/App.tsx

import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

import './global.css';

import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
import IndexPage from './screens/IndexPage';
import { CounterProvider } from './states/CounterProvider';

export default function App() {
  return (
    <GluestackUIProvider mode="light">
      <>
        <SafeAreaProvider>
          <SafeAreaView className="flex-1">
            <CounterProvider>
              <IndexPage />
            </CounterProvider>
            <StatusBar style="auto" />
          </SafeAreaView>
        </SafeAreaProvider>
      </>
    </GluestackUIProvider>
  );
}