Navigate back to the homepage

How to detect notch in react native

Infinitbility
React Native
September 30th, 2021 · 1 min read
How to detect notch in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to detect device have notch or not in ios, android, and windows, here we will use react-native-device-info ( https://github.com/react-native-device-info/react-native-device-info ) for detection device have notch or not.

Let’s start today tutorial How to detect notch in react native

What is notch?

Notch at phone is a small cut-out, which is placed at the top part of the your screen display. A notch display smartphone offers more screen display at your smartphone. You can also get battery, date & time, network signals information at the top part of your smartphone.

Introduction

React Native device info provide hasNotch() function to check device have notch or not it will return only true or false. hasNotch() function work in ios, android, and windows.

Installation

  • Go to your project directory and install react-native-device-info package using npm.
1npm install --save react-native-device-info
  • Link react-native-device-info package if your react native version less then 0.63.
1npx react-native link react-native-device-info

Syntax

DeviceInfo.hasNotch() function usages syntax.

1import DeviceInfo from 'react-native-device-info';
2
3
4let hasNotch = DeviceInfo.hasNotch();
5// true

Example

In Below Example, we will hasNotch() value on constant and show in application.

React Native Device Info hasNotch example

1import React, { Component } from 'react';
2import {
3 StyleSheet,
4 View,
5 Text,
6 SafeAreaView,
7} from 'react-native';
8import DeviceInfo from 'react-native-device-info';
9
10class App extends Component {
11
12 constructor(props) {
13 super(props);
14
15 this.state = {
16 hasNotch: false
17 }
18 }
19
20
21 componentDidMount(){
22 let hasNotch = DeviceInfo.hasNotch();
23 this.setState({hasNotch: hasNotch});
24 }
25
26
27
28 render() {
29 const { hasNotch } = this.state;
30 return (
31 <SafeAreaView style={{ flex: 1 }}>
32 <View style={styles.container}>
33 <Text>Device have notch</Text>
34 <Text>{`${hasNotch}`}</Text>
35 </View>
36 </SafeAreaView>
37 );
38 }
39}
40
41const styles = StyleSheet.create({
42 container: {
43 flex: 1,
44 alignItems: 'center',
45 marginTop: 20,
46 backgroundColor: '#ffffff',
47 },
48});
49
50export default App;

Output

React Native, DeviceInfo, hasNotch, Example

Looking for get statusBarHeight?

I have found code that is I think the best way to get height in android and ios.

StatusBarHeight.js

1import { Dimensions, Platform, StatusBar } from 'react-native';
2
3const X_WIDTH = 375;
4const X_HEIGHT = 812;
5
6const XSMAX_WIDTH = 414;
7const XSMAX_HEIGHT = 896;
8
9const { height, width } = Dimensions.get('window');
10
11export const isIPhoneX = () => Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS
12 ? width === X_WIDTH && height === X_HEIGHT || width === XSMAX_WIDTH && height === XSMAX_HEIGHT
13 : false;
14
15export const StatusBarHeight = Platform.select({
16 ios: isIPhoneX() ? 44 : 20,
17 android: StatusBar.currentHeight,
18 default: 0
19})

Then use it directly when imported:

1import { StatusBarHeight } from './StatusBarHeight.js'
2
3height: StatusBarHeight

Thanks for Reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to detect device is emulator in react native

How to detect device is emulator in react native

React Native DeviceInfo isEmulator example

September 29th, 2021 · 1 min read
How to detect headphone in react native

How to detect headphone in react native

React Native DeviceInfo isHeadphonesConnected example

September 28th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]