Style "currentLocationLabel" from react-native-google-places-autocomplete - react-native

Question

I'm using react-native-google-places-autocomplete, and i would like to style currentlocation label to make it a marker icon + text,and i also want to make it visible once in the screen not till clicking on the textinput.
my code looks like this:
export default class VilleC extends React.Component {
render() {
loc = () => {
return(
<View style={{flexDirection:'row',marginLeft:10}}>
<EntypoI color={'grey'} size={20} name={'direction'} />
<Text style={{color:'black',marginLeft:10}}>Autour de moi</Text>
</View>);
}
return (
<View style={{flex:1}}>
<GooglePlacesAutocomplete
placeholder='Où ? (adresse,ville...)'
query={{
key: GOOGLE_PLACES_API_KEY,
language: 'fr', // language of the results
components: 'country:ma',
}}
fetchDetails = {true}
currentLocation={true}
>>>>>>>>>>< currentLocationLabel={// what's in function loc i would like to make it here }
GooglePlacesDetailsQuery = {{
fields: ['geometry']
}}
onPress={(data, details = null) => {console.log(details.geometry.location.lat);
console.log(data.description);
NavigationService.navigate('Résultat',{screen:'Résultats',params:{lien: this.props.route.params.lien, choice: this.props.route.params.choix,lat:details.geometry.location.lat,lng:details.geometry.location.lng,loc:data.description}})
}}
onFail={(error) => console.error(error)}
requestUrl={{
url:
'https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api',
useOnPlatform: 'web',
}} // this in only required for use on the web. See https://git.io/JflFv more for details. // variable styles can t find error
enablePoweredByContainer={false}
styles={{
textInputContainer: {
backgroundColor: 'rgba(0,0,0,0)',
borderTopWidth: 0,
borderBottomWidth: 0,
},
textInput: {
borderRadius:0,
marginLeft: 3,
marginRight: 3,
height: 38,
color: '#5d5d5d',
fontSize: 16,
paddingLeft:20,
shadowColor: "grey",
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 0,
},
elevation: 3,
},
predefinedPlacesDescription: {
color: '#1faadb',
},
}}
/>
</View>
);
}
}
i would really appreciate your help!

Answer 1

You can use the renderRow prop to add an icon to the current location, and you can use the autFocus prop to open the input automatically.
Something like this:
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<GooglePlacesAutocomplete
placeholder="Où ? (adresse,ville...)"
query={{
key: 'GOOGLE_PLACES_API_KEY',
language: 'fr', // language of the results
components: 'country:ma',
}}
autoFocus={true}
fetchDetails={true}
currentLocation={true}
currentLocationLabel="Autour de moi"
renderRow={(row) =>
row.isCurrentLocation ? (
<View style={{ flexDirection: 'row', marginLeft: 10 }}>
<Text>icon</Text>
<Text style={{ color: 'black', marginLeft: 10 }}>
{row.description}
</Text>
</View>
) : (
<Text>{row.description}</Text>
)
}
GooglePlacesDetailsQuery={{
fields: ['geometry'],
}}
onPress={(data, details = null) => {
console.log(details.geometry.location.lat);
console.log(data.description);
}}
onFail={(error) => console.error(error)}
requestUrl={{
url:
'https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api',
useOnPlatform: 'web',
}} // this in only required for use on the web. See https://git.io/JflFv more for details. // variable styles can t find error
enablePoweredByContainer={false}
styles={{
textInputContainer: {
backgroundColor: 'rgba(0,0,0,0)',
borderTopWidth: 0,
borderBottomWidth: 0,
},
textInput: {
borderRadius: 0,
marginLeft: 3,
marginRight: 3,
height: 38,
color: '#5d5d5d',
fontSize: 16,
paddingLeft: 20,
shadowColor: 'grey',
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 0,
},
elevation: 3,
},
predefinedPlacesDescription: {
color: '#1faadb',
},
}}
/>
</View>
);
}
}