Change screen title change

Question

I have StackNavigation and want the default Header (component title) and want the "deep pages" to display with the default title generated for React Navigation.

On my index page **Index** just need the header component (first title) ... but another empty title is displayed:

In my "deep page" **Teste** just need the RNav (second heading) button to automatically generate a title and return button ... but the first title appears.

This is my navigation configuration:

 const RootNavigator = StackNavigator({ Welcome: {screen: Welcome}, User: { screen: TabNavigator({ Clientes: { screen: StackNavigator({ Index: {screen: Clientes}, Teste: { screen: Teste, header: undefined } }, { header: null, navigationOptions: { tabBarIcon: () => ( <Icon name="list-alt" size={22} color="#ffffff" /> ) } }) }, Opcoes: { screen: Opcoes } }, { tabBarPosition: 'bottom', tabBarOptions: { showLabel: false, activeTintColor: '#fff', showIcon: true, inactiveTintColor: '#ccc', indicatorStyle: { backgroundColor: '#ccc' }, style: { backgroundColor: '#536878' } } }) }, }, { initialRouteName: 'User', navigationOptions: { header: props => <Header {...props} /> } }); export default RootNavigator; 

Answer 1

Each StackNavigator contains one header, the first of which is from RootNavigator = StackNavigator({ , and the bottom one from Clientes: { screen: StackNavigator({ .

First of all, the header: null seams in your Clientes: { screen: StackNavigator({ have no effect. You should try headerMode: 'none' instead, this will remove the empty header from the Index , as well as the header from Teste with the title and return button that does not solve all your problems.

So, I would suggest various navigator structures:

 RootNavigator(StackNavigator) - Welcome - Index - Teste - User(TabNavigator) - Clientes - Opcoes 

What you have to do next is set a different header (the default one, with a back button) for Teste the innermost component, something like this:

 import { Header } from 'react-navigation'; Teste.navigationOptions = ({ navigation, screenProps }) => ({ return { header: <Header {...screenProps} {...navigation} /> } }); 

You can even create your own header component and use it in Teste.navigationOptions.