SafeArea
Because of notches and shit, you have to handle the weird layout issues
import { SafeAreaProvider } from 'react-native-safe-area-context';
function App() {
return <SafeAreaProvider>...</SafeAreaProvider>;
}
import { SafeAreaView } from 'react-native-safe-area-context';
import {StatusBar} from 'react-native';
function SomeComponent() {
return (
<SafeAreaView style={{ flex: 1, backgroundColor: 'red' }} edges={['right', 'top', 'left']}>
<StatusBar barStyle='dark-content' />
<View style={{ flex: 1, backgroundColor: 'blue' }} />
</SafeAreaView>
);
}
There are several different SafeAreaViews. The default one from 'react-native' is pretty good, but leaves white space at the top and bottom of notches iPhones. Instead the one from 'react-native-safe-context' lets you ignore it for the bottom.
Last updated