i was able to retrieve all relevant information from nearby restaurant using google places API, relevant information was also able to mapped into my contents, except for photos. i seem to be having some issues when attempting to convert photos to string, as based on google places, ive to passed photo_reference as a string into the request. i believe i need to convert photo_reference into a string and then passed it down into my image source, cant seem to initiate photo_reference. any idea on how can i passed photo_reference as a string to my image source? thank you
const handleRestaurantSearch = async () => {
const url = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?'
const location = `&location=${initial}`
const radius = `&radius=${radius}`
const type = '&type=restaurant'
const key = `key=${GOOGLE_PLACES_API_KEY}`
const status = '&business_status=OPERATIONAL'
const opening = `&opening_hours={'open_now'= true}`
const restaurantSearchUrl = url + key + location + radius + type + status + opening
fetch (restaurantSearchUrl)
.then(data => {
return data.json()
}).then(jsonData => {
const data = jsonData.results
setDataList(data)
console.log('json: '+JSON.stringify(jsonData.results))
}).catch(error => {
console.log(error)
})
setModalRestaurant(true)
}
by using json.stringify (jsonData.results) the output of jsondata.results will be a string, i found out my photo_reference will be something like this (an example) "photo_reference":"AfLeUgMNN6effeaUHWto2C1k_PGcEoe57LhHy_7rljMNJULAIIbXAOUM3cCmc33LxxgGPxL1Lz9CiAOsJFwFqv6CVvggBoazOnttx8O0fkiLEypkrgDYRKKwgfp4YO7pT3V4twfe_7Ra65I8tJgepaFKf48MGf77TgQySOx7QJnU9dR1Gqgc"
by using this mapping, i was able to get all the ratings, location, name and place_id of those places but not photo_reference
{datalist && datalist.map((element) =>
{return <View style={{marginVertical: 1}}>
<Card elevation={1}>
<Card.Title
id={element.place_id}
title={element.name}
titleNumberOfLines='2'
titleStyle={{fontSize: 14, fontWeight:'bold'}}
subtitle={element.vicinity}
subtitleNumberOfLines='2'
subtitleStyle={{fontSize: 12}}
style={{backgroundColor: '#FBFCF8', borderRadius: 6}}
left={(props) =>
<Image {...props}
style={{height: 50, width: 50}}
source={{uri: `https://maps.googleapis.com/maps/api/place/photo?maxwidth=50&photo_reference=${element.photo_reference}&key=${GOOGLE_PLACES_API_KEY}`}}
/>}
right={(props) =>
<Rating
{...props}
imageSize={10}
ratingCount={5}
startingValue={element.rating}
ratingBackgroundColor="#FBFCF8"
tintColor="#FBFCF8"
style={{paddingRight: 5, backgroundColor: '#FBFCF8'}}
readonly={true}
/>}
/>
</Card>
</View>
})}
i plan to map each places photo into a card. but i couldn't get it done
- tried several solution such as stringify my initial jsonData.results, but it will show error.
- i also tried to passed it as element.photo_reference.toString() in my image source but error
- i also checked my calling method to ensure that is right, by passing the static string photo_reference into my image source photo_reference it will display the photo
- i tried console.log(element.photo_reference) it will display undefined object
- i also tried console.log(jsonData.results.photo_reference) it also display undefined object
