How to Detect if Android Device has no physical or on-screen buttons?

Question

Many Android Phones Like Google Pixel 3 and Xiaomi Mi Mix 2 etc, Does not have any on-screen or physical navigation buttons, they work with gestures. In React-Native, this is a huge problem, because if I detect the height of the screen, On modern devices, this leaves some empty screen from the bottom.

I've tried this solution, it works fine with devices with either hardware or on-screen buttons, but returns null for modern devices with no buttons. Determine whether hardware buttons are drawn on screen in React Native

My current RN version: 0.59.5

Image: This is the UI Screenshot From MI MIX 2

ask the user themselves to clarify it through a dialog – May 16 '19 at 12:03 — , May 16 '19 at 12:03

score 3 · Answer 1 · answered Jun 10 '19 at 03:34

You can compare the difference between the device and the window (usable) height:

import {Dimensions} from 'react-native';

let deviceHeight = Dimensions.get('screen').height;
let windowHeight = Dimensions.get('window').height;
let bottomNavBarHeight = deviceHeight - windowHeight;
if (bottomNavBarHeight > 0) {
    // onscreen navbar
} else {
    // not onscreen navbar
}

score 0 · Answer 2 · answered May 16 '19 at 11:19

0

Well, you could use react-native-device-info to gather mobile device model and other details, that you could filter out those modern mobile devices which doesn't support on-screen or hardware back button and deal with those mobile devices with your custom snippet.

I suppose you are using Flexbox and Dimensions from React Native Api to handle your app responsivness.

Also, it would be better if you could share the UI screenshot and the codebase you have used thus far.

answered May 16 '19 at 11:19

Taimoor Muhammad Khan

1
2

But isn't using `react-native-device-info` a long shot, I mean, there are many phones being launched that are bazel-less with no on-screen or without hardware button, do we manage all of them through this library? Because the closer you can get with this library is to check for the notch, not for the buttons. Thank you for the effort though, really appreciate it. If you could find any concrete answer, do share it with here me or in FB Developer Circle. – Awais Mughal May 16 '19 at 17:52
Updated the Question with Screenshot! – Awais Mughal May 16 '19 at 18:10

score 0 · Answer 3 · answered Nov 24 '22 at 09:37

0

I belive i have found a solution.

if((screenHeigth-windowHeigth)-StatusBar.currentHeight > 0) {
    // don't have digital on-screen buttons 
  } else {
    // have digital on-screen buttons 
  }

answered Nov 24 '22 at 09:37

KLK

49
7

How to Detect if Android Device has no physical or on-screen buttons?

3 Answers3