mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 15:18:01 +00:00
31 lines
928 B
Markdown
31 lines
928 B
Markdown
# Avoid The Notch With SafeAreaView
|
|
|
|
iOS devices, especially the iPhone X, have areas of the screen that are cut
|
|
off in ways that present quite a challenge to developers. One of the easiest
|
|
ways to deal with rounded corners and the notch when developing for iOS is
|
|
to avoid them all together.
|
|
|
|
> The purpose of `SafeAreaView` is to render content within the safe area
|
|
> boundaries of a device.
|
|
|
|
```javascript
|
|
import { SafeAreaView, View, Text } from 'react-native';
|
|
|
|
const App = () => {
|
|
return (
|
|
<SafeAreaView style={{ flex: 1, backgroundColor: "#e6e6e6" }}>
|
|
<View>
|
|
<Text>Safely rendered in the visible area of the device!</Text>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
```
|
|
|
|
The _unsafe_ area can be styled however you like and everything inside
|
|
`<SafeAreaView>` will be pushed into the visible area of the screen.
|
|
|
|
h/t Dillon Hafer
|
|
|
|
[source](https://facebook.github.io/react-native/docs/safeareaview.html)
|