[FIXED] How can I make the react native paper Searchbar icon act as a button?

Issue

I want to be able to press on the searchbar icon of my search bar and have it acting the same way as if I had pressed on the placeholder of my search bar. So when I press the icon it must show my keyboard, etc... I tried to search on how to do it but I didn't get any result. Here is my current code:

    <View style={{zIndex: 99}}>
      <Searchbar     
      style={{borderRadius: 100, height: 35, backgroundColor: '#FAFAFA', elevation: 0, width: 0, top: 185, left: 180}}
      placeholder='Search post '
      placeholderTextColor='#E0E0E0'
      iconColor="grey"
      fontSize={5}
      />
    </View>

Solution

You can use useRef to achieve this. doc

For Example:

  const ref = React.useRef(null);
  return (
    <View style={{marginTop:100}}>
    <Searchbar
      placeholder="Search post"
      placeholderTextColor='#E0E0E0'
      onChangeText={onChangeSearch}
      value={searchQuery}
      iconColor="grey"
      onIconPress={()=>ref.current.focus()}
      ref={ref}
    />

Try it on expo

Answered By - Sparsh Jain
Answer Checked By - - Robin (ReactFix Admin)