React-native-router-flux: How to get the navigation bar Dimensions from within a Schene?

[SudoPlz]

For example lets say I'm within my Login schene. How can I access the navigation bar and get for example its height?

Thank you..!

[aksonov]

Sorry, it is out of scope of this component, it is about react native programming. I guess you should use onLayout handler

[SudoPlz]

Could this perhaps be a future feature or should I just close the issue?

[aksonov]

It is not planned, but you may submit PR.

[SudoPlz]

On which file should I look for the Navigation bar component and its styles?

[aksonov]

NavBar.js

[SudoPlz]

Ok thanks!

[SudoPlz]

Hey @aksonov , I found a way to get the dimensions within NavBar.js, but I'm currently trying to figure out a way to pass that object with the width and height back to the user.

If your project was using redux, I would dispatch an action to save the object to the current state, but I'm so confused on how to pass that object to the end user with your library.

Any suggestions please?
Once I get this done I will open a pull request.

[aksonov]

Use Actions.refresh(data). You may specify key of scene where you want to pass that data.

[SudoPlz]

Ok so since my pull request was not accepted, here is how to set your View to render below the nav bar in both iOS and Android:

paddingTop:Platform.OS === 'ios' || Platform.Version > 19 ? 64 : 44, //nav bar height

[afilp]

@SudoPlz Is this a cross-device solution?
I find that on my Samsng Android I need to use "53", so how can we be sure of the values?

[SudoPlz]

@af7 The code is no more valid. I got this code from https://github.com/aksonov/react-native-router-flux/blob/0.26-stable/src/NavBar.js#L58 but apparently this has changed in the latest version.

Now the code has changed to (https://github.com/aksonov/react-native-router-flux/blob/master/src/NavBar.js#L66):

...Platform.select({
      ios: {
        height: 64,
      },
      android: {
        height: 54,
      },
    }),

Therefore the correct code now should be:

paddingTop:Platform.OS === 'ios'? 64 : 54, //nav bar height

[afilp]

@SudoPlz Thanks, may I assume that this is regardless of pixelRatio and same for all models of Android and iOs?

[SudoPlz]

@af7 Yes!