I am trying to use the navigation in react-native but it gives me this error TypeError: undefined is not an object (evaluating 'navigation. navigate') I tried so hard but I can't resolve it.
this is my componnet code:
function profile(props,{navigation}) {
const {currentUser,posts} = props;
//console.log({currentUser,posts})
return (
<View style={{flex:1,marginTop:40,}}>
<View style={{flexDirection:'row', alignItems:'center', justifyContent:'center'}}>
<View>
<Image source={require('./Un2titled.png')} style={{height:150 , width:150 ,marginLeft:20}}/>
</View>
<View style={{margin:20}}>
<Text style={{marginLeft:70, fontSize:20}}>{currentUser.name}</Text>
<Text style={{marginLeft:15, fontSize:20,marginTop:10}}>{currentUser.email}</Text>
<TouchableOpacity onPress={() => navigation.navigate('Profilephoto')} style={{ marginLeft:40,marginTop:10, fontSize:20,width:100,elevation: 8,backgroundColor: "#0088cc",borderRadius: 10,paddingVertical: 10,paddingHorizontal: 12}}>
<Text style={{color:"white"}}>تعویض عکس</Text>
</TouchableOpacity>
<TouchableOpacity style={{ marginLeft:30,marginTop:10, fontSize:10,width:120,elevation: 8,backgroundColor: "#cc0000",borderRadius: 10,paddingVertical: 10,paddingHorizontal: 12}}>
<Text style={{color:"white"}}>خروج از حساب</Text>
</TouchableOpacity>
</View>
</View>
and this is my app.js code:
import React , {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import Landingscreen from './components/auth/Landing'
import registerscreen from './components/auth/Register'
import loginscreen from './components/auth/Login'
import Mainscreen from './components/main'
import Homescreen from './components/main/Home'
import Savescreen from './components/main/Save'
import ProfilePhotoscreen from './components/main/Profilephoto'
...
return(
<Provider store={store}>
<NavigationContainer>
<Stack.Navigator initialRouteName="main">
<Stack.Screen name="mainscreen" component={Mainscreen} options={{headerShown: false}}/>
<Stack.Screen name="save" component={Savescreen} navigation={this.props.navigation} />
<Stack.Screen name="Home" component={Homescreen} navigation={this.props.navigation} />
<Stack.Screen name="ProfilePhoto" component={ProfilePhotoscreen} navigation={this.props.navigation} />
</Stack.Navigator>
</NavigationContainer>
</Provider>
I think it comes from the way you get the navigation variable.
I would do this:
function profile(props) {
const {currentUser, posts, navigation} = props;
...
}
Related
I'm new to React Native and trying to learn. but I couldn't do what I wanted to do.
I have Tab Navigations and I want to Open Stack when I click the button. But I can't figure out how to do it, thanks in advance for your help.
Snack
import * as React from 'react';
import { View,Text,TouchableOpacity,Button } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();
function Home() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Page</Text>
<Button
title="Go to Settings"
onPress={() => navigation.navigate('FeedScreen')}
/>
</View>
);
}
function FeedScreen() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Details} />
</Stack.Navigator>
);
}
function Details() {
return <View><Text>Details</Text></View>;
}
function Profile() {
return <View>
<Text>Profile</Text>
</View>;
}
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
</NavigationContainer>
);
}
Your tabs can take a StackNavigator as the component and by default it will go to the first screen in that stack when you press the tab.
edit to your code
import * as React from 'react';
import { View,Text,TouchableOpacity,Button } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();
function Home() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Page</Text>
<Button
title="Go to Settings"
onPress={() => navigation.navigate('FeedScreen')}
/>
</View>
);
}
function Details() {
return <View><Text>Details</Text></View>;
}
function Profile() {
return <View>
<Text>Profile</Text>
</View>;
}
function FeedScreen() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Details" component={Details} />
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Feed" component={FeedScreen} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
</NavigationContainer>
);
}
The navigation.navigate(...) part becomes a little more complicated but not too bad. See the example here. This one is basically opposite of your setup where the tabs are nested within a stack navigator.
I want to move on to the 'Detail' window when I touch the image of headerRight in the 'Main' window. But the "Couldn't find a navigation object. Is your component inside NavigationContainer?" error keeps popping up.
I think
<TouchableOpacity onPress={() => navigation.navigate('DETAIL')}>
<View>
<Image source={search} style={{height: 30, width: 30,marginRight:20}}/>
</View>
</TouchableOpacity>
this code is a problem, how should I fix it?
Also,
Can't find variable: navigation
error appears when I erase the const navigation = useNavigation(); code.
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { StyleSheet, Text, View,Image,ScrollView,TextInput, TouchableOpacity } from 'react-native';
import MainScreen from './MainScreen';
import DetailScreen from './DetailScreen';
import { useNavigation, StackActions } from '#react-navigation/native';
const Stack = createStackNavigator();
let search=require('./search.png')
function BackBtn() {
return (
<Image
source={require('./leftarrow.png')}
style={{marginLeft: 20, width: 15, height: 15}}
/>
);
}
export default function App() {
const navigation = useNavigation();
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='MAIN'>
<Stack.Screen name='MAIN' component={MainScreen}
options={{
title:'',
headerLeft:()=>
<View>
<Text style={{fontSize:25,marginLeft:30,marginTop:-5}}>성북구</Text>
</View>
,
headerRight:()=>
<TouchableOpacity onPress={() => navigation.navigate('DETAIL')}>
<View>
<Image source={search} style={{height: 30, width: 30,marginRight:20}}/>
</View>
</TouchableOpacity>
,
}}/>
<Stack.Screen name="DETAIL" component={DetailScreen}
options={{
title: '상세화면',
headerBackTitleVisible: false,
headerBackImage: BackBtn,
headerTitle:()=>(
<View>
<TextInput placeholder={'어떤 것을 찾고 계신가요?'} style={styles.input} autoFocus></TextInput>
</View>
)
}}/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
input:{
backgroundColor:'white',
marginTop:0,
marginLeft:0,
width:300,
fontSize:15,
paddingVertical:10,
paddingHorizontal:15
},
});
try this :
<Stack.Navigator
screenOptions={({ navigation }) => ({
headerRight: ()=>
<TouchableOpacity onPress={() => navigation.navigate('DETAIL')}>
<View>
<Image source={search} style={{height: 30, width: 30,marginRight:20}}/>
</View>
</TouchableOpacity>
})}
>
########### your routes here !
</Stack.Navigator>
i use react navigation V6.0.10
let me know if you need more informations or explication !
I have a login screen then from there I navigate to home screen, and on home screen there are 4 buttons Alphabets, Ch-1,Ch-2 and Ch-3, by pressing each of those buttons, I can easily navigate to correct screens but Inside Alphabet screen, I have 2 more buttons Learn and Give test But when I press those, nothing happens , i can't navigate to the respective screens plus there are no errors. I guess its nested navigation.
I might sound stupid to an expert out there :) but I am new (from scratch) to react native and navigation stuff i really have no idea what to do! Will be really thankful if someone helps!
CODE IS GIVEN BELOW:
This is my home.js (its in folder screens):
import React from "react";
import {View, StyleSheet, Text} from 'react-native';
import { TouchableOpacity } from "react-native-gesture-handler";
import { Auth } from "../services";
export default home =({navigation}) => {
return (
<View style={styles.body}>
<Text style={styles.toptext}>
Merheba!
</Text>
<TouchableOpacity onPress={() => navigation.navigate('alphabets')}
style={styles.button}
>
<Text style={styles.buttontext}>Alphabets</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('ch1')}
style={styles.button}
>
<Text style={styles.buttontext}>Chapter 1</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('ch2')}
style={styles.button}
>
<Text style={styles.buttontext}>Chapter 2</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('ch3')}
style={styles.button}
>
<Text style={styles.buttontext}>Chapter 3</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => Auth.signOut()}
style={styles.button}
>
<Text style={styles.buttontext}>Sign Out</Text>
</TouchableOpacity>
</View>
)
}
This is index.js from screens folder:
export {default as home} from './home';
export {default as login} from './login';
export {default as forgotp} from './login';
export {default as signup} from './signup';
export {default as alphabets} from './alphabets';
export {default as alphl} from './alphl';
export {default as alpht} from './alpht';
export {default as ch1} from './ch1';
export {default as ch2} from './ch2';
export {default as ch3} from './ch3';
This is alphabets.js from screens folder:
import { NavigationContainer } from "#react-navigation/native";
import React from "react";
import {View, StyleSheet, Text} from 'react-native';
import { TouchableOpacity } from "react-native-gesture-handler";
export default alphabets =({navigation}) => {
return (
<View style={styles.body}>
<Text style={styles.toptext}>
Merheba!
</Text>
<TouchableOpacity onPress={() => navigation.navigate('alphl')}
style={styles.button}
>
<Text style={styles.buttontext}>Learning Sheet</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('alpht')}
style={styles.button}
>
<Text style={styles.buttontext}>Give Test</Text>
</TouchableOpacity>
</View>
)
}
AppNavigation.js from navigation folder:
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import home from '../screens/home';
import alphabets from '../screens/alphabets';
import ch1 from '../screens/ch1';
import ch2 from '../screens/ch2';
import ch3 from '../screens/ch3';
const stack=createStackNavigator();
export default AppNavigator = () => {
return(
<stack.Navigator
screenOptions={{
headerShown: null
}}
>
<stack.Screen name="home" component={home} />
<stack.Screen name="alphabets" component={alphabets} />
<stack.Screen name="ch1" component={ch1}/>
<stack.Screen name="ch2" component={ch2} />
<stack.Screen name="ch3" component={ch3} />
</stack.Navigator>
)
}
AlphNavigator.js from navigation folder:
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import alphl from '../screens/alphl';
import alpht from '../screens/alpht';
const stack=createStackNavigator();
export default AlphNavigator = () => {
return(
<stack.Navigator
screenOptions={{
headerShown: null
}}
>
<stack.Screen name="alphl" component={alphl} />
<stack.Screen name="alpht" component={alpht} />
</stack.Navigator>
)
}
& lastly index.js from navigation folder:
import React, {useState, useEffect} from 'react';
import { NavigationContainer } from '#react-navigation/native';
import AppNavigator from './AppNavigator';
import AuthNavigator from './AuthNavigator';
import auth from '#react-native-firebase/auth';
export default AppContainer = () => {
// Set an initializing state whilst Firebase connects
const [initializing, setInitializing] = useState(true);
const [user, setUser] = useState();
// Handle user state changes
function onAuthStateChanged(user) {
setUser(user);
if (initializing) setInitializing(false);
}
useEffect(() => {
const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
return subscriber; // unsubscribe on unmount
}, []);
if (initializing) return null;
return(
<NavigationContainer>
{user ? <AppNavigator/> : <AuthNavigator/>}
</NavigationContainer>
)
}
You aren't defining your "AlphNavigator" in your "AppNavigator".
You should do this inside your AppNavigator:
export default AppNavigator = () => {
return(
<stack.Navigator
screenOptions={{
headerShown: null
}}
>
<stack.Screen name="home" component={home} />
<stack.Screen name="alphabets" component={alphabets} />
<stack.Screen name="alph" component={ AlphNavigator } /> /*here add your AlpNavigator*/
<stack.Screen name="ch1" component={ch1}/>
<stack.Screen name="ch2" component={ch2} />
<stack.Screen name="ch3" component={ch3} />
</stack.Navigator>
)}
It's normal that you do not have any error in this case, because React Navigation does not mark you as an error if a screen does not exist.
The above could be solved if you were using TypeScript.
So now, in order to access to nested navigation screens you should use:
navigation.navigate('alph', { screen: 'alphl' })
The first parameter is the name of the stack navigation, and the second one is an object with the name of the screen inside to this nested navigation.
I was following the React navigation to create the pages, however, I only get the blank page when I build the application.
https://reactnavigation.org/docs/hello-react-navigation
React navigation version
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"#react-navigation/stack": "^6.0.11",
Here is my full code on App.js
On this page, I created 3 function: HomeSc, HomeScCheck, DetailSc.
Only the HomeScCheck can show on the screen.
import * as React from 'react';
import { View, Text , SafeAreaView} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
function HomeScCheck() {
return (
<View><Text style={{color:"red"}}>Home Screen Check</Text></View>
);
}
function HomeSc() {
return (
<View><Text>Home Screen</Text></View>
);
}
function DetailSc() {
return (
<View style={{ flex: 1}}>
<Text style={{color: '#333', fontSize:30}}>Detail Screen</Text>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<SafeAreaView>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeSc} />
<Stack.Screen name="Detail" component={DetailSc} options={{ title: 'Overview' }} />
</Stack.Navigator>
</NavigationContainer>
<HomeScCheck/>
</SafeAreaView>
);
}
export default App;
As you were saying that you want to see the HomeScCheck screen as the first screen, you should see when the app is run.
So, to do that your code should look as the following code.
import { View, Text, SafeAreaView } from 'react-native';
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
function HomeScCheck() {
return (
<View>
<Text style={{ color: 'red' }}>Home Screen Check</Text>
</View>
);
}
function HomeSc() {
return (
<View>
<Text>Home Screen</Text>
</View>
);
}
function DetailSc() {
return (
<View style={{ flex: 1 }}>
<Text style={{ color: '#333', fontSize: 30 }}>Detail Screen</Text>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home Check" component={HomeScCheck} />
<Stack.Screen name="Home" component={HomeSc} />
<Stack.Screen
name="Detail"
component={DetailSc}
options={{ title: 'Overview' }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
So, What I have done is that I have removed the <safeareaview> and <HomeScCheck> and I have created another <Stack.Screen> above the home <Stack.Screen>. Though this tells that the first <Stack.Screen> will be the first screen of the stack navigator.
Kindly remove safeAreaView and statusbar from the App.js file
only put Navigation inside the return
In this block of code, I want to use navigation.navigate to switch between the home screen and the profile screen. But when I run the app, I get the following error: can't find variable navigation.
I've been looking for a solution, but I can't seem to find it.
Here's the code:
import 'react-native-gesture-handler';
import * as React from 'react';
import {View, Text, Button} from 'react-native';
import { NavigationContainer, StackActions } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
const HomeScreen = () => {
return(
<View>
<Text>Home Screen</Text>
<Button title="Go to Profile Screen" onPress={()=> navigation.navigate("Profile")}/>
</View>
);
}
const ProfileScreen = () => {
return(
<View>
<Text>Profile Screen</Text>
<Button title="Go to Home Screen" onPress={() => navigation.navigate("Home")}/>
</View>
);
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{ title: '' }}
/>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
Thank you in advance.
You can get navigation object from props. Code example:
const HomeScreen = ({navigation}) => {
return(
<View>
<Text>Home Screen</Text>
<Button title="Go to Profile Screen" onPress={()=> navigation.navigate("Profile")}/>
</View>
);
}