Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Changing Screen names in react native expo

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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({})

>Solution :

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading