React-native-navigation: [V2]bottomTabsHeight measurement problem

Created on 31 Aug 2018 · 6Comments · Source: wix/react-native-navigation

Issue Description

I trying to get measurements for the bottomTabsHeight in constants , but it return 0.

Steps to Reproduce / Code Snippets / Screenshots

 Navigation.constants().then((props) => {
           console.info(props)
 })

Constants {statusBarHeight: 20, topBarHeight: 0, backButtonId: undefined, bottomTabsHeight: 0}

Environment

React Native Navigation version: 2.0.2456
React Native version: 0.56.0
Platform(s) (iOS, Android, or both?): both
Device info (Simulator/Device? OS version? Debug/Release?): Simulator

🏚 stale

Source

linchenhuicn

👍7

Most helpful comment

Andres' workaround in es6:

import { Platform, Dimensions } from 'react-native';

const tabHeight = (() => {
    const isIphoneX = () => {
        let dimensions;
        if (Platform.OS !== 'ios') {
            return false;
        }
        if (Platform.isPad || Platform.isTVOS) {
            return false;
        }
        dimensions = Dimensions.get('window');
        if (dimensions.height === 812 || dimensions.width === 812) { // Checks for iPhone X in portrait or landscape
            return true;
        }
        if (dimensions.height === 896 || dimensions.width === 896) { 
            return true;
        }
        return false;
    }

    if (isIphoneX()) {
        return 84 // iPhone X
    } else if (Platform.OS == 'ios') {
        return 50 // Other iPhones
    } else {
        return 56 // Android
    }
})();

console.log(tabHeight)

mateomorris on 3 Oct 2018

👍2

All 6 comments

Navigation.constants().bottomTabsHeight returns undefined for me too...

AireshBhat on 8 Sep 2018

👍1

I too get 0 on Navigation.constants() for topBarHeight and bottomTabsHeight. Statusbarheight works. tested on iOS.

dmathewwws on 18 Sep 2018

👍1

Simply there is not implementation for iOS.

For iPhone X, XR, XS, XS Max the height is 84.
The rest of the iOS devices the height is 50.
For Android the height is 56.

I leave here a little helper.

https://gist.github.com/andres-torres-marroquin/dc043d88f3683726662b7c6bcbd0d171

andres-torres-marroquin on 21 Sep 2018

👍2

Andres' workaround in es6:

import { Platform, Dimensions } from 'react-native';

const tabHeight = (() => {
    const isIphoneX = () => {
        let dimensions;
        if (Platform.OS !== 'ios') {
            return false;
        }
        if (Platform.isPad || Platform.isTVOS) {
            return false;
        }
        dimensions = Dimensions.get('window');
        if (dimensions.height === 812 || dimensions.width === 812) { // Checks for iPhone X in portrait or landscape
            return true;
        }
        if (dimensions.height === 896 || dimensions.width === 896) { 
            return true;
        }
        return false;
    }

    if (isIphoneX()) {
        return 84 // iPhone X
    } else if (Platform.OS == 'ios') {
        return 50 // Other iPhones
    } else {
        return 56 // Android
    }
})();

console.log(tabHeight)

mateomorris on 3 Oct 2018

👍2

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.