In my React Native app I have a component, and a tab navigator within that component, like this:

class Screen extends Component {
    render() {
        return(
            <View>
                <TabNav/>
            </View>
        )
    }
}


export const TabNav = createAppContainer(createBottomTabNavigator(
    {
        A: {
            screen: A,
        },
        B: {
            screen: B
        },
        C: {
            screen: C
        }             
    }
));

I want to include C conditionally, based on a prop passed from Screen. So I tried this:

class Screen extends Component {
    render() {
        return(
            <View>
                <TabNav
                    flag={true}
                />
            </View>
        )
    }
}


export const TabNav = createAppContainer(createBottomTabNavigator(
    {
        A: {
            screen: A,
        },
        B: {
            screen: B
        },
        ...(this.props.flag ? {C: {
            screen: C,
        }} : {}),                 
    }
));

but it throws the error Cannot read property 'props' of undefined. How can I change this so that I can pass props from Screen to TabNav?

I'm using

"react-navigation": "^4.0.10",
"react-navigation-tabs": "^2.7.0",