navigate to another screen using react native - react-native

Question

I am trying to navigate to another screen while pressing on a button using onpress in react native but getting error. Front page is App.js which contains multiple buttons, I am working on event button for now. when I press on event button then it should redirect to the contain in event.js I am a newbie in react.
App.js
import React from "react";
import {StyleSheet,Text,View,Button,Image,ProgressViewIOS} from "react-native";
import event from './event.js';
export default class App extends React.Component {
render() {
return (
<View>
<Text style={styles.h1}>WELCOME TO </Text>
<Image
style={styles.logo}
source={require('./logo_tiny.jpg')}
/>
<View style={styles.container}>
<View style={styles.b1}>
<Button
title="Events"
onPress={() => this.onPress('navigateToevent')}
color="#fff"
/>
</View>
<View style={styles.b1}>
<Button
title="Package"
onPress={() => this.onPress()}
color="#fff"
/>
</View>
</View>
<View style={styles.container}>
<View style={styles.b1}>
<Button
title="Promotion"
onPress={() => this.onPress()}
color="#fff"
/>
</View>
<View style={styles.b1}>
<Button
title="Support"
onPress={() => this.onPress()}
color="#fff"
/>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
h1: {
textAlign: 'center',
color: '#1E7778',
fontSize: 32,
marginTop: 18,
width: 400,
fontWeight: 'bold',
},
container: {
flexDirection: 'row',
},
b1: {
width: '40%',
margin: 20,
padding: 10,
backgroundColor: '#D16B11',
borderRadius: 20,
},
logo: {
alignItems: 'center',
justifyContent:'center',
left: '20%',
},
});
event.js
import React from 'react';
export default class event extends React.Component {
navigateToevent = () => {
this.props.navigation.navigate('event');
};
constructor(props) {
super(props);
this.state = {
country: null,
city: null,
cities: []
};
}
changeCountry(item) {
let city = null;
let cities;
switch (item.value) {
case 'fr':
cities = [
{label: 'Paris', value: 'paris'}
];
break;
case 'es':
cities = [
{label: 'Madrid', value: 'madrid'}
];
break;
}
this.setState({
city,
cities
});
}
changeCity(item) {
this.setState({
city: item.value
});
}
render() {
return (
<>
<DropDownPicker
items={[
{label: 'France', value: 'fr'},
{label: 'Spain', value: 'es'},
]}
defaultNull
placeholder="Select your country"
containerStyle={{height: 40}}
onChangeItem={item => this.changeCountry(item)}
/>
<DropDownPicker
items={this.state.cities}
defaultNull={this.state.city === null}
placeholder="Select your city"
containerStyle={{height: 40}}
onChangeItem={item => this.changeCity(item)}
/>
</>
);
}
}

Answer 1

// event.js
import React from "react";
import DropDownPicker from "react-native-dropdown-picker";
export default class event extends React.Component {
constructor(props) {
super(props);
this.state = {
country: null,
city: null,
cities: [],
};
}
changeCountry(item) {
let city = null;
let cities;
switch (item.value) {
case "fr":
cities = [{ label: "Paris", value: "paris" }];
break;
case "es":
cities = [{ label: "Madrid", value: "madrid" }];
break;
}
this.setState({
city,
cities,
});
}
changeCity(item) {
this.setState({
city: item.value,
});
}
render() {
return (
<>
<DropDownPicker
items={[
{ label: "France", value: "fr" },
{ label: "Spain", value: "es" },
]}
defaultNull
placeholder="Select your country"
containerStyle={{ height: 40 }}
onChangeItem={(item) => this.changeCountry(item)}
/>
<DropDownPicker
items={this.state.cities}
defaultNull={this.state.city === null}
placeholder="Select your city"
containerStyle={{ height: 40 }}
onChangeItem={(item) => this.changeCity(item)}
/>
</>
);
}
}
// main.js
import React from "react";
import {
StyleSheet,
Text,
View,
Button,
Image,
ProgressViewIOS,
} from "react-native";
import event from "./event.js";
export default class Main extends React.Component {
navigateToevent = () => {
this.props.navigation.navigate("event");
};
render() {
return (
<View>
<Text style={styles.h1}>WELCOME TO </Text>
<Image style={styles.logo} />
<View style={styles.container}>
<View style={styles.b1}>
<Button
title="Events"
onPress={() => this.navigateToevent()}
color="#fff"
/>
</View>
<View style={styles.b1}>
<Button
title="Package"
onPress={() => this.onPress()}
color="#fff"
/>
</View>
</View>
<View style={styles.container}>
<View style={styles.b1}>
<Button
title="Promotion"
onPress={() => this.onPress()}
color="#fff"
/>
</View>
<View style={styles.b1}>
<Button
title="Support"
onPress={() => this.onPress()}
color="#fff"
/>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
h1: {
textAlign: "center",
color: "#1E7778",
fontSize: 32,
marginTop: 18,
width: 400,
fontWeight: "bold",
},
container: {
flexDirection: "row",
},
b1: {
width: "40%",
margin: 20,
padding: 10,
backgroundColor: "#D16B11",
borderRadius: 20,
},
logo: {
alignItems: "center",
justifyContent: "center",
left: "20%",
},
});
// App.js
import React from "react";
import {
StyleSheet,
Text,
View,
Button,
Image,
ProgressViewIOS,
} from "react-native";
import event from "./event.js";
import main from "./main.js";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
const AppNavigator = createStackNavigator({
main: {
screen: main,
},
event: {
screen: event,
},
});
class App extends React.Component {
render() {
return (
<View>
<AppNavigator />
</View>
);
}
}
export default AppContainer = createAppContainer(AppNavigator);
Try this works for you

Answer 2

This contains most of what you need with navigation on react native. https://reactnative.dev/docs/navigation
Need to wrap your code in <NavigationContainer>