ExpoStartProject/expo-project/App.tsx

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';

import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
import '@/global.css';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { CounterProvider } from './states/ConterProvider';
import IndexPage from './screens/IndexPage';
import { HStack } from './components/ui/hstack';
import { Text } from './components/ui/text';

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});