Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

What is the best practice of using async DeviceInfo.hasNotch() for styling

See original GitHub issue

Question

Previously I used RNDeviceInfo version 2.3.2 and although DeviceInfo.hasNotch() is marked as async in the document, I can still use it as synchronous way to apply style for my components like this:

marginTop: DeviceInfo.hasNotch() ? GAP.medium : 0

However, when I upgrade this lib to version 3.1.4 (to detect iphone 11, 11 Pro, 11 Pro Max, …), DeviceInfo.hasNotch() is now async so the above code is not working anymore.

So my question is, what is the best practice of using async DeviceInfo.hasNotch() for styling in RN?

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:16

Top GitHub Comments

3reactions

mikehardycommented, Oct 8, 2019

Honestly - my best advice is to do one of two things:

1- if you are not using the Chrome debugger, upgrade and use hasNotchSync() for now (but if you are using the debugger it will break #776) 2- wait for just a couple more days, and a few items that are important at startup (where it is very difficult to be async) will be constants again available synchronously (like the xxxSync() APIs that are available in v3) but without causing bug #776

I’m going to close this not because it’s not a legit issue - the PR #817 is targeted at easing the pain, just that you should probably just subscribe there and wait for v4 which will be out in a bit

1reaction

mikehardycommented, Oct 11, 2019

thank you so much for testing this, by the way! directly improved the quality - I would have missed at least one of these in my testing I’m sure

Top Results From Across the Web

How to use the react-native-device-info.hasNotch function in ...

async componentDidMount() { let deviceJSON = {}; try { deviceJSON.manufacturer = await getManufacturer(); deviceJSON.buildId = await DeviceInfo.getBuildId(); ...

React Native Device Info: The Essential Guide | Waldo Blog

Device information is very important for a developer in order to know the types of devices that users are using. To give a...

Using Async Await Inside React's useEffect() Hook

In this post you'll learn how to use an async function inside your React useEffect hook. Perhaps you've been using the good old...

How to use SafeAreaView for Android notch devices?

This should work good as get height will take care of the knotch in android device by calculating the statusBar height and it...

react-native-device-info | Yarn - Package Manager

react-native-device-info. owner react-native-device-info1.5mMIT10.3.0TS vulns 0 vulnerabilities. Get device information using react-native.