I'm experiencing trouble navigating between pages in my react native app. When I attempt to use the button, I get the following error message: TypeError: undefined is not an object (evaluating '_this.props.navigation') I have created my app using numerous js files, and id like to navigate between them using buttons. My App.js file renders to the WelcomeScreen from initializing.
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import RecipesList from "cakeapp/app/screens/RecipesList.js";
import { ImageBackground, StyleSheet, View, Text, Button, navigation } from "react-native";
function WelcomeScreen(props) {
return (
<NavigationContainer>
<ImageBackground
style={styles.background}
source={require('cakeapp/app/assets/MainPage.png')}
>
<Text style={styles.text}>MyCakeRecipes</Text>
<View style={styles.homeButton}>
<Button
title="Recipes"
onPress={() => this.props.navigation.navigate('RecipesList')}
/>
</View>
</ImageBackground>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
background: {
flex:1,
justifyContent: "flex-end",
},
text: {
fontSize: 30,
fontWeight: "bold",
color: "white",
textAlign: "center",
bottom: 500,
},
homeButton: {
width: '100%',
height: 40,
backgroundColor: '#5f7f8a'
}
})
export default WelcomeScreen;
import React from 'react';
import { Image, ScrollView, View, Text, } from 'react-native';
const imageDis = {
width: 150,
height: 150
//flex:1,
//justifyContent: "flex-end"
};
const Recipes = () => (
<ScrollView style={{backgroundColor: '#5f7f8a'}}>
<Text style={{ fontSize: 20 }}>Chocolate Cake</Text>
<Image source={require('cakeapp/app/assets/Choc.png')} style={imageDis} />
<Text style={{ fontSize: 20 }}>Chocolate cupcake</Text>
<Image source={require('cakeapp/app/assets/ChocCu.png')} style={imageDis} />
<Text style={{ fontSize: 20 }}>Lemon Cake</Text>
<Image source={require('cakeapp/app/assets/Lemon.png')} style={imageDis} />
<Text style={{ fontSize: 20 }}>Lemom meringue</Text>
<Image source={require('cakeapp/app/assets/LemonM.png')} style={imageDis} />
<Text style={{ fontSize: 20 }}>Chocolate Berry</Text>
<Image source={require('cakeapp/app/assets/ChcoBerry.png')} style={imageDis} />
</ScrollView>
);
export default Recipes
As far as I know, < NavigationContainer> is used in app.js file to define the screens you want to navigate to. And you have to pass navigation as a prop to the component.
Your app.js file should look something like this
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Welcome"
component={WelcomeScreen}
/>
<Stack.Screen
name="Recipes"
component={RecipesList} />
</Stack.Navigator>
</NavigationContainer>
);
};
And your welcomeScreen like this:
const WelcomeScreen = ({ navigation }) => {
return (
<Button
title="RecipesList"
onPress={() =>
navigation.navigate('RecipesList')
}
/>
);
};
Let me know if it doesnt work
Related
I am a newbie. I'm making a YouTube Clone using React-Native.In my project I'm trying to use custom google fonts via expo/google and I'm following their example. I installed "balsamiq-sans" font using npx expo install #expo-google-fonts/balsamiq-sans. Imported in App.js and it works ! BUT, when I try to use it in Header.js (component) it does not work. The fonts does not change.
Here's what I'v done-
App.js file
import { StyleSheet, Text, View } from 'react-native';
import Home from './src/screens/Home'
import AppLoading from 'expo-app-loading';
import { useFonts, BalsamiqSans_400Regular } from '#expo-google-fonts/balsamiq-sans';
export default function App() {
let [fontsLoaded] = useFonts({
BalsamiqSans_400Regular,
});
if (!fontsLoaded) {
return <AppLoading />;
} else {
return (
<View>
<Home />
<Text style={{fontFamily: "BalsamiqSans_400Regular"}}> This Works ! </Text>
</View>
);
}
}
Home.js
import { StyleSheet, Text, View } from 'react-native';
import Header from '../components/Header';
export default function Home() {
return (
<View >
<Header />
</View>
);
}
And finally, Header.js
import { StyleSheet, Text, View } from 'react-native';
import {Entypo} from "#expo/vector-icons"
import { Ionicons } from '#expo/vector-icons';
import Constant from 'expo-constants'
export default function Header() {
return (
<View style={{
paddingTop:Constant.statusBarHeight,
height: 80,
backgroundColor: "white",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
elevation: 5
}}>
<View style={{
flexDirection: "row",
margin: 5,
padding: 5,
alignItems: "center"
}}>
<Entypo style={{
marginLeft: 20
}} name='youtube' size={24} color="red" />
<Text style={{
fontSize: 19,
marginLeft: 10,
fontWeight: "bold",
fontFamily: "BalsamiqSans_400Regular"
}}>Does not work</Text> // this does not work
</View>
<View style={{
flexDirection: "row"
}} >
<Ionicons name="ios-search-circle" size={27} color="black" />
<Ionicons style={{marginRight: 20, marginLeft: 20}} name="ios-sunny-sharp" size={25} color="black" />
</View>
</View>
)
}
Any ideas? what am I doing wrong. And sorry for bad English.
Edit: Fonts change in web but does not change in my Android emulator and in my Android Phone(using Expo Go)
move this to header component
import { useFonts, BalsamiqSans_400Regular } from '#expo-google-fonts/balsamiq-sans';
export default function Header() {
let [fontsLoaded] = useFonts({
BalsamiqSans_400Regular,
});
if (!fontsLoaded) {
return <AppLoading />;
} else {
then read this docs to know what formats work on which platforms:
I'm trying to navigate to my page "CameraPage.js" but I'm getting this error "undefined is not an object (evaluating 'navigation.navigate')". Can anybody see the problem? This ismy first question here so please tell me if I can be more specific.
Here's my App.js:
import { StyleSheet, Text, View, TouchableOpacity, Pressable } from 'react-native';
import React, {useEffect, useState} from "react";
import { FontAwesome } from '#expo/vector-icons';
import { useNavigation } from '#react-navigation/native';
export default function App({ navigation }) {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress ={() => navigation.navigate('CameraFunction')}>
<FontAwesome name="camera" size={100} color="#FFB6C1" />
</TouchableOpacity>
<Pressable>
<FontAwesome name="photo" size={100} color="#FFB6C1" />
</Pressable>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFDBE9'
},
buttonContainer: {
backgroundColor: 'transparent',
justifyContent: 'space-between',
},
});
Here is my CameraPage.js file:
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {Camera, CameraType} from 'expo-camera';
import {useEffect, useState} from "react";
export default function CameraPage() {
const [hasPermission, setHasPermission] = useState(null);
const [type, setType] = useState(CameraType.back);
useEffect(() => {
(async () => {
const {status} = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
if (hasPermission === null) {
return <View/>;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={styles.container}>
<Camera style={styles.camera} type={type}>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => {
setType(type === CameraType.back ? CameraType.front : CameraType.back);
}}>
<Text style={styles.text}> Flip </Text>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
camera: {
flex: 1,
},
buttonContainer: {
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
margin: 20,
},
button: {
flex: 0.1,
alignSelf: 'flex-end',
alignItems: 'center',
},
text: {
fontSize: 18,
color: 'white',
},
});
Here is my navigation file:
import React from 'react';
import {createStackNavigator} from '#react-navigation/stack';
import {NavigationContainer} from '#react-navigation/native';
import CameraPage from "../Camera/CameraPage";
const Routes = createStackNavigator();
export default function Navigator() {
return (
<NavigationContainer>
<Routes.Navigator>
<Routes.Screen
name="CameraFunction"
component={CameraPage}
/>
</Routes.Navigator>
</NavigationContainer>
);
}
Your navigation container must be wrapped around the root of your application or otherwise the navigation object will not be passed to the components that you have defined as screens.
The following fixes your issue.
export default const App = () => {
return (
<NavigationContainer>
<Routes.Navigator>
<Routes.Screen name="Home" component={HomeScreen} />
<Routes.Screen
name="CameraFunction"
component={CameraPage}
/>
</Routes.Navigator>
</NavigationContainer>
);
}
Your HomeScreen contains the old code from App, but now you can access the navigation object since we have defined HomeScreen as a screen inside the navigator. It will be passed to that screen by the navigation framework. Notice as well that HomeScreen is the initial screen of your application.
export default function HomeScreen({ navigation }) {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress ={() => navigation.navigate('CameraFunction')}>
<FontAwesome name="camera" size={100} color="#FFB6C1" />
</TouchableOpacity>
<Pressable>
<FontAwesome name="photo" size={100} color="#FFB6C1" />
</Pressable>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFDBE9'
},
buttonContainer: {
backgroundColor: 'transparent',
justifyContent: 'space-between',
},
});
Notice, that you need to navigate back to the HomeScreen once you have navigated to the CameraPage. You can use the navigation object in the CameraPage as well and trigger navigation.goBack to achieve this effect.
You just use #react-navigation/native-stack in place of #react-navigation/stack in App.js file then it will working perfect ,
import * as React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import Home from './TopTabBar/Home';
import 'react-native-gesture-handler';
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
I will try to explain this as best I can, I'm still new and have a hard time understanding the terminology.
I am working on a react native project. I have created two files. One Header.js and one footer.js.
I have successfully pulled them in to my Home Screen. However the buttons, inside footer.js, no longer fires. I get; undefined is not an object (evaluating 'navigation.navigate') for the error.
How do I bring back the functionality?
Any help is very appreciated. Here is my project to help;
App.js
import React from 'react';
import TabNavigator from "./assets/component/TabNavigator";
import {StackNavigation} from "./assets/component/StackNavigation";
export default function App() {
return (
<StackNavigation/>
);
}
StackNavigation.js;
import React from 'react';
import { HomeScreen} from "../Screens/HomeScreen";
import LayoutProps from "../Screens/Layout Props";
import SampleViewProps from "../Screens/SampleViewProps";
import {NavigationContainer} from "#react-navigation/native";
import {createNativeStackNavigator} from "#react-navigation/native-stack";
// import ShareExample from "./assets/component/SBShare";
const Stack = createNativeStackNavigator();
export function StackNavigation() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen}/>
<Stack.Screen name="Layout Props" component={LayoutProps} />
<Stack.Screen name="View Props" component={SampleViewProps} />
</Stack.Navigator>
</NavigationContainer>
);
}
HomeScreen.js;
import React from 'react';
import {Button, View, SafeAreaView, StyleSheet} from 'react-native';
import HeaderSB from "../component/SBHeader";
import FooterSB from "../component/SBFooter";
// import ShareExample from "./assets/component/SBShare";
export function HomeScreen({navigation}) {
const receiveValue = (value) => {
console.log("value received from B", value)
}
return (
<>
<SafeAreaView style={styles.container}>
<View style={styles.headerContainer}>
<HeaderSB receiveValue={receiveValue}>
</HeaderSB>
</View>
<View style={styles.mainContent}>
<View style={styles.buttonBox}>
<Button onPress={() => navigation.navigate('Layout Props')} title="Layout Props"/>
<Button onPress={() => navigation.navigate('View Props')} title="View Style Props"/>
</View>
</View>
<View styles={styles.footerContainer}>
<FooterSB receiveValue={receiveValue}>
</FooterSB>
</View>
</SafeAreaView>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between",
},
headerContainer: {
},
mainContent: {
},
buttonBox: {}
,
footerContainer: {
},
});
Footer.js;
import * as React from "react";
import {StyleSheet, TouchableOpacity, View} from "react-native";
import {AntDesign, Feather} from "#expo/vector-icons";
import {StackNavigation} from "./StackNavigation";
const FooterSB = ({navigation}) => {
return (
<>
{/* Bottom App Navigation */}
<View style={footerStyle.navCon}>
<View style={footerStyle.navBar}>
{/* Home Button */}
<TouchableOpacity style={footerStyle.home} onPress={() =>
navigation.navigate('Home')}
>
{/* Icon */}
<AntDesign name="home" size={50} color="white"/>
</TouchableOpacity>
{/* Navigation Divider */}
<View style={footerStyle.navDivider}/>
{/* Setting Button */}
<TouchableOpacity style={footerStyle.settings} onPress={() =>
navigation.navigate('Layout Props')}
>
{/* Icon */}
<Feather name="settings" size={50} color="white"/>
</TouchableOpacity>
</View>
</View>
</>
);
}
const footerStyle = StyleSheet.create({
navCon: {
flex: 1,
marginTop: 20,
alignItems: "center",
justifyContent: "flex-end"
},
navBar: {
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
backgroundColor: "#808080",
width: 500,
height: 50,
},
home: {
// paddingHorizontal: 55,
},
navDivider: {
backgroundColor: "#FFF",
width: 4,
height: 50,
},
settings: {
// marginRight: 107,
// paddingHorizontal: 55,
},
});
export default FooterSB;
If you want navigation as default prop you should add it as <Stack.Screen> but as FooterSB is custom and individual component it doesn't get wrapped with navigation prop automatically.
You need to pass navigation as prop to that so change below
<FooterSB receiveValue={receiveValue}>
</FooterSB>
to
<FooterSB receiveValue={receiveValue} navigation={navigation}>
</FooterSB>
Same way you can pass navigation to header too.
I'm having a problem getting my React Navigation to actually transition screens. I've used it successfully before and I cannot figure out what my problem is this time. I click my button and no transition happens. I think it might be a problem with the inline onPress not running....does it have to be in Main Button? Or does the inline code on App.js override anything in MainButton.js.
Also...NarScreen is the screen I'm trying to get to.
FILE 1: App.js
import 'react-native-gesture-handler';
import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { color } from 'react-native-reanimated';
import MainButton from './components/MainButton';
import NarScreen from './screens/NarScreen.js'
function HomeScreen({ navigation }) {
return(
<View style={styles.background}>
<View style={styles.logo}>
<Image source={require('./components/HNS1.png')} style={styles.image} resizeMode='contain' />
</View>
<View style={styles.buttons}>
<MainButton onPress={() => navigation.navigate('Nar')}>NAR Test</MainButton>
<MainButton>Tripoli Test</MainButton>
</View>
</View>
);
}
function Nar({ navigation }) {
return(
<NarScreen />
)
}
const Stack = createStackNavigator();
function App() {
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Nar" component={Nar} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
background: {
backgroundColor: '#00629B',
flex: 1,
},
buttons: {
marginTop: "20%",
marginLeft: 10,
},
image: {
width: '80%',
height: 300,
borderRadius: 20,
},
logo: {
borderRadius: 200,
marginTop: '30%',
alignItems: 'center'
},
});
export default App;
File 2: NarScreen.js
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const NarScreen = props => {
return(
<View>
<Text>BigScreen!</Text>
</View>
)
}
export default NarScreen;
FILE 3: MainButton.js
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, } from 'react-native';
const MainButton = props => {
return <TouchableOpacity>
<View style={styles.button}>
<Text style={styles.buttonText}>{props.children}</Text>
</View>
</TouchableOpacity>
}
const styles = StyleSheet.create({
button: {
backgroundColor: "#FCD757",
paddingVertical: 30,
paddingHorizontal: 30,
height: 100,
width: 300,
marginTop: "10%",
borderRadius: 10,
marginLeft: '12%',
justifyContent: 'space-between',
},
buttonText: {
color: 'black',
fontSize: 26,
textAlign: 'center',
}
})
export default MainButton;
Inside your MainButton.js file, you are not handling onPress event. Add it to touchable opacity.
const MainButton = props => {
return <TouchableOpacity onPress={props.onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>{props.children}</Text>
</View>
</TouchableOpacity>
}
Today i spend 6 hours trying to figure this out, this is kind of my last resort.
I want to switch screens with react navigate. It works when all the screens are in the same file. but when i seperate them into multiple files (1 file for every screen) it gives me the error 'undefined is not an object (evaluating '_this.props.navigation.navigate')
i have tried a lot of things. hope you can help. here is the code.
App.js--------------------------------------------------
import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator()
// PAGES
import LandingScreen from './src/landing';
import House from './src/house';
//CODE
function HomeScreen({navigation}) {
return(
<LandingScreen navigation={this.props.navigation}/>
);
}
function HouseScreen({navigation}) {
return(
<House navigation={this.props.navigation}/>
);
}
class App extends React.Component {
render(){
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen}/>
<Stack.Screen name="House" component={HouseScreen}/>
</Stack.Navigator>
</NavigationContainer>
)
}
}
const styles = {
}
export default App;
landing.js---------------------------------------------
import React from 'react';
import {View, Text, ImageBackground, TouchableOpacity, Image} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
//IMAGES
var myBackground = require('../assets/icons/lightblueBackground.png')
var buttonbannerlower = require('../assets/icons/buttonbannerlower.png')
var talkbuttonblue = require('../assets/icons/talkbuttonblue.png')
var gearIcon = require('../assets/icons/Gearicon.png')
var playIcon = require('../assets/icons/playicon.png')
var pointerIcon = require('../assets/icons/pointerIcon.png')
var houseIcon = require('../assets/icons/houseIcon.png')
//CODE
class Landing extends React.Component{
render(){
return (
<View style={styles.container}>
<View style={{flex: 0.2, flexDirection: 'row',}}>
<ImageBackground source={buttonbannerlower} style={styles.imageBackground}>
<TouchableOpacity>
<Image source={gearIcon} style={styles.iconsLeft}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={playIcon} style={styles.iconsLeft}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={talkbuttonblue} style={styles.blueButton}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={pointerIcon} style={styles.iconPointer}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => props.navigation.navigate('House')}>
<Image source={houseIcon} style={styles.iconsRight}/>
</TouchableOpacity>
</ImageBackground>
</View>
<View style={{backgroundColor: 'green', flex: 0.2, alignItems: 'center',}}>
<Text>Hello</Text>
</View>
</View>
)
}
}
const styles = {
container: {
flex: 1,
flexDirection: 'column-reverse',
backgroundColor: '#ACE1EB'
},
imageBackground: {
width: '100%',
height: '100%',
flex: 1,
alignItems: 'flex-end',
flexDirection: 'row',
justifyContent: 'center',
alignContent: 'center',
},
blueButton: {
height: 110,
width: 110,
},
iconsLeft: {
marginRight: 20,
marginBottom: 10,
height: 40,
width: 40
},
iconsRight: {
marginLeft: 20,
marginBottom: 10,
height: 40,
width: 40
},
iconPointer: {
marginLeft: 20,
marginBottom: 10,
height: 40,
width: 40
},
}
export default Landing;
You should add screen components like this:
import LandingScreen from './src/landing';
import House from './src/house';
class App extends React.Component {
render(){
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={LandingScreen}/>
<Stack.Screen name="House" component={House}/>
</Stack.Navigator>
</NavigationContainer>
)
}
}
also to use props in a class component use this keyword:
<TouchableOpacity onPress={() => this.props.navigation.navigate('House')}>
One more thing, to access props in a class component you call constructor like this :
class Landing extends React.Component{
constructor(props) {
super(props);
}
render(){
return (
<View style={styles.container}>
<View style={{flex: 0.2, flexDirection: 'row',}}>
<ImageBackground source={buttonbannerlower} style={styles.imageBackground}>
<TouchableOpacity>
<Image source={gearIcon} style={styles.iconsLeft}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={playIcon} style={styles.iconsLeft}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={talkbuttonblue} style={styles.blueButton}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={pointerIcon} style={styles.iconPointer}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.props.navigation.navigate('House')}>
<Image source={houseIcon} style={styles.iconsRight}/>
</TouchableOpacity>
</ImageBackground>
</View>
<View style={{backgroundColor: 'green', flex: 0.2, alignItems: 'center',}}>
<Text>Hello</Text>
</View>
</View>
)
}
}
You don't need to create functions for the screen components. Just do it like this:
import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator()
// PAGES
import LandingScreen from './src/landing';
import House from './src/house';
//CODE
class App extends React.Component {
render(){
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={LandingScreen}/>
<Stack.Screen name="House" component={House}/>
</Stack.Navigator>
</NavigationContainer>
)
}
}
const styles = {
}
export default App;
Then in your screen components, use the navigation function like this to navigate to other screens.
onPress={() => this.props.navigation.navigate("House")}