How to make tabs inside stack in react native - react-native

Question

I want to make a design like given in below image.
https://imgur.com/a/ehRthSS "image"
Here is my code for what is have tried uptil now
const NotificationTab = createMaterialTopTabNavigator({
NotificationsActivity: NotificationsActivity,
NotificationsList: NotificationsList,
},
{
initialRouteName: 'NotificationsActivity',
tabBarOptions: {
style: {
backgroundColor: 'red'
}
},
tabBarPosition: 'top',
})
I have two screens for the two tabs.
Here is my drawer navigator which calls that stack
const memberdrawerNavigator = createDrawerNavigator(
{
Notifications : { screen: NotificationTab},
ResetPassword : { screen: ResetPassword},
},
{
gesturesEnabled: true,
contentComponent: props => <DrawerMember {...props} />
},
{
contentOptions: {
}
}
);
Here is the main container for the main naviagator of the application
const AppNavigator = createAppContainer(RootStack)
export default AppNavigator;
Please help me how can i make the design given in the image? Just give me blueprint for the desing and i will make it.
Thanks in advance

Answer 1

You can make the MaterialTopTabNavigator as follows by adding some props to it.
const NotificationTab = createMaterialTopTabNavigator({
NotificationsActivity: NotificationsActivity,
NotificationsList: NotificationsList,
},
{
initialRouteName: 'NotificationsActivity',
tabBarOptions: {
//use this for change the color of active tab's label.
activeTintColor: "red",
//use this for change the color of inactive tabs' label.
inactiveTintColor: "black",
//use this for change the label styles.
labelStyle: {
fontSize: 30,
},
//use this for change the color of inactive tab.
inactiveBackgroundColor: "white",
//use this for change the style of vanigation bar.
style: {
backgroundColor: 'white',
},
//use this for change the style of indicator.
indicatorStyle: {
backgroundColor: 'white'
}
},
tabBarPosition: 'top',
})
for more info, https://reactnavigation.org/docs/en/material-top-tab-navigator.html