Get device screen height in React Native when Full Screen Gesture feature is enabled and the device have a Notch

Question

I need to get the real screen height of devices that have enabled the Full Screen Gesture feature and have a notch.

The thing is that both of this device features can be modified by users, I mean enabling/disabling Full Screen Gesture and enabling the notch hiding.

I've tried using functions of "Dimensions" class of React Native without results.

How can I detect if these features are enabled on the current device to properly adapt the height of the screen?

Answer 1

After playing a little with CSS in RN, I found that when using Flex model, some properties may be so tricky.

In my case, the real problem was to expand a view to the device height, no matter if the device have notch or the gesture mode enabled.

If we set flex: 1 to every hierarchical level of views, from root parent to the desired view, then that views will behave as full height/width.

Example:

<View style={{flex: 1}}">
    <View style={{flex: 1}}">
        <View style={{flex: 1}}">
            This view will expand to full height and width
        </View>
    </View>
</View>