Question 35453 in React native Question posted in
The official React Native documentation can be found here.

Anybody know why this doesn't work if its writen like the react navigation docs? – React native

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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:)


  2. 0

    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.

    Then you’ll need to receive the ‘navigation’ prop from one of your screens. And pass it as a prop to DocCard to be used. ‘Navigation’ and ‘route’ props are only automatically passed to screens.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search