Dynamic react-navigation Navigators.

page.js

import React, {Component} from 'react';
import {TabNavigator} from 'react-navigation';

import One from '../tabs/one';
import Two from '../tabs/two';

const pages = {
	TheOne: {
		screen: One,
		path: '/one'
	},
	TheTwo: {
		screen: Two,
		path: '/two'
	}
};



const pagesTwo = {
	three: {
		screen: One,
		path: '/one'
	},
	four: {
		screen: Two,
		path: '/two'
	}
};

export const TabNavigatorTest = TabNavigator(pages, {
	tabBarPosition: 'bottom',
	animationEnabled: false,
	tabBarOptions: {
		activeTintColor: '#e91e63',
		labelStyle: {
			fontSize: 15,
		},
	},
});

const dynamicPageBuilder = (pages) => {
	return TabNavigator(pages, {
		tabBarPosition: 'bottom',
		animationEnabled: false,
		tabBarOptions: {
			activeTintColor: '#e91e63',
			labelStyle: {
				fontSize: 15,
			},
		},
	});
};


class Home extends Component {
	static router = TabNavigatorTest.router;
	render() {
		//WORKING
		return (
			<TabNavigatorTest navigation={this.props.navigation} />
		);

		//NOT WORKING
		/* Attempting to get a dynamically routed navigator.  Few things that aren't working with this.
		* 1: you can't update the static router so trying to start with a null one then update in componentDidMount
		* wasn't working.
		*
		* 2: Stubbing out the router with blank entries wasn't working either
		*
		* 3: Creating additional components to attempt either as HOC's or as children don't work as
		* their navigator is undefined when attempting to pass in nav props
		*
		* 4: Attempting to replace and insert Redux requires static routes starting ahead of time.
		*/

		// const BuiltNavigator = dynamicPageBuilder(pagesTwo);
		// return (
		// 	<BuiltNavigator navigation={this.props.navigation} />
		// );
	}
}

//
export default Home;