React native render component based on TextInput onfocus

Question

I want to display something in my react component when user clicks into a text input (something similar to Instagram's search, where if you click on their input field, a search component suggestion shows up.

const SearchScreen = props => {

  const renderSearch = () => {
    return (
      <>
       // need to display the search suggestion
      </>
    )
  }

  return (
    <>
      <TextInput
        placeholder="Search"
        onChangeText={text => handleChange(text)}
        value={searchText}
        onFocus={() => renderSearch()} // based on focus, then render component
      />
      <View>
        // how do I render here?
        // this will render on load, but need to render onFocus
        {renderSearch}
      </View>
    </>
  );
};

You can apply a similar pattern than stackoverflow.com/a/34091564/1839692. For instance you can use an const [searchFocus, setSearchFocus] = useState(false) to display (or not) your component and set this value accordingly in your onFocus, onBlur events. — Raphael Pr
– Raphael Pr, Commented Mar 27, 2020 at 16:58
Does this answer your question? Focus style for TextInput in react-native — Raphael Pr
– Raphael Pr, Commented Mar 27, 2020 at 16:59
Ah got it! yeah it did, thank you! do you want to answer the question? perhaps write a snippet so I can approve? — hellomello
– hellomello, Commented Mar 27, 2020 at 17:46

Raphael Pr · Accepted Answer · 2020-03-27 21:07:18Z

1

You can apply a similar pattern than stackoverflow.com/a/34091564/1839692.

For instance you can try something like :

const SearchScreen = props => {
  const [searchFocus, setSearchFocus] = useState(false)

  const renderSearch = () => {
    return (
      <>
       // need to display the search suggestion
      </>
    )
  }

  return (
    <>
      <TextInput
        placeholder="Search"
        onChangeText={text => handleChange(text)}
        value={searchText}
        onFocus={() => setSearchFocus(true)}
        onBlur={() => setSearchFocus(false)}
      />
      { searchFocus 
        ? <View>
            {renderSearch}
          </View> 
        : <View>
            // Add here the code to display when not searching
          </View>
      }

    </>
  );
};

answered Mar 27, 2020 at 21:07

Raphael Pr

95410 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React native render component based on TextInput onfocus

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related