Opening a new page and sending a restAPI call on click of button in react Native - react-native

Question

I am new to react native, started learning yesterday.
So, far my file structure is this:
---Assets
--- (some images)
---Screens
---WelcomeScreen.js
---Login.js
---app.js
---server.py (contains my flask API implementations)
I would like to navigate from WelcomeScreen to Login screen on clicking the login or register button inside WelcomeScreen and also send a rest API call to my backend so that I can further process the info.
app.js:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
import WelcomeScreen from './screens/WelcomeScreen';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<WelcomeScreen />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container:{
flex: 1,
width: "100%",
height: "100%",
}
})
WelcomeScreen.js
import React from 'react';
import { ImageBackground, StyleSheet, View, SafeAreaView, Text, Button } from 'react-native';
import Login from './Login';
function WelcomeScreen(props) {
return (
<ImageBackground
style={styles.background}
resizeMode="cover"
source={require("../assets/bg.jpg")}>
<Button
onPress={() => props.navigation.navigate(Login)} //throwing error
//TypeError: undefined is not an object (evaluating 'props.navigation.navigate')
title="Login"
color="#fc5c65"
/>
<Button
onPress={() => props.navigation.navigate(Login)} //throwing error
//TypeError: undefined is not an object (evaluating 'props.navigation.navigate')
title="Register"
color="#4ecdc4"
/>
</ImageBackground>
);
}
const styles = StyleSheet.create({
background:{
flex: 1,
justifyContent: "flex-end"
},
loginButton:{
width: "100%",
height: 70,
backgroundColor: '#fc5c65'
},
registerButton:{
width: "100%",
height: 70,
backgroundColor: '#4ecdc4'
},
})
export default WelcomeScreen;
Login.js
import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
export default function Login() {
return (
<ImageBackground
style={styles.background}
resizeMode="cover"
source={require("../assets/splash.png")}>
</ImageBackground>
)
}
const styles = StyleSheet.create({
background:{
flex: 1,
justifyContent: "flex-end"
},
loginButton:{
width: "100%",
height: 70,
backgroundColor: '#fc5c65'
},
registerButton:{
width: "100%",
height: 70,
backgroundColor: '#4ecdc4'
},
})
Now, from the WelcomeScreen.js,
I want to go to the login page upon clicking login button or register button and also send a restAPI call to the backend.
How do I do this??

Answer 1

Navigation isn't always built in to react native. Primarily people use libraries to handle this smoothly. Based on your code, you've been following an example based on using react-navigation which you can read about here. Essentially you'll need nest all of your screens inside of special components from that library which will pipe the navigation prop through to your screen components.
In order to run the API calls, you can add those functions calls on a new line in each of the functions you are passing as the onPress prop. Alternatively, you could place a useEffect hook in your screen components to make the API call after the navigation has completed.
// in Login.js
export const Login = () => {
useEffect(() => {
callAPI()
}, []);
...
}