- import { StyleSheet, Text, View } from ‘react-native’;
- import * as React from ‘react’;
- import { SafeAreaView } from ‘react-native-safe-area-context’;
- import Dishes from ‘./screens/tabs/dish/Dishes’;
- import Favourite from ‘./screens/tabs/fav/Favourite’;
- import DishDetails from ‘./screens/tabs/Dishdetails/DishDetails’; // Import your DishDetails screen
- import Ionicons from ‘react-native-vector-icons/Ionicons’;
- import { NavigationContainer, useNavigation } from ‘@react-navigation/native’;
- import { createBottomTabNavigator } from ‘@react-navigation/bottom-tabs’;
- import { createStackNavigator } from ‘@react-navigation/stack’;
- const styles = StyleSheet.create({});
- const DishesStack = createStackNavigator();
- function DishesStackScreen() {
- return (
-
<DishesStack.Navigator> -
<DishesStack.Screen name="Dishes" component={Dishes} - options={ {headerShown : true}} />
-
<DishesStack.Screen - name=”DishDetails”
- component={DishDetails}
-
/> -
</DishesStack.Navigator> - );
- }
- function getTabBarVisibility(route) {
- const routeName = route.state
- route.state.routes[route.state.index].name
-
: ''; - Hide the tab bar when navigating to DishDetails screen
- if (routeName === ‘DishDetails’) {
- return false;
- }
- return true;
- }
- function DishesScreen() {
- return (
-
<SafeAreaView style={{ flex: 1 }}> -
<DishesStackScreen/> -
</SafeAreaView> - );
- }
- function FavouriteScreen() {
- return (
-
<View> -
<Favourite /> -
</View> - );
- }
- const Tab = createBottomTabNavigator();
- function MyTabs() {
- return (
-
<Tab.Navigator - screenOptions={({ route }) => ({
- tabBarIcon: ({ focused, color, size }) => {
- let iconName;
- if (route.name === ‘Dishes’) {
- iconName = focused ? ‘cafe’ : ‘cafe-outline’; // Icon for the ‘Dishes’ tab
- else if (route.name === ‘Favourite’) {
- iconName = focused ? ‘heart’ : ‘heart-outline’; // Icon for the ‘Favourite’ tab
-
} - return ;
-
}, - tabBarActiveTintColor: ‘tomato’,
- tabBarInactiveTintColor: ‘gray’,
- tabBarVisible: getTabBarVisibility(route), // Conditionally hide the tab bar
-
})} -
> -
<Tab.Screen name="Dishes" component={DishesScreen} options={{headerShown : false}} /> -
<Tab.Screen name="Favourite" component={FavouriteScreen} /> -
</Tab.Navigator> - );
- }
- export default function App() {
- return (
-
<NavigationContainer> -
<MyTabs /> -
</NavigationContainer> - );
- }
- enter image description here
- I tried above approach but it’s not working..
New contributor
Anurag Singh is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.