0

In my React Native 0.70 app, there are 2 components Home (parent) and ListSearch (child). Users enter server string in Home and search result is displayed in ListSearch. When users click navigation.goBack() on ListSearch to go back to Home, useFocusEffect from react navigation 6.x is used to reset the placeholder on search bar in Home. Here is the code in Home (parent) to reset the placeholder:

export default Home = ({ navigation}) => {

const searchHolder = "Enter search string here";
const [plcholder, setPlcholder] = useState(searchHolder);

 const submitsearch = async () => {
   ...
   setPlcholder(searchHolder);//reset place holder
   navigation.navigate("ListSearch", {artworks:res, title:"Search Result"}). //<<==ListSearch is component of result displaying 
 }

//reset placeholder whenever the Home is focused.
    useFocusEffect(
        React.useCallback(() => {
            setPlcholder(searchHolder);  // reset the place holder search bar
        },[navigation])
    );

 //view
 return (
         ...
            <View style={{flex:5}}>
                <TextInput  style={{fontSize:hp("3%")}} placeholder={plcholder} onChangeText={strChg}></TextInput>.  //plcholder here
            </View>
 )

}

The code above didn't work. When users navigation.goBack() to Home component, the placeholder in search bar was the previous search string and was not updated.

user938363
  • 9,990
  • 38
  • 137
  • 303
  • 1
    What about resetting the placeholder before navigating to the child component? – Mostafa Elkaramany Nov 29 '22 at 22:22
  • the placeholder has been reset before navigation.navigate to child component from parent. But somehow the placeholder on search bar was not updated after navigation.goBack from child to parent component. One reset before navigate to child and another reset after goBack from child to parent. Both didn't work. – user938363 Nov 29 '22 at 22:54
  • 1
    This has helped me in a previous project before, link: https://stackoverflow.com/questions/44223727/react-navigation-goback-and-update-parent-state – Mostafa Elkaramany Nov 29 '22 at 23:17
  • it may be because there is no state updated on the view so the view didn't re-render. need to force re-render of the parent component after navigation.goBack from child. – user938363 Nov 30 '22 at 00:26

1 Answers1

1

Placeholder string is updated when you navigate to ListSearch, You should set value of TextInput to empty string, here is the code you can refer,

import { useState,useEffect } from 'react';
import { View, TextInput, TouchableOpacity, Text } from 'react-native';

export default Home = ({ navigation }) => {
  const searchHolder = 'Enter search string here';
  const [plcholder, setPlcholder] = useState(searchHolder);
  const [text, setText] = useState();


  const submitsearch = () => {
    console.log('submitsearch called ', searchHolder);
    setText("");
    setPlcholder(searchHolder);
    navigation.navigate('ListSearch');
  };

  //view
  return (
    <View style={{ flex: 5 }}>
      <TouchableOpacity onPress={() => submitsearch()}>
        <Text>Submit</Text>
      </TouchableOpacity>
      <TextInput
        style={{ fontSize: 20, marginTop: 30 }}
        placeholder={plcholder}
        value={text}        
        onChangeText={(val) => setText(val)} />
    </View>
  );
};

Here is the demo, I've created.

Asmeeta Rathod
  • 217
  • 1
  • 7
  • Added `value` to `TextInput`. However the page is still not re rendered. Since value is a state and change of state causes the view reloaded according to document. Not sure what happened here. When using `navigation.push("Home")` in `ListSearch` when going back, the `Home` is re rendered. – user938363 Nov 30 '22 at 18:38
  • Did you set value to empty string? or can you update your question with latest code. – Asmeeta Rathod Dec 01 '22 at 04:24