Expo how to navigate between screens - react-native

Question

So I've created three separate pages within the app and I've also added a Stack Navigator from React Native, but when I click on the button the app doesn't change page. As this is my first app in React any help would be massively appreciated!
This is what my Add.js looks like;
import React from "react";
import { YellowBox } from "react-native";
import { Font } from "expo";
import Timer from "./src/screens/Timer";
import Splash from "./src/screens/Splash";
import Main from "./src/screens/Main";
import { StackNavigator, DrawerNavigator } from "react-navigation";
const DrawerNavigation = DrawerNavigator({
Timer: {
screen: Timer
},
Splash: {
screen: Splash
},
Main: {
screen: Main
}
});
const StackNavigation = StackNavigator(
{
DrawerNavigation: {
screen: DrawerNavigation`enter code here`
},
Timer: {
screen: Timer
},
Splash: {
screen: Splash
},
Main: {
screen: Main
}
},
{
headerMode: "none"
}
);
export default class App extends React.Component {
constructor() {
super();
this.state = {
fontLoaded: false
};
YellowBox.ignoreWarnings([
"Warning: componentWillMount is deprecated",
"Warning: componentWillReceiveProps is deprecated",
"Warning: componentWillUpdate is deprecated"
]);
}
async componentDidMount() {
await Font.loadAsync({
Roboto: require("./src/assets/fonts/Arial.ttf")
/*FallbackFont*/`
});
this.setState({ fontLoaded: true });
console.warn("Fallback font is being used. Please check App.js
file.");
}
render() {
return this.state.fontLoaded ? <StackNavigation /> :
<Expo.AppLoading />;
}
}
And here is the Main.js;
import React, { Component } from "react";
import Button15 from "../symbols/button15";
import { Center } from "#builderx/utils";
import Button52 from "../symbols/button52";
import { View, StyleSheet, StatusBar, Image, ScrollView } from
"react-native";
export default class Main extends Component {
render() {
return (
<View style={styles.root}>
<StatusBar
barStyle="dark-content"
style={styles.statusBar}
animated={true}
/>
<Button15
style={styles.button15}
onPress={() => {
this.props.navigation.pop();
}}
/>
<ScrollView style={styles.scrollArea} horizontal={false} />
<Center horizontal>
<Image
source={require("../assets/DLLargeDarK.jpeg")}
style={styles.image}
/>
</Center>
<Center horizontal>
<View style={styles.rect3}>
<View style={styles.rect} />
<Center horizontal>
<Button52
style={styles.button52}
onPress={() => {
this.props.navigation.push("Timer");
}}
/>
</Center>
<View style={styles.rect2} />
</View>
</Center>
<Center>
<View style={styles.rect4}>
<View style={styles.rect5} />
<Button52
style={styles.button522}
onPress={() => {
this.props.navigation.push("Timer");
}}
/>
<View style={styles.rect6} />
</View>
</Center>
<Center horizontal>
<View style={styles.rect7}>
<View style={styles.rect8} />
<Button52
style={styles.button523}
onPress={() => {
this.props.navigation.push("Timer");
}}
/>
<View style={styles.rect9} />
</View>
</Center>
<Center horizontal>
<View style={styles.rect10}>
<View style={styles.rect11} />
<Button52
style={styles.button524}
onPress={() => {
this.props.navigation.push("Timer");
}}
/>
<View style={styles.rect12} />
</View>
</Center>
</View>
);
}
}
const styles = StyleSheet.create({
root: {
backgroundColor: "#f3f4f4",
flex: 1
},
statusBar: {},
button15: {
top: 56,
left: 338,
position: "absolute",
height: 36
},
scrollArea: {
height: 608.9,
width: 374,
top: 156,
left: 0,
position: "absolute",
backgroundColor: "rgba(244,244,245,1)",
opacity: 1
},
image: {
height: 73,
width: 301,
position: "absolute",
top: "6.83%"
},
rect3: {
height: 133,
width: 347,
top: 156,
position: "absolute"
},
rect: {
top: 0,
left: "0%",
width: 347,
height: 91,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
},
button52: {
top: 91,
height: 36,
position: "absolute"
},
rect2: {
top: "95.52%",
left: "0%",
width: 347,
height: 6,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
},
rect4: {
width: 347,
height: 132,
position: "absolute"
},
rect5: {
top: 0,
left: "0%",
width: 347,
height: 91,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
},
button522: {
top: 91,
left: "37.46%",
height: 35,
position: "absolute"
},
rect6: {
top: "95.52%",
left: "0%",
width: 347,
height: 6,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
},
rect7: {
top: "61.33%",
width: 347,
height: 133,
position: "absolute"
},
rect8: {
top: 0,
left: "0%",
width: 347,
height: 91,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
},
button523: {
top: 91,
left: "37.46%",
height: 35,
position: "absolute"
},
rect9: {
top: "95.52%",
left: "0%",
width: 347,
height: 6,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
},
rect10: {
top: "81.16%",
width: 347,
height: 133,
position: "absolute"
},
rect11: {
top: 0,
left: "0%",
width: 347,
height: 91,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
},
button524: {
top: 91,
left: "37.46%",
height: 35,
position: "absolute"
},
rect12: {
top: "95.52%",
left: "0%",
width: 347,
height: 6,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
}
});

Answer 1

In React Navigation you need to use the navigate method instead of push
this.props.navigation.navigate("Timer");
And to go back you use the goBack method instead of pop
this.props.navigation.goBack()
Read more about the navigation prop in the docs