My React navigation is dynamic, warning : You should only render one navigator explicitly in your app - json

Question

I'm struggling to make my dynamic navigation working in my react-native app.
Here is what I have on my AppNavigation.js :
import {
createDrawerNavigator,
createStackNavigator,
createSwitchNavigator, DrawerItems, SafeAreaView
} from 'react-navigation'
import LoginScreen from '../screens/LoginScreen'
import ProfileScreen from "../screens/ProfileScreen";
import TemplatesScreen from "../screens/TemplatesScreen";
import AuthLoadingScreen from "../screens/AuthLoadingScreen";
import React from "react";
import {Button, Icon} from "native-base";
import {ScrollView} from "react-native";
import NewFilmScreen from "../screens/NewFilmScreen";
import SettingsScreen from "../screens/SettingsScreen";
import LogoutScreen from "../screens/LogoutScreen";
import TemplateWorkflowContainer from "./TemplateWorkflowContainer";
const WorkflowContainer = createStackNavigator(
{
TemplateContainer: {
screen: TemplateWorkflowContainer
}
},
{
headerMode: 'none',
}
);
// drawer stack
const AppNavigation = createDrawerNavigator({
TemplatesScreen: {screen: TemplatesScreen},
NewFilm: {screen: NewFilmScreen},
ProfileScreen: {screen: ProfileScreen},
SettingsScreen: {screen: SettingsScreen},
LogoutScreen: {screen: LogoutScreen}
},
{
drawerBackgroundColor: '#ff4559',
// Default config for all screens
headerMode: 'none',
initialRouteName: 'TemplatesScreen',
contentOptions: {
activeTintColor: '#fff',
inactiveTintColor: '#fff',
itemsContainerStyle: {
marginVertical: 0,
},
itemStyle: {
flexDirection: 'row-reverse',
},
iconContainerStyle: {
opacity: 0.8,
}
},
contentComponent: props =>
<ScrollView>
<SafeAreaView forceInset={{top: 'always', horizontal: 'never'}}>
<Button transparent>
<Icon name='close' style={{fontSize: 40, color: 'white'}} onPress={() => {
props.navigation.closeDrawer()
}}/>
</Button>
<DrawerItems {...props} />
</SafeAreaView>
</ScrollView>
});
const WrapperStack = createStackNavigator({
AppDrawer: AppNavigation,
WorkflowContainer: WorkflowContainer
},
{
headerMode: 'none'
}
);
// Manifest of possible screens, when the user sign in the loginStack will be unmount to never logged out the user with
// the back button
const PrimaryNav = createSwitchNavigator({
AuthLoading: {screen: AuthLoadingScreen},
Auth: {screen: LoginScreen},
App: {screen: WrapperStack}
}, {
initialRouteName: 'AuthLoading'
});
export default PrimaryNav;
My drawer is fine. The problem is on the WorkflowContainer. This is a navigation like this :
import React, { Component } from "react";
import { createStackNavigator } from "react-navigation";
import TemplateWorkflowNavigator from "./TemplateWorkflowNavigator";
export default class TemplateWorkflowContainer extends Component {
constructor(props) {
super(props);
this.state = {
content: null
};
}
generateScreens = data => {
const stack = {};
stack["0"] = {
screen: TemplateWorkflowNavigator,
navigationOptions: () => ({
title: data.title,
gesturesEnabled: true
})
};
for (let i = 0; i < data.scenes.length; i++) {
let screenNumber = data.scenes[i].priority + 1;
stack[screenNumber] = {
screen: TemplateWorkflowNavigator,
navigationOptions: () => ({
title: data.scenes[i].name,
gesturesEnabled: true
})
};
}
return stack;
};
renderStackNavigo = aTemplate => {
const TemplateStackNavigor = createStackNavigator(
this.generateScreens(aTemplate), {headerMode: 'none'}
);
return <TemplateStackNavigor screenProps={aTemplate}/>;
};
render() {
return this.props.navigation.state.params.json && this.renderStackNavigo(this.props.navigation.state.params.json);
}
}
It's dynamic, throught the this.props.navigation.state.params.jsoni got back a JSON like this :
{
"id": 5,
"title": "toto",
"dolly": 74,
"name": "toto",
"conditions": [
{
"name": "Calm",
"desc": "test",
"priority": 0
}
],
"medias": [
{
"path": "a_path_here",
"mobile_path": "a_path_here",
"size": 80851,
"type": "preview"
}
],
"scenes": [
{
"name": "Intro",
"priority": 0,
"conditions": [
{
"name": "smile",
"desc": "test",
"priority": 0
}
],
"medias": [
{
"path": "a_path_here",
"mobile_path": "a_path_here",
"size": 80851,
"type": "preview"
}
],
"elements": [
{
"name": "Name",
"priority": 0,
"type": "text",
}
]
}
]
}
It's working when I call this
this.props.navigation.navigate("TemplateContainer", { json: path });
But I have this warning :
You should only render one navigator explicitly in your app, and other
navigators should by rendered by including them in that navigator.
I tried a lot of things, but I'm so new on react native, nothing worked.
How can I make this navigation works with no warning ? What changes do I have to apply ?

Answer 1

As my assumption, your TemplateWorkflowContainer will look like this
export default class TemplateWorkflowContainer extends Component {
static router = null;
...
renderStackNavigo = aTemplate => {
const TemplateStackNavigor = createStackNavigator(
this.generateScreens(aTemplate), {headerMode: 'none'}
);
TemplateWorkflowContainer.router = TemplateStackNavigor.router;
return <TemplateStackNavigor screenProps={aTemplate}/>;
};
...
}