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'}}
/>
Related
I am building a project with Next.js and Strapi as CMS, the images are hosted on Cloudinary.
My problem is that the SVG image doesn't display using Image tag from Next.js.
I already read this topic Can't import SVG into Next.js but it's for locally stored images and doesn't seem to work for remote hosted SVG images.
My build is in Gatsby with Forestry.io as CMS and images hosted on cloudinary, but but my issue was solved by adding the fl_sanitize flag mentioned in this article from cloudinary support.
I know this is a bit old but stumbled across this post
I put out a Cloudinary integration for Next.js that wraps the Image component and you're able to handle this nicely
Next Cloudinary: https://next-cloudinary.spacejelly.dev/
Given an asset cloudinary-logo-blue that's uploaded as an SVG:
<CldImage
width="500"
height="96"
src="cloudinary-logo-blue"
format="svg"
/>
Hope this helps!
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.
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-webview which is suggested by React Native documentation. WebView shows white screen when I try to load HTTPS Url in Android. In IoS it works fine. How can I solve it?
Thanks in advance!
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