CODEWITHSUNDEEP
javascriptreactjsreact-native
Daudidenno
Daudidenno

Reputation: 47

How do I resolve "Error on react-native navigation"

I am making a pokedex, and from the FlatList I would like users to be able to click on a pokemon, and get directed to a detail page of the particular pokemon. However, the navigation.navigate is not working in both class and function based views. I have looked at the documentation and it uses the method I am trying to implement. What is going wrong?

App.js


import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import PokedexData from './components/PokedexData';
import PokemonView from './components/PokedexData';
const Stack = createStackNavigator();

export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            options={{headerShown: false}}
            name="PokedexList"
            component={PokedexData}
          />
          <Stack.Screen name="PokemonView" component={PokemonView} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

PokedexData.js

import React, {Component} from 'react';
import axios from 'axios';
import {View, FlatList} from 'react-native';
import PodexRow from './PokedexRow';

export default class PokedexRow extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pokemon: [],
    };
  }
  componentDidMount() {
    this.loadPokemon();
  }
  loadPokemon = () => {
    axios
      .get('https://pokeapi.co/api/v2/pokemon?limit=151')
      .then((res) => this.setState({pokemon: res.data.results}));
  };
  renderItem = ({item}) => <PodexRow name={item.name} />;
  render() {
    return (
      <FlatList
        data={this.state.pokemon}
        renderItem={this.renderItem}
        keyExtractor={(item) => item.url}
      />
    );
  }
}

PokedexRow.js

import {View, StyleSheet, Text, Pressable} from 'react-native';

export default class PokedexRow extends Component {
  constructor(props) {
    super(props);
  }

  onPressHandle = () => {
    alert(this.props.name);
    const {navigate} = this.props.navigation;
  };
  render() {
    return (
      <View style={styles.PokedexRowView}>
        <Pressable
          style={styles.PokedexClickable}
          onPress={this.onPressHandle}
          android_ripple={{color: 'gray'}}>
          <Text style={styles.PokedexRowText}>{this.props.name}</Text>
        </Pressable>
      </View>
    );
  }
}
const styles = StyleSheet.create({
/*stles removed for brevity*/
});

Upvotes: 0

Views: 48

Answers (1)

Vivek_Neel
Vivek_Neel

Reputation: 1353

Because PokedexRow is not a screen where you get the navigation prop automatically. you can use useNavigation for a functional component to get access to navigation object or pass navigation from screen component to your PokedexRow as a prop.

renderItem = ({item}) => <PodexRow navigation={this.props.navigation} name={item.name} />;

Upvotes: 1

Related Questions