How do I connect my page2.js and page3.js to my CounterApp.js page, so far i only got my page2 and page3 connected with a button, and i can go back and fore between these 2 pages, but i need a button for my CounterApp.js page
CounterApp.js ///////////////////////////////////////////////////////////////////////////////////
import {Image} from 'react-native';
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
TouchableOpacity
} from "react-native";
import { connect } from 'react-redux'
class CounterApp extends Component {
render() {
return (
<View style={styles.container}>
<View style={{ flexDirection: 'row', width: 200, justifyContent: 'space-around' }}>
<TouchableOpacity onPress={() => this.props.increaseCounter()}>
<Text style={{ fontSize: 20 }}>Increase</Text>
</TouchableOpacity>
<Text style={{ fontSize: 20 }}>{this.props.counter}</Text>
<TouchableOpacity onPress={() => this.props.decreaseCounter()}>
<Text style={{ fontSize: 20 }}>Decrease</Text>
</TouchableOpacity>
</View>
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
style={{width: 200, height: 200}} />
<View style={{ flexDirection: 'row', width: 200, justifyContent: 'space-around' }}>
<TouchableOpacity onPress={() => this.props.increaseCounter2()}>
<Text style={{ fontSize: 20 }}>Increase</Text>
</TouchableOpacity>
<Text style={{ fontSize: 20 }}>{this.props.counter2}</Text>
<TouchableOpacity onPress={() => this.props.decreaseCounter2()}>
<Text style={{ fontSize: 20 }}>Decrease</Text>
</TouchableOpacity>
</View>
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
style={{width: 200, height: 200}} />
</View>
);
}
}
function mapStateToProps(state) {
return {
counter: state.counter,
counter2: state.counter2,
}
}
function mapDispatchToProps(dispatch) {
return {
increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
increaseCounter2: () => dispatch({ type: 'INCREASE_COUNTER2' }),
decreaseCounter2: () => dispatch({ type: 'DECREASE_COUNTER2' }),
}
}
export default connect(mapStateToProps, mapDispatchToProps )(CounterApp)
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
page2.js /////////////////////////////////////////////////////////////////////
import React, {Component} from 'react';
import {Button} from 'react-native';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const {navigate} = this.props.navigation;
return (
<>
<Button
title="Go to Jane's profile"
onPress={() => this.props.navigation.navigate('Profile', {name: 'Jane'})}
/>
</>
);
}
}
export default HomeScreen;
page3.js ///////////////////////////////////////////////////////////////////////////////////////
import React, {Component} from 'react';
import {Button} from 'react-native';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const {navigate} = this.props.navigation;
return (
<>
<Button
title="Go to Jane's home"
onPress={() => this.props.navigation.navigate('Home', {name: 'Jane'})}
/></>
);
}
}
export default HomeScreen;
mainnav.js ////////////////////////////////////////////////////////////////////////////////////////
import HomeScreen from './page2'
import ProfileScreen from './page3'
import CounterScreen from './CounterApp'
import {createStackNavigator} from 'react-navigation-stack';
const MainNavigator = createStackNavigator({
Home: {screen: HomeScreen},
Profile: {screen: ProfileScreen},
counter: {screen: CounterScreen}
},{initialRouteName:"Home"});
export default MainNavigator;
Related
My Custom Button that should take me home doesn't and give me an "undefined error." I'm pretty sure its because the Stack Navigator stuff is in the main file, but I don't know how to give this code file access to it and my Google efforts and the Docs have been unsuccessful. Any help on this simple issue would be appreciated.
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import CustomButton from './CustomButton';
import { useFonts } from 'expo-font';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import player from './Player';
import App from './App';
import usePotion from './UsePotion';
import { useState } from 'react';
import { useEffect } from 'react';
function BattleScreen({ navigation }) {
const [fontsLoaded, error] = useFonts({
'Valorax': require('./Fonts/Valorax.otf'),
});
if (!fontsLoaded) {
return <Text>Loading...</Text>;
}
return (
<View style={styles.container}>
<Text style={styles.text}>{player.potions}</Text>
<View style={styles.topHalf}>
</View>
<View style={styles.bottomHalf}>
<View style={styles.buttonRow}>
<CustomButton onPress={() => handleAttack()} title='Attack'></CustomButton>
<CustomButton onPress={() => handleMagic()} title='Magic'></CustomButton>
</View>
<View style={styles.buttonRow}>
<CustomButton onPress={usePotion()} title='Use Potion'></CustomButton>
<CustomButton onPress={() => handleRun()} title='Run'></CustomButton>
<CustomButton onPress={() => navigation.navigate('Home')} title="Home"></CustomButton>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000000',
},
topHalf: {
flex: 1,
color: 'white',
},
bottomHalf: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap'
},
buttonRow: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-evenly',
flexWrap: 'wrap'
},
text: {
fontSize: 90,
color: 'white',
fontFamily: "Valorax",
}
});
export default BattleScreen;
**strong text**
Try using the useNavigation hook (https://reactnavigation.org/docs/use-navigation/):
import { useNavigation } from '#react-navigation/native';
function BattleScreen() {
const [fontsLoaded, error] = useFonts({
'Valorax': require('./Fonts/Valorax.otf'),
});
const navigation = useNavigation()
if (!fontsLoaded) {
return <Text>Loading...</Text>;
}
return (
<View style={styles.container}>
<Text style={styles.text}>{player.potions}</Text>
<View style={styles.topHalf}>
</View>
<View style={styles.bottomHalf}>
<View style={styles.buttonRow}>
<CustomButton onPress={() => handleAttack()} title='Attack'></CustomButton>
<CustomButton onPress={() => handleMagic()} title='Magic'></CustomButton>
</View>
<View style={styles.buttonRow}>
<CustomButton onPress={usePotion()} title='Use Potion'></CustomButton>
<CustomButton onPress={() => handleRun()} title='Run'></CustomButton>
<CustomButton onPress={() => navigation.navigate('Home')} title="Home"></CustomButton>
</View>
</View>
</View>
);
}
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'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>
}
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator, createAppContainer } from '#react-navigation/stack';
import ShopMens from './ShopMens';
import ShopWomens from './ShopWomens';
const CategoryButton = () => {
return(
<View style={styles.buttonCont}>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('ShopMens')}>
<Text style={styles.title}>SHOP MEN'S</Text>
</TouchableOpacity>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('ShopWomens')} >
<Text style={styles.title}>SHOP WOMEN'S</Text>
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
buttonCont: {
flexDirection:'row',
justifyContent: 'space-around',
width: '60%',
marginLeft: 10,
marginBottom: 10
},
title: {
fontWeight:'bold'
}
});
const RootStack = createStackNavigator(
{
CategoryButton: CategoryButton,
ShopMens: ShopMens,
ShopWomens: ShopWomens
},
{
initialRouteName: 'CategoryButton'
}
)
export default createAppContainer(RootStack);
React Native Experts. I need help with the navigation between pages.
I have a Home page with Bottom Navigation with Icon that works perfectly fine.
Then on the same I have 2 TouchableOpacity Button that I need to redirect to another page when I press on it.
I separated those 2 buttons on another component called Category Button, on that component I'm trying to do the Stack navigation to redirect the button to another page, but I have an error saying that stack has already been declared. I don't know how to fix this as I'm following the navigation doc on React Native, and I don't know if I'm doing this right. Can someone help?
UPDATE : I was using react-navigation v4 and v5. I now switch everything to react navigation v4 but my navigation between page ShopMens and ShopWomens is still not working, I don't think I did set my stack in the right way
import React from 'react';
import { StyleSheet, View} from 'react-native';
import Home from './components/Home';
export default function App() {
return (
<View style={styles.container}>
<Home />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
textAlign: "center"
},
header: {
color: "lightgreen",
textAlign: "center",
marginTop: 50,
fontSize: 50,
fontWeight: "bold",
}
});
import React from 'react';
import { StyleSheet, Text, View, Image,TouchableOpacity} from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import { Icon } from 'react-native-elements';
import Profile from './Profile';
import Cart from './Cart';
import Favourite from './Favourite';
import CategoryButton from './CategoryButton';
const Home = () => {
return(
<View style={styles.container}>
<Text style={styles.header}>GOLDEN SHOE</Text>
<CategoryButton />
<Image style={styles.logo} source={{uri:'https://www.vooberlin.com/media/image/cb/d0/3d/JS36105A-13190-001-JIL-SANDER-LEATHER-LOAFERS-BLACK-2.jpg'}}/>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 2,
},
header: {
color: "lightgreen",
textAlign: "center",
marginTop: 50,
fontSize: 60,
fontWeight: "bold",
},
logo: {
width: 450,
height: 550,
},
});
const TabNavigator = createMaterialBottomTabNavigator(
{
Home: {
screen:Home,
navigationOptions: {
tabBarLabel: 'Home',
activeColor:'#000000',
inactiveColor: 'grey',
barStyle:{backgroundColor: 'white'},
tabBarIcon:() =>(
<View>
<Icon
name={'home'}
size={25}
style={{color:'#ff0000'}}
/>
</View>
)
}
},
Profile: {
screen:Profile,
navigationOptions: {
tabBarLabel: 'Profile',
activeColor:'#000000',
inactiveColor: 'grey',
barStyle:{backgroundColor: 'white'},
tabBarIcon:() =>(
<View>
<Icon
name={'person'}
size={25}
style={{color:'#ff0000'}}
/>
</View>
)
}
},
Favourite: {
screen:Favourite,
navigationOptions: {
tabBarLabel: 'Favourite',
activeColor:'#000000',
inactiveColor: 'grey',
barStyle:{backgroundColor: 'white'},
tabBarIcon:() =>(
<View>
<Icon
name={'favorite-border'}
size={25}
style={{color:'#ff0000'}}
/>
</View>
)
}
},
Cart: {
screen:Cart,
navigationOptions: {
tabBarLabel: 'Cart',
activeColor:'#000000',
inactiveColor: 'grey',
barStyle:{backgroundColor: 'white'},
tabBarIcon:() =>(
<View>
<Icon
name={'shopping-cart'}
size={25}
style={{color:'#ff0000'}}
/>
</View>
)
}
},
}
);
export default createAppContainer(TabNavigator);
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")}