React Navigation Header change with screen

Question

I have a StackNavigation and want a default Header (component Header) and want that "deep pages" shows up with the default header generated for the React Navigation.

In my index page **Index**, just wanted the Header component(first header)...but shows up another blank header:

In my "deep page" **Teste** just want the title and back button autogenarated by RNav(second header)...but the first header shows up.

This is my nav config:

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

Every StackNavigator brings one header, first one is from RootNavigator = StackNavigator({ and bottom one that you see is coming from Clientes: { screen: StackNavigator({.

First of all, seams header: null in your Clientes: { screen: StackNavigator({ doesn't have any effect. You should try headerMode: 'none' instead, this will remove the blank header from Index but also header from Teste with the title and back button, which is doesn't solve all your problems.

So I would suggest different navigators structure:

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

What you should you do next is set different header (default one, with back button) for Teste inside component itself, something like this:

import { Header } from 'react-navigation';

Teste.navigationOptions = ({ navigation, screenProps }) => ({
    return {
        header: <Header {...screenProps} {...navigation} />
    }
});

You can even make your own header Component and use it in Teste.navigationOptions.