Anybody know why this doesn't work if its writen like the react navigation docs?-CodePudding

This is the btn that 'controls' the navigation.

It loads the first Stack, Home, but when I press the touchable opacity to go QnScreen it drops an error: undefined is not an object (evaluating 'navigation.navigate').

I try it all, I'm falling into depression lol.

import * as React from 'react';
import { LinearGradient } from "expo-linear-gradient";
import { StyleSheet, Text, TouchableOpacity, Image } from "react-native";

export default function DocCard( { navigation } ){

   return(
      <TouchableOpacity 
         style={styles.container}
         onPress={()=>{
            navigation.navigate('QnScreen')
         }}
      >
         <LinearGradient
         style={styles.linearGradient}
            colors={['#4822E4','transparent']}
            start={{x:0, y:0}}
            end={{x:1, y:1}}>
            <Text style={styles.title}>Create new Doc.</Text>
            <Image
               style={styles.icon}
               source={require('../../img/HomeScreen/doc_icon.png')}
            />
         </LinearGradient>
      </TouchableOpacity>
   );
}

And this is the MainStack:

import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import QnScreen from '../screens/QnScreen';
import Home from '../screens/Home';
import React from 'react';

const Stack = createNativeStackNavigator();


export default function MainStack(){
   return(
      <NavigationContainer>
         <Stack.Navigator
            screenOptions={{
               headerShown: false
            }}
         >
            <Stack.Screen
               name='Home'
               component={Home}
            />
            <Stack.Screen
               name='QnScreen'
               component={QnScreen}
            />   
         </Stack.Navigator>
      </NavigationContainer>
   );
}

I'm using Expo with typescript

CodePudding user response：

I solve it!!!

The solution was using the useNavigation hook inside the component.

import { useNavigation } from "@react-navigation/native";
import { LinearGradient } from "expo-linear-gradient";
import { StyleSheet, Text, TouchableOpacity, Image } from "react-native";

export default function DocCard(){
   const navigation = useNavigation();
   return(
      <TouchableOpacity
         style={styles.container}
         onPress={()=>{
            navigation.navigate('QnScreen');
         }}
      >
         <LinearGradient
         style={styles.linearGradient}
            colors={['#4822E4','transparent']}
            start={{x:0, y:0}}
            end={{x:1, y:1}}>
            <Text style={styles.title}>Crear nuevo documento de consentimiento informado.</Text>
            <Image
               style={styles.icon}
               source={require('../../img/HomeScreen/doc_icon.png')}
            />
         </LinearGradient>
      </TouchableOpacity>
   );
}

If anybody have this problem, there's the solution:)

CodePudding user response：

First off, you'll need to have that navigation.navigate() call include a parameter that states which screen/screen-stack you want to navigate to. It doesn't look like that's your main issue though.

I can't tell from just the code you've posted, but judging from the 'navigation' object being undefined, it's most likely that your DocCard component is not a child of your Navigator. Where is DocCard in your component tree? Is it inside QnScreen or Home? Cause that's where it should be.