Skip to content

Commit f93576b

Browse files
brentvatnebrentvatne
committed
Clarify notches on Android
1 parent 0336a63 commit f93576b

File tree

2 files changed

+52
-24
lines changed

2 files changed

+52
-24
lines changed

‎docs/handling-iphonex.md‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,8 @@ class MyHomeScreen extends Component {
4747
render() {
4848
return (
4949
<SafeAreaView style={styles.container}>
50-
<Text style={styles.paragraph}>
51-
This is top text.
52-
</Text>
53-
<Text style={styles.paragraph}>
54-
This is bottom text.
55-
</Text>
50+
<Text style={styles.paragraph}>This is top text.</Text>
51+
<Text style={styles.paragraph}>This is bottom text.</Text>
5652
</SafeAreaView>
5753
);
5854
}
@@ -83,15 +79,33 @@ In some cases you might need more control over which paddings are applied. For e
8379

8480
```jsx
8581
<SafeAreaView style={styles.container} forceInset={{ bottom: 'never' }}>
86-
<Text style={styles.paragraph}>
87-
This is top text.
88-
</Text>
89-
<Text style={styles.paragraph}>
90-
This is bottom text.
91-
</Text>
82+
<Text style={styles.paragraph}>This is top text.</Text>
83+
<Text style={styles.paragraph}>This is bottom text.</Text>
9284
</SafeAreaView>
9385
```
9486

9587
`forceInset` takes an object with the keys `top | bottom | left | right | vertical | horizontal` and the values `'always' | 'never'`. Or you can override the padding altogether by passing an integer.
9688

9789
There is also a [Snack](https://snack.expo.io/@react-navigation/react-navigation-docs:-safeareaview-demo-v3) available to demonstrate how `forceInset` behaves.
90+
91+
## Android notches
92+
93+
React Native does not currently expose an API to access information about device cutouts on Android devices. If your app has have an opaque status bar (the default in React Native), that may handle the area where the device has its cutout without any further work required. If not, to workaround this you may want to use the following temporary workaround:
94+
95+
- Install [react-native-device-info](https://github.com/react-native-community/react-native-device-info).
96+
- Check if the device has a notch with `DeviceInfo.hasNotch()` - this compares the device brand and model to a list of devices with notches - a crude but effective workaround.
97+
- If the device has a notch, you may want to increase the status bar height known to the SafeAreaView by doing something like this:
98+
99+
```js
100+
import { Platform } from 'react-native';
101+
import { SafeAreaView } from 'react-navigation';
102+
import DeviceInfo from 'react-native-device-info';
103+
104+
if (Platform.OS === 'android' && Device.hasNotch()) {
105+
SafeAreaView.setStatusBarHeight(
106+
/* Some value for status bar height + notch height */
107+
);
108+
}
109+
```
110+
111+
Work is in progress on a longer term solution, see [this pull request](https://github.com/facebook/react-native/pull/20999) for more information.

‎website/versioned_docs/version-3.x/handling-iphonex.md‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,8 @@ class MyHomeScreen extends Component {
4848
render() {
4949
return (
5050
<SafeAreaView style={styles.container}>
51-
<Text style={styles.paragraph}>
52-
This is top text.
53-
</Text>
54-
<Text style={styles.paragraph}>
55-
This is bottom text.
56-
</Text>
51+
<Text style={styles.paragraph}>This is top text.</Text>
52+
<Text style={styles.paragraph}>This is bottom text.</Text>
5753
</SafeAreaView>
5854
);
5955
}
@@ -84,15 +80,33 @@ In some cases you might need more control over which paddings are applied. For e
8480

8581
```jsx
8682
<SafeAreaView style={styles.container} forceInset={{ bottom: 'never' }}>
87-
<Text style={styles.paragraph}>
88-
This is top text.
89-
</Text>
90-
<Text style={styles.paragraph}>
91-
This is bottom text.
92-
</Text>
83+
<Text style={styles.paragraph}>This is top text.</Text>
84+
<Text style={styles.paragraph}>This is bottom text.</Text>
9385
</SafeAreaView>
9486
```
9587

9688
`forceInset` takes an object with the keys `top | bottom | left | right | vertical | horizontal` and the values `'always' | 'never'`. Or you can override the padding altogether by passing an integer.
9789

9890
There is also a [Snack](https://snack.expo.io/@react-navigation/react-navigation-docs:-safeareaview-demo-v3) available to demonstrate how `forceInset` behaves.
91+
92+
## Android notches
93+
94+
React Native does not currently expose an API to access information about device cutouts on Android devices. If your app has have an opaque status bar (the default in React Native), that may handle the area where the device has its cutout without any further work required. If not, to workaround this you may want to use the following temporary workaround:
95+
96+
- Install [react-native-device-info](https://github.com/react-native-community/react-native-device-info).
97+
- Check if the device has a notch with `DeviceInfo.hasNotch()` - this compares the device brand and model to a list of devices with notches - a crude but effective workaround.
98+
- If the device has a notch, you may want to increase the status bar height known to the SafeAreaView by doing something like this:
99+
100+
```js
101+
import { Platform } from 'react-native';
102+
import { SafeAreaView } from 'react-navigation';
103+
import DeviceInfo from 'react-native-device-info';
104+
105+
if (Platform.OS === 'android' && Device.hasNotch()) {
106+
SafeAreaView.setStatusBarHeight(
107+
/* Some value for status bar height + notch height */
108+
);
109+
}
110+
```
111+
112+
Work is in progress on a longer term solution, see [this pull request](https://github.com/facebook/react-native/pull/20999) for more information.

0 commit comments

Comments
 (0)