How to nest tab navigation under container in React Native? - reactjs

Question

How do I create tabbed navigations like the image shown? Using tabBarPosition it seems I can only set the tab bar to 'top' or 'bottom' of the entire screen? Is there any way to do something similar but within a container? I'm using https://reactnavigation.org/, but if you have other suggestions as well that'd be great (a library that is easy to use, and can allow me to apply custom styles for headers, buttons etc easily).

Answer 1

You might need custom navigator by yourself.
Here is the docs: https://reactnavigation.org/docs/navigators/custom
And here is the example how to do that:
https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/CustomTabs.js

Answer 2

Following #Tyreal Gray's advise, I created a custom navigator.
Here is some sample code.
const CustomTabBar = ({ navigation }) => {
let selectedIndex = navigation.state.index;
let isSelected = false;
const { routes } = navigation.state;
return (
<View style={styles.tabContainer}>
{routes.map((route, index) => {
selectedIndex === index ? isSelected = true : isSelected = false;
let textColor = isSelected ? 'blue' : 'gray';
return (
<TouchableOpacity
onPress={() => navigation.navigate(route.routeName)}
style={styles.tab}
key={route.routeName}
>
<Text style = {{color: textColor}}>{route.routeName}</Text>
</TouchableOpacity>
)
})}
</View>
);
};
const CustomTabView = ({ router, navigation }) => {
const { routes, index } = navigation.state;
const ActiveScreen = router.getComponentForState(navigation.state);
return (
<KeyboardAwareScrollView>
<View style={styles.container}>
<CustomTabBar navigation={navigation} />
<ActiveScreen
navigation={addNavigationHelpers({
...navigation,
state: routes[index],
})}
/>
</View>
</KeyboardAwareScrollView>
);
};
const CustomTabRouter = TabRouter(
{
Details: {
screen: DetailsScreen,
path: '',
},
Media: {
screen: MediaScreen,
path: 'media',
},
Reviews: {
screen: CreateReviewFlow,
path: 'reviews',
},
},
{
// Change this to start on a different tab
initialRouteName: 'Details',
}
);
const CustomTabs = createNavigationContainer(
createNavigator(CustomTabRouter)(CustomTabView)
);