Modify styling of NavigationHeader

[zackify]

I know you can place custom styles on the header itself, but I want to change the color of the back button chevron. Is there an easy way to do this without remaking the NavigationHeader myself?

Inside of renderOverlay on NavigationAnimatedView

<NavigationHeader
   {...props}
  style={styles.heading}
  renderTitleComponent={props => <NavigationHeader.Title>{title}</NavigationHeader.Title>}
/>

[ptomasroos]

https://github.com/facebook/react-native/blob/81c62c5f41da2e34f0c0e19ca38843918c23c32b/Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js

[ptomasroos]

https://github.com/facebook/react-native/blob/81c62c5f41da2e34f0c0e19ca38843918c23c32b/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js

[zackify]

Thank you!

[tgoldenberg]

I don't see how this is closed... it still isn't possible to modify the color of the back button, as it is a .png file and doesn't accept style as props. @ptomasroos, any thoughts?

[jmurzy]

@tgoldenberg Create your own back button. Here's an example.

🍺

[bradennapier]

I also dont see how this is closed.. how would you style the text of the title? I get errors if i use anything but string for the title component...

<NavigationHeader.Title>{title}</NavigationHeader.Title>

^ works fine

adding a<Text> inside of that causes propType errors because it only wants to allow strings, putting text around that causes its own errors. It doesnt appear to accept the style prop... so what do I do here? As far as I can tell every single example is just using black text so.... no help there either unless of course I am missing something which is entirely possible

I could of course just not using Navigationheader.Title - but since most examples are not doing that I figure that is not the right path to take?

[satya164]

@tgoldenberg

I don't see how this is closed... it still isn't possible to modify the color of the back button, as it is a .png file and doesn't accept style as props.

Just use your own custom back button using the renderLeftComponent prop. The default back button is a super simple component - https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js

@bradennapier

I get errors if i use anything but string for the title component...

Technically <NavigationHeader.Title /> supports both strings and <Text />. So it'll be great if someone could fix the propType to PropTypes.oneOfType([ PropTypes.string, PropTypes.instanceOf(Text) ]).isRequired - https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderTitle.js#L77 and send a PR

It doesnt appear to accept the style prop...

It accepts a textStyle prop for this.

I could of course just not using Navigationheader.Title - but since most examples are not doing that I figure that is not the right path to take?

It's totally fine to use a custom component, that's why we support passing a custom component and we encourage to use custom components wherever you need them.

[fabriziomoscon]

@satya164 I saw you contributed some customisation parts into the Header source code. After searching through issues related to style like this one, I am still not able to customise style.appbar. https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js#L136

I wonder if that is even possible. I would like to decrease the Header height (the one with Chat inside, the top one is a custom tab bar). so far I am only able to customise the backgroundColor

const style = StyleSheet.create({
    navHeader: {
        backgroundColor: colors.lightBlue,
    },
    navHeaderText: {
        flex: 1,
        fontSize: 28,
        fontWeight: '500',
        color: colors.lighterGray,
        textAlign: Platform.OS === 'ios' ? 'center' : 'left',
    },
})
renderHeader(sceneProps) {
        return (
            <NavigationHeader
                {...sceneProps}
                onNavigateBack={this.props.onNavigateBack}
                renderTitleComponent={() => {
                    return (
                        <NavigationHeader.Title textStyle={style.navHeaderText}>
                            {sceneProps.scene.route.key}
                        </NavigationHeader.Title>
                    )
                }}
                style={style.navHeader}
            />
        )
    }

Although this issue is closed it might be still helpful for others to read through the solution.

[satya164]

@fabriziomoscon You can just return a custom component from renderHeader.

[andrzey]

@fabriziomoscon offtopic, but what kind of tabnavigator did you use in that project? It looks very nice.

[fabriziomoscon]

I just customised the one in pepperoni-app-kit. The selected tab has borderBottom: 2

[satya164]

@andrzey here is a sliding tab view - https://github.com/satya164/react-native-tab-view