How to change Google-Places-Autocomplete TextInput border Radius dynamically when suggestions are displayed belowe the search bar

Question

I'm implementing Google Places Autocomplete API in my project and I styled the search bar (TextInput) with borderRadius. What I'd like to do is change the borderRadius not when the TextInput is not being used, not when it is focused, only when a suggestion list appears after typing in text.

Here's how it looks at the moment:

TextInput borderRadius with list suggestion

Here's the code:

   import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';

   export default function App() {

   return(

     <GooglePlacesAutocomplete  
        fetchDetails={true} // you need this to fetch the details object onPress
        minLength={2}
        placeholder="Search for a place"
        query={{
           key: "YOUR_API_KEY",
           language: "en", // language of the results
           type:"(regions)" 
        }}

       onPress={(data, details= null) => {
           console.log(details);
        }}

      onFail={(error) => console.error(error)} 

      styles={{
        textInputContainer:{  
   
           width: '90%,                  
        },
        textInput: {

           borderTopLeftRadius:0,
           borderBottomLeftRadius:0,
           paddingVertical: 16,
           paddingHorizontal: 16,
           borderRadius: 20,                      // borderRadius here 
           color: 'black',
           fontSize: 16,
           height:50,
           left:
       },}}


      /> 
    );
    }

How can I change the borderRadius dynamically so that borderBottomLeft and borderBottomRight become 0 when a suggestion list appears below the search bar?

Answer 1

Take one state variable:

const [isSuggestions,setIsSuggestions]=useState(false)

now whenever you got suggestions then do this

setIsSuggestions(true)

then in style:

borderRadius: isSuggestions ? 0 : 20