CODEWITHSUNDEEP
react-nativereact-native-navigation
user585148
user585148

Reputation: 117

Specify name or key for onPress in React Native Navigation

I am getting the following error in Expo: "You need to specify name or key when calling navigate with an object as the argument."

I have a main piece of code calling the LoginOptions include:

<LoginOptions title="Don't have a business account?" link="Create a free account" press="CreateAccount"/>

I am trying to pass the navigation destination as a "variable?? - not sure what the correct word is". LoginOptions looks like this:

import React from 'react';
import { View, Text, TouchableWithoutFeedback } from 'react-native';

import { useNavigation } from '@react-navigation/native';

import defaultStyles from "../../config/styles";

function LoginOptions ({title, link, press }) {
    const navigation = useNavigation();
    return (
    <View>
        <Text style={defaultStyles.logBold}>
        {title}
        </Text>
        <TouchableWithoutFeedback onPress={() => navigation.navigate({press})} >
            <Text style={defaultStyles.logUnder} >
            {link}
            </Text>
        </TouchableWithoutFeedback>
    </View>
    );
}

export default LoginOptions;

Upvotes: 2

Views: 1036

Answers (2)

Quang Th&#225;i
Quang Th&#225;i

Reputation: 697

firstly, declare your screen in a StackScreen

Guide here

then, fix your navigate action: onPress={() => navigation.navigate("ScreenNameYouDefinedAbove")}

P/s: I think you're using ReactJS routing' mechanism inside React Native. React Navigation has its own definition for routing, please follow the docs.

Upvotes: 1

Pankaj Chaturvedi
Pankaj Chaturvedi

Reputation: 208

pass it as a prop of loginOption

 <LoginOptions navigation={navigation} title="Don't have a business account?" link="Create a free account" press={"CreateAccount"}/>

then

import React from 'react';
import { View, Text, TouchableWithoutFeedback } from 'react-native';



import defaultStyles from "../../config/styles";

function LoginOptions ({title, link, press ,navigation}) {
    return (
    <View>
        <Text style={defaultStyles.logBold}>
        {title}
        </Text>
        <TouchableWithoutFeedback onPress={() => navigation.navigate(press)} >
            <Text style={defaultStyles.logUnder} >
            {link}
            </Text>
        </TouchableWithoutFeedback>
    </View>
    );
}

export default LoginOptions;

Upvotes: 1

Related Questions