57 lines
1.4 KiB
TypeScript

import React from 'react';
import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
import {
initialWindowMetrics,
SafeAreaProvider,
useSafeAreaInsets,
} from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import { Provider } from 'react-redux';
import { persistor, store } from './store';
import { RootNavigator } from './navigation/rootNavigator';
import { PersistGate } from 'redux-persist/integration/react';
import { colors } from '@theme';
function App() {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<SafeAreaProvider>
<AppContent />
</SafeAreaProvider>
</PersistGate>
</Provider>
);
}
function AppContent() {
const isDarkMode = useColorScheme() === 'dark';
const safeAreaInsets = useSafeAreaInsets(); // ✅ now inside SafeAreaProvider
return (
<View
style={[
styles.container,
{
paddingTop: safeAreaInsets.top,
paddingBottom: safeAreaInsets.bottom,
backgroundColor: colors.background,
},
]}
>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<NavigationContainer>
<RootNavigator />
</NavigationContainer>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default App;