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?

Answer 1

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'
 }
})

Answer 2

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