How to navigate one component to other component in react native component tree?

Question

I have implement 2 component and the following is the component tree.

Mypurchase <--- ProductCard (parent) (child)

I need to navigate from productCard component button , to another screen, called 'complainytSubmission'

But it says navigation.navigate is not a function and, undefined is not a function how I solve it?

'Mypurchase' component:

i

mport * as React from 'react';
import {Dimensions, StyleSheet, View, FlatList, ScrollView, TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {Card, Button, Text} from 'react-native-paper';
import {useEffect, useState} from 'react';
import AsyncStorage from '@react-native-community/async-storage';
import ProductCard from './ProductCard';
import LinearGradient from "react-native-linear-gradient";
import {hostName} from '../../constants/constants';

const MypurchaseSceen = ({navigation}) => {
  const [productDetails , setproductDetails] = useState([]);
  console.log('productDetails Array',productDetails);

  useEffect(() => {
    getProductDetails();
  }, []);


  const getProductDetails = async () => {
    const token = await AsyncStorage.getItem('userToken');
    console.log('token from storage', token);

    fetch(hostName +"/customer/get-all-products", {

      method: "post",
      headers: {
        'Content-Type': 'application/json',
        'Authentication': `Bearer ${token}`
      },
    })
        .then((response) => response.json())
        .then((json) => setproductDetails(json))
        .catch((error) => console.error(error))

  };


  return (
      <View>
          <FlatList data={productDetails.data}
                    keyExtractor={( item ,index) => 'key' + index}
                    renderItem={({item}) => {
                      return (
                          <ProductCard item = {item}/>
                      
                          )
                    }} />
        
        
      </View>
  );
};
export default MypurchaseSceen;

Productcard component:

import * as React from 'react';
import {Dimensions, StyleSheet, TouchableOpacity, View} from 'react-native';
import { Text} from 'react-native-paper';
import LinearGradient from "react-native-linear-gradient";
import ProductButton from './ProductButton';

const ProductCard = ({item} )=> {

    return (
        <View>
            <View style={ styles.cardView}>

                <Text style={styles.productName}> Product Name :{item.productName}</Text>
                <Text style={styles.category}> Category :{item.category} </Text>
                <ProductButton />

            </View>
        </View>
    );
};
export default ProductCard;

we need your navigator definition, also make a snack snack.expo.io/@anthowm/… — anthony willis muñoz
– anthony willis muñoz, Commented Apr 5, 2021 at 22:08

lahmer ilyas · Accepted Answer · 2021-04-05 22:59:05Z

1

Inside your ProductButton, try to use the navigation hook

export function ProductButton(){
   const navigation = useNavigation();


  return(
    <Button onClick={() => navigation.navigate('complainytSubmission')}
 )
}

answered Apr 5, 2021 at 22:59

lahmer ilyas

562 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to navigate one component to other component in react native component tree?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related