How to combine dynamic routes and static routes in react native - react-native

Question

I'm creating a react native wizard, and I want to combine my static route and wizard dynamic routes.
Currently I am using react navigation, and the major problem is i have a generateNavigator function that creates the dynamic routes based on the props passed down to Route.js component where the function exists. I have tried moving the function to the AppNavigator where the static routes exists but am getting navigator must be a function. I'm running the app expo
Route.js
generateNavigator = () => {
const { steps, title } = this.props;
const navigationRoutes = {};
steps.forEach((step, index) => {
const routeOptions = { screen: step.component };
navigationRoutes[step.routeName] = routeOptions;
});
const navigationOptions = {
headerStyle: {
backgroundColor: '#ffffff',
paddingHorizontal: 5,
},
headerTintColor: '#111111',
headerTitle: title,
};
return createAppContainer(createStackNavigator(navigationRoutes, { navigationOptions }));
}
AppNavigator.js
const MainStack = createStackNavigator(
{
Main: {
screen: {
MainTabNavigator,
},
},
...ModalStack
},
{
mode: 'modal',
headerMode: 'none',
}
);
export default createAppContainer(
createSwitchNavigator({
AuthLoading: AuthLoading,
Main: MainStack,
Auth: AuthStack,
}, {
initialRouteName: 'AuthLoading',
})
);
I expect the app to run without warning, but instead I'm getting a warning 'You should only render one navigator explicitly in your app'. As said earlier i tried moving the generateNavigator() to AppNavigator in order to solve the problem but with no success.