Changing Screen names in react native expo-CodePudding

I have the following 2 screens:

<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="SubScreen1" component={SubScreen1} />

I would like to change the screen name of 'SubScreen1' to 'Search Result' but I am getting the error of The action 'NAVIGATE' with payload {"name":"SubScreen1","params":{"paramKey":"Japanese"}} was not handled by any navigator.

How come I am having this error as I have another screen which I just change the name and there is no error.

In my Home Screen:


<View style = {styles.container}>
      <Text>Welcome {auth.currentUser?.email}</Text>
      <Text></Text>
      <Text>What cusine would you like to eat today?</Text>
      <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
    />
    
      <TouchableOpacity
        onPress={() => navigation.navigate("SubScreen1", {paramKey:value})}
        style = {styles.button}
      >
        <Text style = {styles.buttonText}>Search</Text>
      </TouchableOpacity>

In my SubScreen1 screen


import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

const SubScreen1 = ({route}) => {
  const paramKey = route.params.paramKey
  console.log(paramKey)
  return (
    <View>
      <Text>{paramKey}</Text>
    </View>
  )
}

export default SubScreen1

const styles = StyleSheet.create({})

CodePudding user response：

Not sure i understood your question properly but if you want to change the header text of your screen to "Search Result" then just add title property in the Stack.Screen options like below

<Stack.Screen
    name="SubScreen1"
    component={SubScreen1}
    options={{ title: 'Search Result' }}
/>

https://reactnavigation.org/docs/headers/#setting-the-header-title