How to hide tab bar in profile screen in react native? - reactjs

Question

MyDrawer.js
function BottomTabNavigator() {
return (
<Tab.Navigator
initialRouteName="MainHome"
screenOptions={({ route }) => ({
headerShown: false,
tabBarLabelStyle: { fontSize: RFPercentage(1.60) },
tabBarInactiveTintColor: "#444444",
tabBarActiveTintColor: "#444444",
tabBarStyle: {
height: verticalScale(70),
paddingBottom: scale(10),
},
})}>
<Tab.Screen
name={"AccountsScreen"}
component={AccountsScreen}
options={{
title: "ACCOUNTS",
tabBarIcon: ({ color, size }) => (
<Image source={require("./img/bankTab.png")}
style={{ width: scale(30), height: scale(30), borderRadius: 0 }} />
),
}}
/>
<Tab.Screen
name={"McoinScreen"}
component={McoinScreen}
options={{
title: "MCOINS",
tabBarIcon: ({ color, size }) => (
<Image source={require("./img/dollar.png")}
style={{ width: scale(30), height: scale(30), borderRadius: 24 }} />
),
}}
/>
<Tab.Screen
name={"MainHome"}
component={MainHome}
options={{
title: "GET CASH",
tabBarIcon: ({ color, size }) => (
<Image source={require("./img/coinimg.png")}
style={{ width: scale(30), height: scale(30), borderRadius:0 }} />
),
}}
/>
<Tab.Screen
name={"ActivityScreen"}
component={ActivityScreen}
options={{
title: "ACTIVITY",
tabBarIcon: ({ color, size }) => (
<Image source={require("./img/activity.png")}
style={{ width: scale(30), height: scale(28), borderRadius: 0 }} />
),
}}
/>
<Tab.Screen
name={"ProfileScreen"}
component={ProfileScreen}
options={{
title: "PROFILE",
tabBarIcon: ({ color, size }) => (
<Image source={require("./img/profileimg.png")}
style={{ width: scale(26), height: scale(26), borderRadius:0 }} />
),
}}
/>
</Tab.Navigator>
);
}
const MyDrawer = () => {
return (
<Drawer.Navigator
drawerContent={props => <CustomeDrawer {...props} />}
initialRouteName="MainHome"
screenOptions={{
headerShown: false,
headerTransparent: false,
drawerActiveBackgroundColor: '#fff',
drawerActiveTintColor: '#fff',
drawerInactiveBackgroundColor: '#fff',
drawerStyle: {
width: scale(250),
},
drawerLabelStyle: { fontSize: RFPercentage(3), color: '#000' }
}}>
<Drawer.Screen
name="Home"
component={BottomTabNavigator}
options={{
title: "Get Cash",
drawerIcon: ({ color }) => (
<Image style={{ width: scale(25), height: scale(25), }}
source={require('./img/rupee.png')} />
)
}}
screenOptions={{
headerShown: true,
}}
/>
<Drawer.Screen
name="AccountsScreen"
component={AccountsScreen}
options={{
title: "Activity",
drawerIcon: ({ color }) => (
<Image style={{ width: scale(25), height: scale(25), }}
source={require("./img/page.png")} />
)
}}
screenOptions={{
headerShown: true,
}}
/>
<Drawer.Screen
name="FriendsScreen"
component={FriendsScreen}
options={{
title: "Friends",
drawerIcon: ({ color }) => (
<Image style={{ width: scale(25), height: scale(25), }}
source={require("./img/friends.png")} />
)
}}
screenOptions={{
headerShown: true,
}}
/>
<Drawer.Screen
name="ReferEnrnScreen"
component={ReferEnrnScreen}
options={{
title: "Refer & Earn",
drawerIcon: ({ color }) => (
<Image style={{ width: scale(25), height: scale(25), }}
source={require("./img/invite.png")} />
)
}}
screenOptions={{
headerShown: true,
}}
/>
<Drawer.Screen
name="ShopScreen"
component={ShopScreen}
options={{
title: "Shop",
drawerIcon: ({ color }) => (
<View style={{ flexDirection: 'row' }}>
<Image style={{ width: scale(25), height: scale(25), }}
source={require("./img/cart.png")} />
<View style={{
marginLeft:deviceWidth/2.10, position: 'absolute',
backgroundColor: "#2192FF", height: verticalScale(25),
width: scale(50), borderRadius: 5,
marginTop:verticalScale(5),
alignItems: 'center', justifyContent: 'center'
}}>
<Text style={{ color: "#fff",fontSize: RFPercentage(2) }}>New</Text>
</View>
</View>
)
}}
screenOptions={{
headerShown: true,
}}
/>
<Drawer.Screen
name="HelpScreen"
component={HelpScreen}
options={{
title: "Help",
drawerIcon: ({ color }) => (
<Image style={{ width: scale(25), height: scale(25),}}
source={require("./img/help.png")} />
)
}}
screenOptions={{
headerShown: true,
}}
/>
<Drawer.Screen
name="AboutusScreen"
component={AboutusScreen}
options={{
title: "About us",
drawerIcon: ({ color }) => (
<Image style={{ width: scale(25), height: scale(25)}}
source={require('./img/information.png')}/>
)
}}
screenOptions={{
headerShown: true,
}}
/>
</Drawer.Navigator>
);
}
App.js
const App = () => {
return (
<NavigationContainer>
<StatusBar backgroundColor="#000" />
<Stack.Navigator initialRouteName="Language" screenOptions={{ headerShown: false }}>
<Stack.Screen name="Splash" component={Splash} />
<Stack.Screen name="HomeScreen" component={HomeScreen} options={horizontalAnimation} />
<Stack.Screen name='PermissionPage' component={PermissionPage} options={horizontalAnimation} />
<Stack.Screen name='Login' component={Login} options={horizontalAnimation} />
<Stack.Screen name='MobileNumber' component={MobileNumber} options={verticalAnimation} />
<Stack.Screen name='PhoneSetting' component={PhoneSetting} />
<Stack.Screen name='ConformOtp' component={ConformOtp} options={verticalAnimation} />
<Stack.Screen name='StatusScreen' component={StatusScreen} options={horizontalAnimation} />
<Stack.Screen name='IncomeReceive' component={IncomeReceive} options={verticalAnimation} />
<Stack.Screen name='ReferralCode' component={ReferralCode} options={horizontalAnimation} />
<Stack.Screen name='Language' component={Language} options={horizontalAnimation} />
<Stack.Screen name='MainHome' component={MyDrawer} options={verticalAnimation} />
<Stack.Screen name='Notification' component={Notification} options={horizontalAnimation} />
<Stack.Screen name='KycForm' component={KycForm} options={horizontalAnimation} />
</Stack.Navigator>
</NavigationContainer>
);
}
Output:
here img active screen is get coin
but when I navigate to profile screen tab bar is hide
I'm creating a app,it's releted to loan
I want output like this if I click only profile screen then my tab bar is hide only for profile screen,
I don't know how to do that,
any one can help me ?
Thank you!