Slot recognition on the screen

Asked

Viewed 111 times

3

I would like to know how to make my app recognize the famous "Notchs" (screen slots) of mobile phones.

Currently I use React Native 0.55.4 in one Windows 10 64 Bits

Example of a cell phone with notch below.

inserir a descrição da imagem aqui

react-native

1 answer

2

Biblioteca-less

iOS

Safeareaview Applicable on devices with iOS above 11.

Use of SafeAreaView if the phone has the notch it applies a layout adapted to the model. More information and how to use.

Android

Unlike iOS the android has not yet been able to verify the existence of notch. However it is possible to find the total size of the StatusBar, in that way:

StatusBar.currentHeight

Generally (not in all cases) the notch is part of the composition of StatusBar. With this you can determine a padding-top to be right on the screen, for example.

Obs:

  • May happen of StatusBar be hidden and it is not possible to make this process.
  • The notch on the screen is known in English as notch

Using Library

You can use the library React-Native-device-info (must be installed) which has the method hasNotch(). The same so called returns a boolean value.

Example of use:

import DeviceInfo from 'react-native-device-info';
...
const hasNotch = DeviceInfo.hasNotch(); // true ou false

Working Example

Browser other questions tagged react-native

You are not signed in. Login or sign up in order to post.