import { StatusBar } from 'expo-status-bar';
import { FlatList, Keyboard, Modal, Pressable, ScrollView, StyleSheet, View } from 'react-native';
import { SafeAreaProvider, SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
import IndexPage from './screen/IndexPage';
import { CounterProvider } from './states/CounterProvider';
import '@/global.css';

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

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