react navigation custom tab bar

react-navigation-custom-tab-bar-using-react-navigation.md

react navigation custom tab bar using react-navigation

export default class SectionTabView extends React.Component {

	static propTypes = {
		navigation: PropTypes.object
	};

	constructor(props) {
		super(props);
	}

	render() {
		const {router, navigation} = this.props;
		const {routes, index} = navigation.state;

		/**
		 * ActiveScreen is the current screen you see when you change you navigation state in tab bar
		 */
		const ActiveScreen = router.getComponentForState(navigation.state);

		return (
			<View style={Styles.section_container}>
				<ActiveScreen
					navigation={addNavigationHelpers({
						...navigation,
						state: routes[index],
					})}
				/>
				<SectionTabBar navigation={navigation}/>
			</View>
		);
	}
}

export default class SectionTabBar extends React.Component {

	static propTypes = {
		navigation: PropTypes.object
	};

	constructor(props) {
		super(props);
	}

	getTabButtomGroupView() {
		const {navigation} = this.props;
		const {routes, index} = navigation.state;

		let tabButtomGroupView = [];

		routes.map((route) => {
			let styles = [Styles.eventSection_tab];
			const isClicked = routes[index].routeName === route.routeName;

			if(isClicked){
				styles.push(Styles.eventSection_tabClicked);
			}

			tabButtomGroupView.push(
				<TouchableOpacity
					onPress={() => {
						/**
						 * when the routeName is equal to current routeName, we should stop navigate action
						 */
						if (routes[index].routeName === route.routeName) {
							return;
						}
						navigation.navigate(route.routeName);
					}}
					style={styles}
					key={route.routeName}>

					<Text style={{color:'white'}}>{SectionRouteConfig[route.routeName].navigationOptions.title}</Text>

				</TouchableOpacity>
			)
		});

		return tabButtomGroupView;
	}

	render() {

		return (
			<View style={Styles.section_tabContainer}>
				{this.getTabButtomGroupView()}
			</View>
		);
	};
}

//SectionRouteConfig.js
export const sectionRouteConfig = {
	XXX: {
		screen: XXX, navigationOptions: {
			title: XXX
		}
	},
	XXX: {
		screen: XXX, navigationOptions: {
			title: XXX
		}
	}
};

export const SectionNavigator = createNavigator(TabRouter(sectionRouteConfig))(SectionTabView);

//Usage
render() {
		const {dispatch, navigationState} = this.props;
		return (
			<SectionNavigator
				navigation={
					addNavigationHelpers({
						dispatch: dispatch,
						state: navigationState
					})
				}
			/>
		)
	}