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.
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 am creating an app in ReactNative and I have two Stack Navigators inside two separate Navigation Containers, one for login/registering a user and another one that leads to from a search page to a details page.
What I want know is that when the app launches, the login page should be the first thing a user sees. However, with my two stack navigators now, this is how the mobile app looks like:
Here is the code from my two Stack Navigators, any insight on how I can refactor my code so that the screens are not split but rather only one stack navigator appears when the app is booted up would be much appreciated!
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Button, View, Text } from "react-native";
import Post from "./src/components/Post";
import AppContext from "./src/components/AppContext";
import LoginScreen from "./src/screens/Login";
import RegisterScreen from "./src/screens/Register";
import SearchScreen from "./src/screens/Search";
import ShowDetailsScreen from "./src/screens/ShowDetails";
import { NavigationContainer } from "#react-navigation/native";
import { createNativeStackNavigator } from "#react-navigation/native-stack";
import React, { useState } from 'react';
export default function App() {
const [token, setToken] = useState("");
const userSettings = {
token: "",
setToken,
};
const Stack = createNativeStackNavigator();
return (
<AppContext.Provider value={userSettings}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Login" component={LoginScreen}/>
<Stack.Screen name="Register" component={RegisterScreen}/>
</Stack.Navigator>
</NavigationContainer>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Search"
component={SearchScreen}
options={{ headerShown: false }}
/>
<Stack.Screen name="Show Details" component={ShowDetailsScreen} />
</Stack.Navigator>
<StatusBar style="dark" />
</NavigationContainer>
</AppContext.Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
I would like to suggest a different approach. Instead of creating two separate NavigationContainer and two different StackNavigator we could create a state that handles what you want.
In fact we could exploit the fact that an unsigned user does not have a token yet which is already present as a state in your application.
Consider the following.
export default function App() {
const [token, setToken] = useState();
const userSettings = {
token: "",
setToken,
};
const Stack = createNativeStackNavigator();
return (
<AppContext.Provider value={userSettings}>
<NavigationContainer>
<Stack.Navigator>
{token ?
<Stack.Screen name="Login" component={LoginScreen}/>
<Stack.Screen name="Register" component={RegisterScreen}/>
: <Stack.Screen
name="Search"
component={SearchScreen}
options={{ headerShown: false }}
/>
<Stack.Screen name="Show Details" component={ShowDetailsScreen} />}
</Stack.Navigator>
<StatusBar style="dark" />
</NavigationContainer>
</AppContext.Provider>
);
}
I can not see right now how you are setting the token but I guess that the state will change after a user logins. Otherwise you could create a separate isSignedIn state whose setter function will be passed as a prop to the Login screen.
This is actually recommended by react-native-navigation.
The problem with your code is that you are showing two stacks at the same time. What you need to do is that you should have some kind of way to know if a user is registered or not and depending on that to show Register screen or Search screen. Here is a good example how to do that (but you don't have to implement exactly like that. It is just for your understanding)
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 :)
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.
I am trying to nest a stack navigation inside a drawer navigation on snack expo. I asked this question before and was told to do it all over again. I did and I still get different errors. I would really appreciated if someone could explain what am I doing wrong? I can also post the link to my project if this helps https://snack.expo.io/#andreeam/it-in-the-valley
Thank you
Errors below:
Device: (3:9741) (0,l.useLinkBuilder) is not a function. (In '(0,l.useLinkBuilder)()', '(0,l.useLinkBuilder)' is undefined)
And I also get
Device: (104:51757) r.render is not a function. (In 'r.render()', 'r.render' is undefined)
Cannot assign to read only property 'exports' of object '#<Object>'
Evaluating module://react-native-screens.js
Evaluating module://#react-navigation/drawer.js
Evaluating module://App.js.js
Loading module://App.js
Here is my app.js
import * as React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import SignIn from './components/SignIn';
import ForgotPassword from './components/ForgotPassword';
import Dashboard from './components/Dashboard';
import Advertisers from './components/Advertisers';
import Adverts from './components/Adverts';
import Stats from './components/Stats';
import Plans from './components/Plans';
import ManageAdverts from './components/manageadvert';
const Stack = createStackNavigator();
class MyStack extends React.Component {
render() {
return (
<Stack.Navigator
initialRouteName="SignIn"
screenOptions={{
headerTitleAlign: 'center',
headerStyle: { backgroundColor: '#2d3436'},
headerTintColor: '#fff',
headerTitleStyle: { fontWeight: 'bold'}
}}>
<Stack.Screen
name="Reset your password"
component={ForgotPassword}
options={
{title: 'Reset your password'},
{headerLeft: null}
}
/>
<Stack.Screen
name="SignIn"
component={SignIn}
options = {
{headerShown: false,
title: 'SignOut'}
}
/>
<Stack.Screen
name="Dashboard"
component={Dashboard}
/>
<Stack.Screen
name="Advertisers"
component={Advertisers}
options={
{title: 'Advertisers'}
}
/>
<Stack.Screen
name="Adverts"
component={Adverts}
options={
{title: 'Adverts'}
}
/>
<Stack.Screen
name="Stats"
component={Stats}
options={
{title: 'Stats'}
}
/>
<Stack.Screen
name="Plans"
component={Plans}
options={
{title: 'Plans'}
}
/>
<Stack.Screen
name="Manage Adverts"
component={ManageAdverts}
options={
{title: 'Manage Adverts'}
}
/>
</Stack.Navigator>
);
}}
export default class App extends React.Component {
render() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}
}
I got this error when I upgraded expo to version 37. I was able to resolve this issue by updating the relevant reactmodules to the latest version.