TypeError: props.navigation.getParam is not a function. (In 'props.navigation.getParam('docId')', 'props.navigation.getParam' is undefined)

Question

I am trying to fetch the data from one screen to another through props.naviagtion.getParam, however I am getting this error :'TypeError: props.navigation.getParam is not a function. (In 'props.navigation.getParam('docId')', 'props.navigation.getParam' is undefined)'. I have shared the code; if someone is familiar with the problem, your help will be appreciated!

import { useNavigation } from '@react-navigation/core'
import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View, FlatList, ScrollView, Pressable } from 'react-native'
import { auth } from '../firebase'
import { DOC } from '../Data/dummy-data'





const HomeScreen = props => {
  const navigation = useNavigation()

  const handleSignOut = () => {
    auth
      .signOut()
      .then(() => {
        navigation.replace("Login")
      })
      .catch(error => alert(error.message))
  }

  const renderGridItem = (itemData) => {
    return ( 
      <TouchableOpacity 
      style={styles.grid}
      onPress={ () => { 
        navigation.navigate('Doctors',{docId:itemData.item.id})
        
  }}>
    <View>
      <Text>
        {itemData.item.title}
      </Text>
    </View>
    </TouchableOpacity>
    )
  }

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

      
    

      <FlatList keyExtractor={(item, index) => item.id} 
      data={DOC} 
      renderItem={renderGridItem} />

      <Text style={styles.txt}>Email: {auth.currentUser?.email}</Text>
      <TouchableOpacity
        onPress={handleSignOut}
        style={styles.button}
      >
        <Text style={styles.buttonText}>Sign out</Text>
      </TouchableOpacity>

      
    </View>
  )
}


HomeScreen.navigationOptions = {
  headerTitle: 'All Doctors',
  headerStyle: {
    backgroundColor: 'red'
  },
  headerTintColor: 'red'
};

export default HomeScreen


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    
  },
   button: {
    backgroundColor: '#0782F9',
    width: '60%',
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
    marginTop: 40,
  },
  buttonText: {
    color: 'white',
    fontWeight: '700',
    fontSize: 16,
  },
  txt:{
    fontSize:20,
    color:'black',
    alignItems:'flex-start'
  },
  screen:{
    marginTop:10,
    width:'30%',
    height:2,
    borderRadius:10,
    backgroundColor:'red',
    
  },
  grid:{
    flex:1,
    margin:15,
    height:150
  },
})

/////////////Doctor.js//////////////

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { DOC } from '../Data/dummy-data'

const Doctors = props => {
  const docId = props.navigation.getParam('docId')
  const selectedCategory = DOC.find(doc => doc.id === docId)
  return (
    <View>
      <Text>{selectedCategory.title}</Text>
    </View>
  )
}

export default Doctors

const styles = StyleSheet.create({})

Answer 1

There are two things that you need to take care of. First, if Doctors is not a screen in a navigator, then the route object will not be passed to it by the navigation framework. Second, if you are using react-navigation v5 or higher , then you access the params via the route object .

Since you navigate to Doctors , it should be a screen defined in the navigator, thus you can access it as follows.

const Doctors = props => {
  
  // destructure
  const { docId } = props.route.params

  const selectedCategory = DOC.find(doc => doc.id === docId)
  return (
    <View>
      <Text>{selectedCategory.title}</Text>
    </View>
  )
}

If you have a component that is not a screen inside a navigator, then you can use the useRoute hook.

const route = useRoute()
const { docId } = route.params

References: The last version for getParams is v4 as documented here . This has changed for higher versions as documented here . The useRoute hook is documented here .