NavButton should accept disabled prop. Also, it should apply props.disabledStyle if props.disabled is true.

I'm using this component in a cross platform application, and I'm having the issue when the user changes the font size globally in the phone. I'm able to set the allowFontScaling={false} to Text components, but there's no direct way to do it for the NavTitle component.
The only way I found is to edit the code in the file eact-native-nav/components/NavTitle.js to add the property to the Text component inside.

Is there any other recommended way?

Why ?

Hi,
I've overridden the static renderNavigationBar() function in order to change the NavBar when a certain component - a form - is in focus.

What I actually want to do is make the form change the NavBar components in a dynamic way while going through different parts of it:

static renderNavigationBar(){
        console.log("in renderNavigationBar");
        return(
            <NavBar rightText="Next"
                    rightOnClick={()=>alert(this.state.name)}/>
        );
    }

rightText and rightOnClick are props I've added to my NavBarIOSLight implementation (similar to what is provided in the examples here).

The problem with my above code, is that this.state.name are obviously non-static members, so this won't work! What do you suggest is the best way to change the NavBar dynamically?

Thanks,
IY

Problem

I have set the statusBar to always be visible, however, I have had some inconsistent behaviour from an iOS device:

• When I start my app in portrait orientation, the statusBar is visible.
• When I turn it to landscape, the statusBar is hidden, but the statusBar component itself is visible, giving the header a waterhead.

• When I start my app in landscape orientation, the statusBar is visible.
• When I turn it to portrait, the statusBar is also visible.

Expected behaviour

The statusBar should always be visible, as I have set it to always be visible.

Additional information

Version: 2.0.2
Platform: iOS (iPhone 6)
React Native version: 0.52.0

Code snippets/examples

I am currently unable to provide a code snippet or an example, but I'll try my best to provide it, if it is needed.

#Note

• I don't know if I am using the right terminology for statusBar, but with that I mean the actual bar of the phone itself, with indicator icons and the current time.

以下代码TextInput无法正常显示

<NavBar style={navBarStyles}>                
    <NavTitle>
        {"App"}
    </NavTitle>
    <NavGroup style={navBarStyles.navGroup}>
        <View>
            <TextInput
                ref={ref => this.textInput = ref}                            
                style={[defaultStyles.textInput]}
                />
        </View>
    </NavGroup>
</NavBar>

Hey

Can i use a background image for the navbar?

thanks

Hi,

All the files should replace View.propTypes because it's deprecated.
react-navigation/react-navigation#1352

Replace it by ViewPropTypes.

Thx!

How to give a custom font in NavTitle? I have tried this but it didn't work.

I am trying to hide the android status bar but hidden: true does not work

Hi,
I want to make a button on the left of page title so that user can go back to prev page.

<NavBar>
    <NavButton></NavButton>
    <NavTitle>{"HI"}</NavTitle>
</NavBar>

This code will position the page title to the right side of monitor.
But I want to place page title right by right of button.

How can I do that?

Than you for great components. It would be good if the import statements were updated to comply with react native 0.25 so that we avoid the deprecation warnings.

Let me know if you want me to do it and submit a pull request.

import React from 'react';

import {
    Text,
    View,
    StyleSheet,
} from 'react-native';

When buttons are of different width, title is no longer centered. See

        <NavBar>
          <NavButton onPress={() => alert('hi')}>
            <NavButtonText>
              Button
            </NavButtonText>
          </NavButton>
          <NavTitle>Title</NavTitle>
          <NavButton>
          <NavButtonText>
          B
          </NavButtonText>
          </NavButton>
        </NavBar>

Also, what If I just want a single title without any buttons?

        <NavBar>
          <NavTitle>Title</NavTitle>
        </NavBar>

I get this instead of the desired center behavior