//I am customising bottom tab bar but it showing me error that none of these file exist.
const Tab = createBottomTabNavigator();
const Afterreg = () => {
return (
<Tab.Navigator options={({ route }) => ({
tabBarIcon: ({ color }) => {
let iconName;
if (route.name === 'Home') {
iconName = 'home';
} else if (route.name === 'Like') {
iconName = 'search';
} else if (route.name === 'Chat') {
iconName = 'calendar';
} else if (route.name === 'Profile') {
iconName = 'user-o';
}
return <FontAwesome name={iconName} size={25} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: 'selmon',
inactiveTintColor: 'gray',
}}>
<Tab.Screen name="Home" component={Cards} Options={{
tabBarIcon: ({ size, color }) => (
<MaterialCommunityIcons name="home" size={size} color={color} />
),
}} />
<Tab.Screen name="Like" component={Heart} />
<Tab.Screen name="Chat" component={Chat} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
)
}
export default Afterreg;
I am customising bottom tab bar but it showing me error that none of these file exist.
Related
enter image description here
({
headerShown: false,
tabBarStyle:{
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
height: 90,
backgroundColor: '#ffffff',
color:'black',
},
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused ? 'home' : 'home-outline';
} else if (route.name === 'Tracking') {
iconName = focused ? 'navigate' : 'navigate-outline';
}
else if (route.name === 'Setting') {
iconName = focused ? 'settings' : 'settings-outline';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: '#0B82E9',
tabBarInactiveTintColor: '#948F8F',
})}
>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Tracking" component={Tracking} />
<Tab.Screen name="Setting" component={Setting} />
</Tab.Navigator>
in this code, I want to change the border radius of the navigation bar but the result it turn into this. the background color is appeared. how can I remove that (the bg color is not that color I changed it in the app.js file to meet the upper container )
Hello I couldn't navigate from Onboarding to HomeScreen. I'm not sure what I do wrong. It gives error such as The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization
for more details.
//AppRoot.js
const [isFirstLaunch, setFirstLaunch] = useState(null);
useEffect(() => {
AsyncStorage.getItem("onboardingCompleted").then((value) => {
if (value == null) {
setFirstLaunch(true);
} else {
setFirstLaunch(false);
}
});
}, []);
return (
<NavigationContainer
ref={navigationRef}
onReady={() =>
(routeNameRef.current =
navigationRef?.current?.getCurrentRoute()?.name ?? "")
}
onStateChange={() => {
const previousRouteName = routeNameRef.current;
const currentRouteName =
navigationRef?.current?.getCurrentRoute()?.name;
trackScreenView(previousRouteName, currentRouteName);
console.log(previousRouteName, " -> ", currentRouteName);
// Save the current route name for later comparison
routeNameRef.current = currentRouteName;
}}
theme={themeToSet === "dark" ? DarkModeTheme : LightModeTheme}
>
<Loader visible={isLoading} />
{isFirstLaunch == false ? <HomeScreen /> : <OnboardingScreen />}
</NavigationContainer>
);
// Onboarding
const OnboardingScreen = () => {
const navigation = useNavigation();
const [currentPage, setCurrentPage] = useState(0);
const pages = [
<WelcomeScreen onGetStarted={() => setCurrentPage(1)} />,
<PersonalizationScreen1 />,
<PersonalizationScreen2 />,
<NotificationScreen />,
<WidgetScreen />,
<PaywallScreen />,
<EndScreen />,
];
const onContinue = () => {
if (currentPage === pages.length - 1) {
AsyncStorage.setItem("onboardingCompleted", "true");
} else {
setCurrentPage(currentPage + 1);
}
};
return <View>{React.cloneElement(pages[currentPage], { onContinue })}</View>;
};
export default OnboardingScreen;
//HomeScreen
const Tab = createBottomTabNavigator();
const HomeBottomNavigation = () => {
const { colors } = useTheme();
const { t } = useTranslation();
return (
<Tab.Navigator
id="BottomNavigation"
initialRouteName="Users"
screenOptions={({ route, navigation }) => ({
headerShown: false,
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === "UsersStack") {
iconName = focused ? "people" : "people-outline";
} else if (route.name === "SettingsStack") {
iconName = focused ? "settings" : "settings-outline";
} else if (route.name === "Feedback") {
iconName = focused ? "newspaper" : "newspaper-outline";
} else if (route.name === "More") {
iconName = focused ? "apps" : "apps-outline";
}
return <Icon name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: colors.text,
tabBarInactiveTintColor: "gray",
unmountOnBlur: true,
})}
>
<Tab.Screen
name="UsersStack"
component={UsersStackScreen}
options={{ headerShown: false, title: t("users") }}
/>
<Tab.Screen
name="SettingsStack"
component={SettingsStackScreen}
options={{ headerShown: false, title: t("settings") }}
/>
<Tab.Screen
name="Feedback"
component={FeedbackScreen}
options={{ headerShown: false, title: t("feedback") }}
/>
<Tab.Screen
name="More"
component={MoreScreen}
options={{ headerShown: false, title: t("more") }}
/>
</Tab.Navigator>
);
};
export default HomeBottomNavigation;
//Onboarding Stack
const Stack = createNativeStackNavigator();
const OnboardingStackNavigation = () => {
return (
<Stack.Navigator
id="OnboardingNavigation"
initialRouteName="Onboarding"
screenOptions={({ route, navigation }) => {
({ headerShown: false });
}}
>
<Stack.Screen
name="Onboarding"
component={OnboardingScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Home"
component={UsersScreen}
options={{ headerShown: false }}
/>
</Stack.Navigator>
);
};
I have tried passing setFirstLaunch to onboarding screen and tried to manage that.
I have tried navigating inside Onboarding.
I have tried button triggered navigation.
I am trying to implement a bottom tab bar with custom tabs. for example, my tab names are a, b, c, and d in some other cases my tab bar names are k, l, m, and n. How to handle this type of scenario. Currently, my component looks like the below. I tried various ways unable to do it. I tried using the map function also it's working.
Tabbar.js
const LoginStack = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Home"
component={Home}
options={({ route }) => ({
title: route.params?.title,
headerBackVisible: false,
})}
/>
</Stack.Navigator>
);
};
const Tabs = () => {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false,
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === "LOGIN") {
iconName = focused ? loginAct : loginInAct;
} else if (route.name === "A") {
iconName = focused ? aAct : aInAct;
} else if (route.name === "B") {
iconName = focused ? bAct : bInAct;
} else if (route.name === "C") {
iconName = focused ? bAct : bInAct;
} else if (route.name === "D") {
iconName = focused ? dAct : dInAct;
}
// You can return any component that you like here!
return <Image source={iconName} style={{ width: 20, height: 20 }} />;
},
tabBarActiveTintColor: "#007abc",
tabBarInactiveTintColor: "#000000",
})}
>
<Tab.Screen name="LOGIN" component={LoginStack} />
<Tab.Screen name="A" component={A} />
<Tab.Screen name="B" component={B} />
<Tab.Screen name="C" component={C} />
<Tab.Screen name="D" component={D} />
</Tab.Navigator>
);
};
I have my react tab navigation set up in the following way:
export default MainStackScreens = () => {
const MainStack = createBottomTabNavigator();
const screenOptions = ({ route }) => ({
tabBarShowLabel: false,
tabBarIcon: ({ focused }) => {
let iconName = 'home';
switch (route.name) {
case 'Home':
iconName = 'home';
break;
case 'Favorite':
iconName = 'heart';
break;
case 'Filter':
iconName = 'filter';
break;
case 'Profile':
iconName = 'user';
break;
default:
iconName = 'home';
}
if (route.name === 'Post') {
return <AntDesign name='pluscircle' size={42} color={colors.green} />;
}
return (
<FontAwesome
name={iconName}
size={30}
color={focused ? '#1f2833' : '#cacaca'}
/>
);
},
});
return (
<MainStack.Navigator screenOptions={screenOptions}>
<MainStack.Screen name='Home' component={HomeScreen} />
<MainStack.Screen name='Favorite' component={FavoriteScreen} />
<MainStack.Screen name='Post' component={PostScreen} />
<MainStack.Screen name='Filter' component={FilterScreen} />
<MainStack.Screen name='Profile' component={ProfileScreen} />
</MainStack.Navigator>
);
};
Is there a way I can modify this code to have the "Post" route come up as a modal rather than just a normal screen? I've tried several things I found online including splitting the stacks into separate stack groups and fiddling with the screen options but nothing I've done so far seems to have any effect :(
Thanks!
So with some help I got it figured out, it requires some very weird work around using the the listners prop:
return (
<MainStack.Navigator screenOptions={screenOptions}>
<MainStack.Screen name='Home' component={HomeScreen} />
<MainStack.Screen name='Favorites' component={FavoriteScreen} />
<MainStack.Screen
name='Add'
component={PostTab}
listeners={({ navigation }) => ({
tabPress: (event) => {
event.preventDefault();
navigation.navigate('AddModal');
},
})}
/>
<MainStack.Screen name='Search' component={FilterScreen} />
<MainStack.Screen name='Profile' component={ProfileScreen} />
</MainStack.Navigator>
);
};
Is there a way where I could hide the screen that says "### HIDE ME ###" or is there a way where I could define a screen that wont show up in the Tab Navigation?
Here is the code:
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'ios-home'
: 'ios-home';
} else if (route.name === 'Messages') {
iconName = focused ? 'ios-paper-plane' : 'ios-paper-plane';
} else if (route.name === 'Todo') {
iconName = focused ? 'ios-list-box' : 'ios-list';
} else if (route.name === 'More') {
iconName = focused ? 'ios-more' : 'ios-more';
} else if (route.name === 'Videos') {
iconName = focused ? 'ios-videocam' : 'ios-videocam';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: '#ffcc07',
inactiveTintColor: 'gray',
}}>
<Tab.Screen name="Home" component={DashboardScreen} />
<Tab.Screen name="Messages" component={MessagesScreen} />
<Tab.Screen name="Todo" component={TodoScreen} />
<Tab.Screen name="Videos" component={WisdomReplayScreen} />
<Tab.Screen name="More" component={MoreOptionsScreen} />
<Tab.Screen name="Test" component={Test} ### HIDE ME ###/>
</Tab.Navigator>
you can determine the screens on which the tab bar should be hidden like this
function getTabBarVisible(route) {
const routeName = route.state
? route.state.routes[route.state.index].name
: route.params?.screen || 'Home';
if (routeName === 'Home') {
return false;
}
return true;
}
**and attach it to the tab navigator's screen:**
<Tab.Screen name="Home"
component={HomeStackScreen}
options={({ route }) => ({
tabBarVisible: getTabBarVisible(route) })} />