0

I'm currently creating a small Magic the Gathering project which fetches card data from an API and inserts it in my app. I fetched the data like name and such first, but then when I click on the name I want to see more information such as card description and such. However, I keep running into the problem where I get the error “undefined is not an object (this.props.navigation.navigate)”. How do I fix this?

import React from 'react';
import { Paragraph, Card, Avatar, Button } from "react-native-paper";
import { Image, View, StyleSheet, AsyncStorage } from 'react-native';


export default class CardProfile extends React.Component {
  render() {
    const { props } = this.props
    const card = props["state"].params
    const img = card.imageUrl
    return (
      <View style={styles.container}>

          <View style={styles.cardinfo}>

                    <Card>
                        <View style={styles.title}>
                            <Card.Title
                                title={card.name}
                                subtitle={card.colors}
                            />
                        </View>

                        <View style={styles.content}>
                            <Card.Content>
                                <Paragraph>{card.text}</Paragraph>
                                <Image
                                    style={styles.img}
                                    source={{ uri: img }}
                                />
                            </Card.Content>
                        </View>

                        <View style={styles.actions}>
                            <Card.Actions>
                                <Button onPress={() => {
                                    // create a function that saves your data asyncronously
                                    _storeData = async () => {
                                        try {
                                            await AsyncStorage.setItem('@Card', this.state.card);
                                        } catch (error) {
                                            console.log("Could not save!", error);
                                        }
                                    }
                                }}>add card</Button>
                            </Card.Actions>
                        </View>

                    </Card>

                </View>
            </View>
        );
    }
}

The output should be the card information for the selected card I wanted to see.

albertohdez9
  • 28
  • 5
Miki
  • 3
  • 2

1 Answers1

0

Where are you using this.props.navigation.navigate in your code? Are you sure that the component where you are calling it has navigation passed as a prop?

x707
  • 31
  • 5
  • I'm using it where I'm fetching the api I think, ` data={this.state.dataSource} renderItem={({item}) => this.props.navigation.navigate('CardProfile', item)}>` – Miki Jun 12 '19 at 15:21
  • Ok. If you place a breakpoint on that line (or console.log it), is `this.props.navigation` value undefined? The component may not be receiving the prop, you need to pass it explicitly from the parent component that's in the navigator stack (ex. ) – x707 Jun 12 '19 at 15:31