React Native Navigation - Putting navigationOptions of Stack Navigator inside Bottom Tab Navigator

Question

As said in the documentation of the createBottomTabNavigator, the screens inside the navigator can contain a variable called navigationOptions in which they configure different settings. I did this successfully with my own components, however, when I tried to put a Stack Navigator inside the Bottom Tab Navigator and with that, I encountered a problem.

PROBLEM: I'm not sure where to put the navigationOptions variable when creating a Stack Navigator to customize the tabIcon of the Bottom Tab Navigator that corresponds to that Stack Navigator I created.

I tried this: (Code Snippet #1)

const navigator = createStackNavigator(
    {
        'MainKYCScreen': {
            screen: KYCScreen
        }
    },
    {
    initialRouteName: "MainKYCScreen"
    },
);

const AppContainer = createAppContainer(navigator);

// navigationOptions - start
AppContainer.navigationOptions = {
    tabBarIcon: ({ focused }) => (
        <NavButtonContainer focused={focused}>
            <KYCIcon status={KYCIcon.TYPE_RED} />
        </NavButtonContainer>
    )
};
// navigationOptions - end

export default AppContainer;

And this: (Code Snippet #2)

const navigator = createStackNavigator(
    {
        'MainKYCScreen': {
            screen: KYCScreen
        }
    },
    {
        initialRouteName: "MainKYCScreen"
    },
);

const AppContainer = createAppContainer(navigator);

export default class KYCNavigator extends AppContainer {
    // navigationOptions - start
    static navigationOptions = {
        tabBarIcon: ({ focused }) => (
            <NavButtonContainer focused={focused}>
                <KYCIcon status={KYCIcon.TYPE_RED} />
            </NavButtonContainer>
        )
    }
    // navigationOptions - end
}

Removing the code from navigationOptions - start to navigationOptions - end. Putting it there seem to return an odd error.

Can somebody help me?

Answer 1

Regarding your error, just import React from 'react' package.

import React, {Component} from 'react' 

For the explanation why it should be imported, I think this could explain why.