I am developing mobile app using React Native Expo. I am using react-native-google-places-autocomplete for text auto completetion of location/places. It is Google API. I have made account, enabled the google service and also added my billing info. But the code is not working .
See the code below:
<View style={{height: 500}}>
<GooglePlacesAutocomplete
fetchDetails={true}
placeholder='Search'
onPress={(data, details = null) => {
console.log(data, details);
}}
query={{
key: 'my-api-key-here',
language: 'en',
}}
/>
</View>
I am able to SUCCESSFULLY see the Search placeholder where I can type, but I am not able to see the suggestions/autocompletion text by google. I am able to type the location successfully in the box, but there is no location suggestions coming by google.
I have installed and imported relevant libraries too.
You need to add prop listViewDisplayed={boolean or "auto"}. See this link https://snack.expo.io/#tobzy/react-native-google-places-autocomplete-example
Had this happen to me too. Just had to add flex: 1 to my View as I didn't provide any height styling like OP.
Related
I am trying to add a google maps to my page in a React app with a pin dropped on a location.
All works fine when I hardcode the APIKEY in to the component like,
bootstrapURLKeys={{ key:
'<api=key'
}}
but when I put the API Key in a .env file, it doesnt work (I know .env files aren't totally secure as the key can be read in the dev tools on google, but I am not overly worried about that at the moment.)
so far I have this in my Map component,
<GoogleMapReact
bootstrapURLKeys={{ key:
`${process.env.REACT_APP_GOOGLE_API_KEY}`
}}
defaultCenter={location}
defaultZoom={zoom}
>
I have console.log(${process.env.REACT_APP_GOOGLE_API_KEY}) and it logs as expected. But when I run the app I get an error,
util.js:66 Google Maps JavaScript API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key
in my .env file I have,
REACT_APP_GOOGLE_API_KEY=<api=key>;
I solved this. I didnt need ; in the .env file as it was adding this to the api key which is why google was saying it was invalid
I've checked several similar topics in Stackoverflow but I didn't find my answer.
I have this component which is meant to show profile images in my app. I am serving images in my node server and it works just fine in the browser. It means when I open the link with the browser image is shown in my browser. it also works fine with my react web app.
in the react native app it is not shown, though.
I tested some other links from different sources and it works fine.
But the image links from my API end does not work in the react native.
<Image source={{
uri: 'https://mentalwill.xyz/API/ProfileImages/21190169ANDREW-NG.jpg' ,
}} style={styles.profileImage} />
and the style:
profileImage:{
width: 200,
height:200,
borderRadius:100,
marginTop:50
}
I'm using react-native, and everything was working well while I was developing, but, when I built the APK (using this tutorial: https://facebook.github.io/react-native/docs/signed-apk-android.html#content) and installed it on my device,
the flat list don't show any data
everything is working well the login screen connect to api the loged in
so the api work well
so why the flatlist don't show any data
. Did anybody had the same issue?
componentDidMount() {
this.props.getCoffeeCategory()
}
//flatlist code
<FlatList
style={{ flex: 1 }}
showsHorizontalScrollIndicator={false}
horizontal={true}
data={this.props.data}
renderItem={this._renderListItem}
keyExtractor={item => item.id}
/>
this is work with me
https://stackoverflow.com/a/56801525/7483108
In my case, I call api with non secure (http instead of https). So api work well for debug environment, but not work for release. You can add this line
android:usesCleartextTraffic="true"
to AndroidManifest.xml
like that
<uses-permission android:name="android.permission.INTERNET" />
<application
...
android:usesCleartextTraffic="true"
...
I am building an app where user will be able to play facebook videos from urls that I will provide.
Is there a way to embade facebook videos in react-native from url?
I have tried using react-native-video, react-facebook-player
React-facebook-player only works in react app. In react-native it gives an error that can not resolve div.
Can I wrap react-facebook-player component within Webview?
If so how can I do that?
Use react-native-webview
eg:
<WebView
style={{height: videoHeight}}
source={{uri: 'https://www.facebook.com/video/embed?video_id=VIDEOID HERE'}}
/>
I have a issue in webview not being able to set cookies on iOS.
Am implementing third party payment gateway in a webview And when the user got redirected to the result page, i got a message saying that "cookies are not enabled in the browser "
So how to enable cookies in webview on iOS?
In react native webview cookies are default enable please check following link https://facebook.github.io/react-native/docs/webview.html
thirdPartyCookiesEnabled?: bool
Boolean value to enable third party cookies in the WebView.
Used on Android Lollipop and above only as third party cookies are enabled by
default on Android Kitkat and below and on iOS. The default value is true.
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
thirdPartyCookiesEnabled : true
/>
Use property sharedCookiesEnabled={true} in webView.
Its working in myCase