I have 3 bottom tabs in my home screen stack. The first tab, which is home, has some buttons on it. On click of each button, a new screen is supposed to be displayed. So far, it hasn't worked. I keep getting this error:
The action 'NAVIGATE' with payload {"name":"ScreenName"} was not handled by any navigator.
Do you have a screen named 'ScreenName'?
Here's an overview of my Navigators:
StackNavigator -> Home Screen (BottomNavigator) -> HomeStackScreen(Stack Navigtor)...others are just screens in the bottom navigator for now
In code:
import * as React from 'react'
import { StatusBar, View, StyleSheet } from 'react-native'
import { NavigationContainer, Theme } from '#react-navigation/native'
import { createNativeStackNavigator } from '#react-navigation/native-stack'
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import { navigationRef } from './NavigationService'
const Stack = createNativeStackNavigator()
const AuthStack = createNativeStackNavigator()
const BottomStack = createBottomTabNavigator()
const HomeStack = createNativeStackNavigator()
import Home from 'app/screens/Home'
import Notifications from 'app/screens/WearNotifications'
import ScanCloth from 'app/screens/ScanCloth'
import MyWardrobe from 'app/screens/MyWardrobe'
const HomeStackScreen = () => { // problem occurs with the screens in this navigator
return <HomeStack.Navigator
screenOptions={{
headerShown: false,
}}
>
<HomeStack.Screen
name="Home"
component={Home}
/>
<HomeStack.Screen
name="ScreenName"
component={ComponentToDisplayOnClick}
/>
<HomeStack.Screen
name="ScreenName"
component={ComponentToDisplayOnClick}
/>
</HomeStack.Navigator>
}
const LoggedInNavigator = () => (
<BottomStack.Navigator
screenOptions={() => ({
tabBarStyle: {
backgroundColor: '#1B1464',
height: 65,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
paddingBottom: 10,
paddingTop: 10
},
headerShown: false,
tabBarLabel: () => {return null}
})}
>
<BottomStack.Screen
name="HomeStack"
component={HomeStackScreen}
options={{
tabBarIcon: ({color}) => (
<View
style={styles.bottomNavCircle}
>
<MaterialCommunityIcons
name="home"
color={color}
size={30}
/>
</View>
)
}}
/>
... other bottom tabs
</BottomStack.Navigator>
)
const App: React.FC = () => {
return (
<NavigationContainer ref={navigationRef} >
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen
name="UnAuthenticated"
component={AuthNavigator}
/>
<Stack.Screen
name="Home"
component={LoggedInNavigator}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default App
Is there anything I'm doing wrong? I only want to navigate to a different screen on my home page, which is the first tab of the bottom navigator. Haven't seen any useful articles for this, all are showing stand alone use cases for navigators.
I started with React Native 12 days ago, from a Flutter background. Thanks
I solved this question by delaying the navigation call method invocation with ()=> arrow function. It navigates now, however, the bottom navigation bar still persists. Is there a way to hide the bottom bar on navigation? Thanks
Related
I am very new to React/React-Native and Javascript as well but not to programming in general. I recently started learning React-Native and have been watching the The Net Ninja's playlist on YouTube which is 3-4 years old. He does some things that are not available or have been changed in the newer API. Most of the stuff I am able to fix my self, but I can't seem figure this one out.
How do I change the title on the header of Drawer Navigator when the screen changes?
Here is how my app looks like,
I have 2 Stack Navigator screens Home and About
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import Home from '../screens/home';
import Reviews from '../screens/reviews';
const Stack = createNativeStackNavigator();
export default function HomeStack() {
return (
<Stack.Navigator initialRouteName="Home">
<Stack.Group screenOptions={{
/* headerStyle: { */
/* backgroundColor: '#eee', */
/* height: 80, */
/* }, */
/* headerTintColor: '#444', */
header: () => null,
headerShown: true,
}}>
<Stack.Screen
name='HomeScreen'
component={Home}
options={{ title: 'GameZone' }}
/>
<Stack.Screen
name='ReviewsScreen'
component={Reviews}
options={{ title: 'Reviews' }}
/>
</Stack.Group>
</Stack.Navigator>
);
};
import { createStackNavigator } from '#react-navigation/stack';
import About from '../screens/about';
const Stack = createStackNavigator();
export default function AboutStack() {
return (
<Stack.Navigator initialRouteName="Home" screenOptions={{ headerMode: 'screen' }}>
<Stack.Group screenOptions={{
/* headerStyle: { */
/* backgroundColor: '#eee', */
/* height: 80, */
/* }, */
/* headerTintColor: '#444', */
header: () => null,
headerShown: false,
}}>
<Stack.Screen
name='AboutScreen'
component={About}
options={{ title: 'About GameZone' }}
/>
</Stack.Group>
</Stack.Navigator>
);
};
and I then I have a Drawer Navigator,
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator } from "#react-navigation/drawer";
import AboutStack from './aboutStack';
import HomeStack from './homeStack';
const RootDrawerNavigator = createDrawerNavigator();
export default function Drawer() {
return (
<NavigationContainer>
<RootDrawerNavigator.Navigator initialRouteName='GameZone' backBehavior='history'>
<RootDrawerNavigator.Group screenOptions={{
headerStyle: {
backgroundColor: '#ccc',
height: 80,
},
headerTintColor: '#444',
}}>
<RootDrawerNavigator.Screen
name='Home'
component={HomeStack}
options={{ title: 'Home' }}
/>
<RootDrawerNavigator.Screen
name='About'
component={AboutStack}
options={{ title: 'About' }}
/>
</RootDrawerNavigator.Group>
</RootDrawerNavigator.Navigator>
</NavigationContainer>
);
}
Now no matter which screen I go to I only see title from the screen defined in Drawer Navigator which are Home or About on the header and not from the other screens defined under HomeStack.
This is the Home screen,
This is the Drawer
This is the About screen
This is the Reviews screen
Home and Reviews screens are part of HomeStack and whenever I click on a item from home screen it should say Reviews as I am in the reviews screen then.
Also because I have disabled the header in the stack navigator, I don't have a back button anymore.
In your drawer navigator file, you have named reviews screen as home. Your screen's name can be changed by changing those.
<RootDrawerNavigator.Screen
name='Home' // here
component={HomeStack}
options={{ title: 'Home' }} // here
/>
<RootDrawerNavigator.Screen
name='About'
component={AboutStack}
options={{ title: 'About' }}
/>
import * as React from "react";
import { SafeAreaView, useWindowDimensions } from "react-native";
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from "#react-navigation/native";
import { RegistrationScreen } from './src/screens/Registration/RegistrationScreen';
import {LoginScreen} from './src/screens/Login/LoginScreen';
import {NewAnuncioScreen} from './src/screens/NewAnuncio/NewAnuncioScreen';
import { FeedScreen } from "./src/screens/Feed/FeedScreen";
import { FontAwesome, AntDesign, FontAwesome5, Entypo} from '#expo/vector-icons';
const Drawer = createDrawerNavigator()
const App = () => {
const dimensions = useWindowDimensions();
return (
<SafeAreaView style={{ flex: 1 }}>
<NavigationContainer>
<Drawer.Navigator initialRouteName="Feed" screenOptions={{
headerStyle: { backgroundColor: "#f2bc1b" , height: 55},
drawerType: dimensions.width >= 821 ? 'permanent' : 'front',
overlayColor: 'transparent',
drawerContent:{CustomDrawerContent}
}}>
<Drawer.Screen name="Feed" component={FeedScreen}/>
<Drawer.Screen name="Registration" component={RegistrationScreen} options={{ headerShown: false }} />
<Drawer.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
{/* <Drawer.Screen name="Criar Anúncio" component={NewAnuncioScreen} /> */}
</Drawer.Navigator>
</NavigationContainer>
</SafeAreaView>
)
}
export default App;
**I want the header´s structures can vary like that:
enter image description here
enter image description here
But i don´t know how to make this.
If someone help me i thanks.**
You should pass the Drawer props to your custom drawer and retrieve the navigation index.
drawerContent = {(props) => <CustomDrawerContent {...props} />}
Then
const CustomDrawerContent = (props) => {
const [index, setIndex] = useState(0)
useEffect(() => {
setIndex(props.state.index);
}, [props])
...
Now according to this index you can change the appearance and the behavior your drawer content.
I am trying to implement the bottom tab using react-navigation v5 but I am facing an issue. The top header is not showing in-app, When I implement header style is not showing. Could someone please help me how to resolve this issue? I really tried hard but was not able to achieve it.
Thanks
Note: I am using react-navigation v5.
import React from "react";
import {
FontAwesome5,
Ionicons,
Feather,
FontAwesome,
} from "#expo/vector-icons";
import { NavigationContainer } from "#react-navigation/native";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import MainAppNavigator from "../navigations/AppNavigator";
const Tab = createBottomTabNavigator();
const AppNavigator = () => (
<Tab.Navigator initialRouteName="Home">
<Tab.Screen
name="Home"
component={MainAppNavigator}
options={{
headerTitle: "Simply Dispatch",
headerTintColor: "#fff",
headerStyle: {
backgroundColor: "#495AEC",
},
tabBarIcon: ({ color, size }) => (
<FontAwesome name="truck" size={size} color={color} />
),
}}
/>
</Tab.Navigator>
);
export default AppNavigator;
I am developing an app which has bottom tab navigation. For implementing this , I've used react-navigation-material-bottom-tabs, which is working perfectly fine. Like I have 3 screens ,say Home, Profile and About in the bottom tab navigator. But in the Home screen I have multiple screens flow to be implemented. For that I used Stack Navigator, which is also working fine. So my app flow is like Home-> Screen1-> Screen2-> Screen3 Where I'm facing problem is that suppose I'm on Screen3 and then I switch to Profile screen from bottom navigation, and then again switch to Home screen.
I should be able to see Home Screen there but currently it shows Screen3
Following is my code:
MainTabs.js
import { createStackNavigator } from '#react-navigation/stack';
import Icon from 'react-native-vector-icons/Ionicons';
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
const HomeStack = createStackNavigator();
const ProfileStack = createStackNavigator();
const AboutStack = createStackNavigator();
const HomeStackScreen = ({ navigation }) => {
return (
<HomeStack.Navigator screenOptions={{headerShown: false, initialRouteName: 'Screen1'}}>
<HomeStack.Screen name="Screen1" component={Screen1} />
<HomeStack.Screen name="Screen2" component={Screen2} />
<HomeStack.Screen name="Screen3" component={Screen3}/>
</HomeStack.Navigator>
)
}
const ProfileStackScreen = ({ navigation }) => {
return (
<ProfileStack.Navigator screenOptions={{headerShown: false, initialRouteName: 'Profile'}}>
<ProfileStack.Screen name="Profile" component={Profile} />
</ProfileStack.Navigator>
)
}
const AboutStackScreen = ({ navigation }) => {
return (
<AboutStack.Navigator screenOptions={{headerShown: false, initialRouteName: 'About'}}>
<AboutStack.Screen name="About" component={About} />
</AboutStack.Navigator>
)
}
const MainTabScreen = () => {
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#fff"
barStyle={{ backgroundColor: 'red' }}
labeled={false}
>
<Tab.Screen
name="Home"
component={HomeStackScreen}
/>
<Tab.Screen
name="Profile"
component={ProfileStackScreen}
/>
<Tab.Screen
name="About"
component={AboutStackScreen}
/>
</Tab.Navigator>
);
export default MainTabScreen;
Use navigation.navigate('routeName') when you tap on your bottom tab navigator element. You have to register a route to the first screen of the stack, and from there you can go inside the stack as you like.
set unmountOnBlur options to true.
If you don't mind this.
Normally, we don't recommend enabling this prop as users don't expect their navigation history to be lost when switching tabs. If you enable this prop, please consider if this will actually provide a better experience for the user.
Another way is to pop the stack navigator when leaving screen3.
I am trying to create a BottomTab navigator and when I refresh the file tabs.js, the icon is not showing at expo mobile app.
I think the main issue is at tabBarIcon
File tab.js
import React from "react"
import {
View,
Image,
TouchableOpacity
} from "react-native"
import {createBottomTabNavigator, BottomTabBar} from "#react-navigation/bottom-tabs"
import Home from "../screens/Home"
import { COLORS, icons } from "../constants"
import {Ionicons} from "#expo/vector-icons"
const Tab = createBottomTabNavigator();
const Tabs = () => {
return (
<Tab.Navigator
>
<Tab.Screen
name="Home"
component={Home}
s
options={{
tabBarIcon: ({focused})=> {
<Ionicons name="cart-outline" size={16} color= "#000000"
}
}}
/>
</Tab.Navigator>
)
}
export default Tabs;
Home.js File
Thanks for help
This will work
<Tab.Navigator>
<Tab.Screen
name="Home"
component={Dashboard}
options={{
tabBarIcon: ({}) => (
<Ionicons name="cart-outline" size={16} color="#000000" />
),
}}
/>
</Tab.Navigator>