React Native: React Navigation using reusable component - react-native

Question

I'am new in React Native & I'am trying to create separated Button component file (reusable component), and when I press the button it will navigate to another page (react-navigation). Below is my code:
GlobalButton.js
import React from 'react'
import { StyleSheet, TouchableOpacity, Text} from 'react-native'
import { useNavigation, NavigationContainer } from '#react-navigation/native';
const GlobalButton = (props, {screenName}) => {
const navigation = useNavigation();
return
<TouchableOpacity style={[styles.btn, props.style]} onPress= {() => navigation.navigate(screenName)}>
{props.children}
</TouchableOpacity>
}
const styles = StyleSheet.create({
btn: {
alignItems: 'center',
textAlign: 'center',
borderRadius: 25,
height: 50,
}
})
export default GlobalButton;
LoginPage.js
import React from 'react'
import { StyleSheet, Text, View, Image, TextInput, Button} from 'react-native'
import ButtonLogin from '../components/GlobalButton'
// import { useNavigation, NavigationContainer } from '#react-navigation/native';
export default function LoginPage() {
return (
<View style={styles.penampung}>
<Image source= {require('../assets/beetle.png')} style={styles.gambar}/>
<TextInput style={styles.textField} placeholder='username' />
<TextInput style={styles.textField} placeholder='password' secureTextEntry={true} />
<ButtonLogin style={styles.btnStyle} screenName="MainPage"><Text style={styles.text}>LOGIN</Text></ButtonLogin>
</View>
)
}
const styles = StyleSheet.create({
penampung: {
flex: 1,
alignItems: 'center',
backgroundColor: '#00688B',
justifyContent: 'center'
},
gambar: {
height: 100,
width: 100,
},
textField: {
marginTop: 25,
backgroundColor: '#cafafe',
borderRadius: 25,
width: '80%',
height: 50,
paddingLeft: 20
},
btnStyle: {
padding: 10,
position: 'absolute',
bottom: 20,
backgroundColor: "#fc4445",
width: '80%'
},
text:{
fontSize: 20,
fontWeight: 'bold',
color: 'white'
}
})
What I'am expecting is that when I click the login button it should navigate to the MainPage.js, but instead it gives error message ->
Error: You need to specify name or key when calling navigate with an object as the argument.
Please anyone help me in this matter, Thanks...

Answer 1

You should do like below as screenName is part of your props,
<TouchableOpacity style={[styles.btn, props.style]} onPress= {() => navigation.navigate(props.screenName)}>