TypeError: undefined is not an object (evaluating 'navigation.navigate') given when {navigation} parameter already nested in component

Whenever I put a component with navigational capabilities in another component I always get the error in the title.

Component with Navigation passed in:

import React from 'react'
import { View, Text, Pressable, StyleSheet } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'


const SearchBar = ({navigation}) => {
    return (
        <Pressable style={styles.SearchBar} onPress={() => navigation.navigate('Settings Search')}> 
<Ionicons name='settings-outline' color='#06d900' size={28} />
<Text style={styles.searchBarText}>  Search Settings</Text> 
</Pressable>
    )
}

export default SearchBar;

const styles = StyleSheet.create({
    SearchBar: {
        width: '80%',
        backgroundColor: 'white',
        height: 42,
        borderRadius: 20,
        alignItems: 'center',
        flexDirection: 'row',
        position: 'absolute',
        top: 10,
        left: '10%',
        paddingLeft: 10,
        
      },

      searchBarText: {
        color: '#d3d3d3',
        fontSize: 15,
        width: '100%'
        
      },

})

File with Component nested inside of it:

import * as React from "react";
    import { StyleSheet, Text, View, Pressable, ScrollView, TouchableOpacity } from "react-native";
    
    import Ionicons from 'react-native-vector-icons/Ionicons';
    import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
    import SearchBar from "./Settings/SearchBar";
    import SettingsList from "./Settings/SettingsList/SettingsList";
    import SettingsListHeader from "./Settings/SettingsListHeader";
    
    
    
    export default function SettingsScreen({navigation}) {
      return (
        <View style={styles.container}>
          
          <SearchBar />
          {/* <Pressable style={styles.SearchBar} onPress={() => navigation.navigate('Settings Search')}> 
    <Ionicons name='settings-outline' color='#06d900' size={28} />
    <Text style={styles.searchBarText}>  Search Settings</Text> 
    </Pressable> */}
    
    <SettingsListHeader />
    <ScrollView style={{marginTop: 35,
    }} showsVerticalScrollIndicator={false}>
      
    <SettingsList />

The component being nested into the file is "SearchBar" and when you click on it you are supposed to be directed to another page but instead, I get an error

TypeError: undefined is not an object (evaluating 'navigation.navigate')

and I am confused about how to solve it.

1 answer

  • answered 2021-11-26 18:51 Papa Kodi

    Found out that only the direct child of my route can use the navigation prop so I decided to pass the navigation prop to my component SearchBar

    export default function SettingsScreen(props, {navigation}) {
      return (
        <View style={styles.container}>
          
          <SearchBar navigation={props.navigation} />
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum