How do I set the color of the notch on iPhone X in React Native

Question

I have been testing my application on an iPhone X via iOS Simulator. I would like to know how I can recolour the black notch to the same color as my application theme.

Here's the current implementation:

How do I change the black bar to blue, matching my theme?

If your intention is to color the status bar (the area where time and battery indicators are shown) then this question might be of help. I am deleting my current answer as it is not relevant — Ramesh, Sep 21 '17 at 11:19
Dan, take a look at my answer here https://stackoverflow.com/questions/46318395/detecting-mobile-device-notch/46362263#46362263 Hopefully it'll address your issue (bottom part relates to CSS) — Adrian, Sep 22 '17 at 11:25
The answer can be found here: https://stackoverflow.com/questions/39297291/how-to-set-ios-status-bar-background-color-in-react-native — Ed of the Mountain, Oct 31 '17 at 21:16

score 9 · Answer 1 · answered Dec 13 '17 at 08:24

You can simply use SafeAreaView from react-native new version 51.

import {
  ...
  SafeAreaView
} from 'react-native';
class Main extends React.Component {
 render() {
   return (
     <SafeAreaView style={styles.safeArea}>
       <App />
     </SafeAreaView>
   )
 }
}
const styles = StyleSheet.create({
 ...,
 safeArea: {
  flex: 1,
  backgroundColor: '#FF5236'
 }
})

score 2 · Answer 2 · answered Oct 31 '17 at 21:29

See: How to set iOS status bar background color in React Native?

For an iPhone X, the increase StatusBarHeightIos from 20 to 30
I use react-native-device-info to detect device

import DeviceInfo from 'react-native-device-info';

// getModel: iPhone X // getDeviceId: iPhone10,3 const ModelIphoneX = 'iPhone X';

// StatusBarHeight is where Carrier info and date display at top // iPhone X has a cut-out in top of dispaly where sensor package is located. // For iPhone X increase height so cut-out does not hide text const StatusBarHeightIos = DeviceInfo.getModel() === ModelIphoneX ? 30 : 20; const StatusBarHeight = Platform.OS === 'ios' ? StatusBarHeightIos : 0;

Screenshot: iPhone X on left

score 1 · Answer 3 · answered Oct 31 '17 at 13:41

1

This is fixed by changing the app launch screen from image assets to a Storyboard, using XCode.

answered Oct 31 '17 at 13:41

Bataleon

3,194
3
21
26

How do I set the color of the notch on iPhone X in React Native

3 Answers3