I copied code from React Navigation's documentation into my project after something I wrote didn't seem to work. But I still got the same error: undefined is not an object (evaluating 'route.key')
This is the code:
import React from 'react'
import { NavigationContainer } from '#react-navigation/native'
import { createNativeStackNavigator } from '#react-navigation/native-stack'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import { Text } from 'react-native'
const Stack = createNativeStackNavigator()
const Tab = createBottomTabNavigator()
function Home() {
return (
<Tab.Navigator>
<Tab.Screen name="Feed" component={() => { return <Text>Feed</Text>}} />
</Tab.Navigator>
)
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
It's almost the same as the same code as the one in the documentation but doesn't seem to work. Any idea why?
Make sure you have the correct versions in your package.json file. I encountered this error when using #react-navigation/native-stack v6 and everything else v5. Sticking consistently to the v5 docs solved the issue for me :)
Related
I was implementing the bottom-tab navigation feature and I am getting this error
Could not find root view for a given ancestor with tag number
Attaching error message with piece of code which causing this error.
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import {
Home,
Profile,
Explore,
} from '../Screens';
import navigationStrings from '../constants/navigationStrings';
const Stack = createStackNavigator();
function Routes() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName={navigationStrings.HOME} screenOptions={{ headerShown: false }}>
<Stack.Screen options={{ title: 'Book Your Book' }} name={navigationStrings.HOME} component={Home} />
<Stack.Screen name={navigationStrings.PROFILE} component={Profile} />
<Stack.Screen name={navigationStrings.EXPLORE} component={Explore} />
</Stack.Navigator>
</NavigationContainer >
)
}
export default Routes;
I'm trying to change screens and I can't, it doesn't report any errors, the button just doesn't work, I click and it doesn't change screens.
SignIn.tsx
import { useNavigation } from "#react-navigation/native";
export function SignIn(){
const navigation = useNavigation();
function handleSignIn() {
navigation.navigate('Home')
}
return(
<View style={styles.container}>
<ButtonIcon
title="Next"
activeOpacity={0.7}
onPress={handleSignIn}
/>
</View>
)
}
Routes.tsx
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { Home } from '../screens/Home';
import { SignIn } from '../screens/SignIn';
const { Navigator, Screen } = createStackNavigator();
export function AuthRoutes() {
return(
<Navigator screenOptions={{headerShown: false}}>
<Screen name="SignIn" component={SignIn}/>
<Screen name="Home" component={Home}/>
</Navigator>
)
}
As I said, there is no error in the code, at least according to the IDE there is no error, I can run the application, but when I click the button it has no effect, nothing happens. I've already modified a lot, added and removed, but I couldn't make it work, I don't know what I'm doing wrong.
I am extremely new to React and React Native. I need some help regarding nesting a drawer navigator inside the current Stack Navigation.
I have the code on Snack, If someone can please help me i will really appreciate.
https://snack.expo.dev/#smith.james1982/github.com-callstack-react-native-paper-login-template
I want to put the Drawer navigation with Hamburger and Back Arrow using react-native-paper on the Home Screen.
Thanks very much in advance..
This is how i achieved the solution basically 2 navigations and using a state sharing library use-between. Hopefully it can be helpful to someone
import React, { memo, useState } from "react";
import { createStackNavigator } from "#react-navigation/stack";
import { createDrawerNavigator } from "#react-navigation/drawer";
import { NavigationContainer } from "#react-navigation/native";
import { HomeScreen, LoginScreen, RegisterScreen, ForgotPasswordScreen, Dashboard, Demo } from "./screens";
import { useLoginState } from "./core/state";
import { useBetween } from "use-between";
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
//Login navigation
const LoginNav = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName="HomeScreen"
>
<Stack.Screen name="HomeScreen" component={HomeScreen} />
<Stack.Screen name="LoginScreen" component={LoginScreen} />
<Stack.Screen name="RegisterScreen" component={RegisterScreen} />
<Stack.Screen name="ForgotPasswordScreen" component={ForgotPasswordScreen} />
<Stack.Screen name="Dashboard" component={Dashboard} />
</Stack.Navigator>
</NavigationContainer>
);
};
//Logged in Navigation
const LoggedInNav = () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={Demo} />
</Drawer.Navigator>
</NavigationContainer>
);
};
export default function App() {
const { loggedIn, setIsLoggedIn } = useBetween(useLoginState);
return loggedIn ? <LoggedInNav /> : <LoginNav />;
}
enter image description here
I'm getting the problem since yesterday, I didn't find any solution for it, please help me,
Although I don't have a typo in the codeز
App.js
import React from "react";
import LogIn from "./components/LogIn";
import Sales from "./components/Sales";
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
options={{
headerTintColor: "#0b4079",
headerShown: false,
cardStyle: {
backgroundColor: "#fff"
}
}}
name="تسجيل الدخول"
component={LogIn}
/>
<Stack.Screen
options={{
headerShown: false
}}
name="المبيعات"
component={Sales}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
Based on the image you attached, it seems the issue is in StackView.tsx, not App.js which is directly related to react-navigation in their source here.
Can you provide more code snippets where the error is being thrown―further down the stack trace? The App.js isn't the problem here, because running that on its own seems to work fine on my end.
I am using react native and react navigation. I am trying to create a nested navigator, i.e., I am trying to place a tab navigator within a stack navigator. When I run the app on iOS simulator, however, the main screen reloads infinitely. What might be wrong with the below code? New to react native...bear with me if this is a simple one!
Below is the part of the code where I am doing the nesting:
import React from 'react';
import Home from './routes/Home'
import Alert from './routes/Alert'
import Profile from './routes/Profile'
import Subs from './routes/Subs'
import Write from './routes/Write'
import OtherProfile from './routes/OtherProfile'
import Post from './routes/Post'
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { SafeAreaView } from 'react-native-safe-area-context';
export default function App() {
const MainStack = createStackNavigator();
const Tab = createBottomTabNavigator();
function HomeTab() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home}/>
<Tab.Screen name="Subs" component={Subs}/>
<Tab.Screen name="Write" component={Write} options={{ tabBarVisible: false }}/>
<Tab.Screen name="Alert" component={Alert}/>
<Tab.Screen name="Profile" component={Profile}/>
</Tab.Navigator>
)
}
function MainStackScreen() {
return (
<MainStack.Navigator>
<MainStack.Screen name="HomeTab" component={HomeTab} options = {{ headerShown: false }} />
<MainStack.Screen name="Post" component={Post} />
<MainStack.Screen name="OtherProfile" component={OtherProfile} />
</MainStack.Navigator>
)
}
return (
<NavigationContainer>
<SafeAreaView style={{flex:1}}>
<MainStackScreen/>
</SafeAreaView>
</NavigationContainer>
)
}
Found the answer right after posting this.
I declared the navigators and the navigation components outside of the App component and it works.