I'm working on a component in which I use react-native-google-places-autocomplete to fetch and display searched address.My code is:
<View style={styles.mainContainer}>
<GooglePlacesAutocomplete
styles={{
textInput: {
fontSize: 20,
flex: 1,
borderBottomColor:"blue"
borderBottomWidth: 3,
},
poweredContainer: {
justifyContent: 'flex-end',
alignItems: 'flex-start',
borderBottomRightRadius: 7,
borderBottomLeftRadius: 7,
borderColor: "#fff",
borderTopWidth: 1
},
row: {
backgroundColor: '#fff',
height: 70,
fontSize: 18,
flexDirection: 'row',
},
separator: {
height: 0.5,
backgroundColor:"gray" },
minLength={2}
placeholder="Enter an address...."
fetchDetails={true}
onPress={(data) => {
setData(data)
}}
query={{
key: googlePlacesAPI,
'country:us', }}
/>
</View>
The issue is that there is no spinner to display when data is fetching. How can I add a spinner so when user starts typing in,spinner displays and when results are fetched, spinner goes away. I've read forum on github and looks like this library doesn't have additional prop for spinner, and I can't figure out myself how to add a spinner. I'm new to react native so any help and suggestion is greatly appreciated.