absolute position in a React Native Modal is inconsistent on different devices

user_1146256 0
Viewed 2605

I am working on a React Native app. I have a button on the screen. When the user clicks the button, I make a little menu pop up adjacent to the button using a Modal component. The menu is positioned absolutely inside the Modal.

Issue: the y-position is inconsistent among devices. It's perfect on iPhone. On iPhone X it's about 20 pixels above where I want it. On Android it's about 4px above where I want it.

The button (which is also position:absolute) does not have this problem. It appears in the same location on every device.

react-native
1 Answers

The x/y coordinate system in React-Native's Modal component has it's origin (0,0) at the top left of the status bar.

Other views have their (0,0) point at the top edge but below the status bar.

Therefore absolute y position within a Modal must be increased by the height of the status bar.

However, the status bar is different heights on different devices so you'll have to check it in your code. In fact, I think status bar height can change, for example when you have a call-in-progress bar at the top of the screen.

To get status bar height on Android is easy:

import { StatusBar } from 'react-native';
statusBarHeight = StatusBar.currentHeight;

On IOS a bit tougher:

import { NativeModules, Platform } from 'react-native';
NativeModules.StatusBarManager.getHeight(result => {
    statusBarHeight = result.height;
});

The IOS getHeight() takes a callback for its argument, so you will probably need to use a Promise.

user_11462560
Related