React Native: React Navigation using reusable component

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)}>