React native BottomTabNavigation in BottomTabNavigation - react-native

Question

I'm building a react-native app. Basically, it has a BottomTabNavigation for navigating through the screens.
In one of my screens, I want to open another screen with a BottomTabNavigation to navigate to other screens inside.
Unfortunately, I haven't found something on Google or in the search function. Is this possible to create?

Answer 1

You can do it easily using a module called react-native-best-viewpager!
Install with:
npm install --save react-native-best-viewpager or with yarn install react-native-best-viewpager if you're using yarn.
Here's an example of how to use it:
import {StyleSheet, View, Text} from 'react-native';
import React, {Component} from 'react';
import {PagerTabIndicator, IndicatorViewPager} from 'react-native-best-viewpager';
export default class ViewPagerPage extends Component {
render() {
return (
<View style={{flex:1}}>
<IndicatorViewPager
style={{flex:1, paddingTop:20, backgroundColor:'white'}}
indicator={this._renderTabIndicator()}
>
<View style={{backgroundColor:'cadetblue'}}>
<Text>page one</Text>
</View>
<View style={{backgroundColor:'cornflowerblue'}}>
<Text>page two</Text>
</View>
<View style={{backgroundColor:'#1AA094'}}>
<Text>page three</Text>
</View>
</IndicatorViewPager>
</View>
);
}
_renderTabIndicator() {
let tabs = [{
text: 'Home',
iconSource: require('../imgs/ic_tab_home_normal.png'),
selectedIconSource: require('../imgs/ic_tab_home_click.png')
},{
text: 'Message',
iconSource: require('../imgs/ic_tab_task_normal.png'),
selectedIconSource: require('../imgs/ic_tab_task_click.png')
},{
text: 'Profile',
iconSource: require('../imgs/ic_tab_my_normal.png'),
selectedIconSource: require('../imgs/ic_tab_my_click.png')
}];
return <PagerTabIndicator tabs={tabs} />;
}
}