I am trying to use the react-native-youtube component in my expo project. However, I couldn't get it to work. All I have so far is a black screen with red borders. I tried following the video instructions on online however, expo doesn't have an iOS or Android folder, which means I can't open it in XCode and fiddle with it. How can I play youtube videos using expo? As you might have noticed from my question I'm new to react-native using expo.
At the moment, YouTube is not supported by Expo. You can either eject the project and install the react-native-youtube library or load your videos from a WebView like this:
<WebView
style={{flex:1}}
javaScriptEnabled={true}
source={{uri: 'https://www.youtube.com/embed/ZZ5LpwO-An4?rel=0&autoplay=0&showinfo=0&controls=0'}}
/>
For anyone still looking for this, try this package with expo support
https://github.com/LonelyCpp/react-native-youtube-iframe
A wrapper of the Youtube IFrame player API build for react native. Uses the webview player which is known to be more stable compared to the native youtube app.
As the new expo SDK has support for the modern community maintained webview, it should work seamlessly across platforms
The current way to get a YouTube video in a React Native application is to use React Native's WebView component in your project.
Here is a snack that shows an example of how the WebView works using an Instagram signup flow as an example: https://snack.expo.io/HJRKKTmAx.
I'm sorry if that wasn't exactly what you're looking for :(
To use react-native-youtube component you would have to detach your Expo project ExpoKit:
ExpoKit is an Objective-C and Java library that allows you to use the Expo platform and your existing Expo project as part of a larger standard native project — one that you would normally create using Xcode, Android Studio, or react-native init.
More information here: https://docs.expo.io/versions/v18.0.0/guides/detach.html
I hope these two options solve your problem, let me know if theres any other way I can help.
(work only in website)
Install npm i react-player
basic usage
import ReactPlayer from 'react-player'
export default function App() {
return (
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
);
}
Props = https://www.npmjs.com/package/react-player
Related
I have my project in React Native (v0.62.2), and I am using Firebase Dynamic Links (v^12.0.0). I have configured it all as the documentation indicates, but I have a problem:
In iOS, if I use an external dynamic link (such as https://myapp.page.link/ref_TEST) works only if the app is previously downloaded from AppStore. Otherwise, if the app is not downloaded, this link will redirect me to AppStore to download it. But when I open the app after download, I will lose the dynamic link.
Does anyone have a clue about this? I searched a lot, and there are people having this problem but didn't found a solution to it.
Thanks!
I'm using Unity and Google Mobile Ads 8.7.0 to implement ads in my game. I've read Google Prepare for IOS here https://developers.google.com/admob/ios/ios14. But confused where and how to implement the required source codes.
The file states that we should place -void requestIDFA in our XCODE project. Few videos on YouTube has placed the code in their AppDelagate.h script.
But Admobs SDK 8.7.0 dosent include an AppDelagate.h file. Where should I place the -void (requestIDFA) script from Google. Will anywhere suffice or must there be a specific place you implement it.
You're probably the one who asked me on my YouTube video, and I answered you.
However the simplest solution is to use the Unity package iOS 14 Advertising Support, you find it in the package manager.
I have been developed web view in flutter.I don't know clearly which is better
webview_flutter vs flutter_webview_plugin.
In webview_flutter, “Flutter widgets can be shown over the web view.” source
In flutter_webview_plugin, “The webview is not integrated in the widget tree, it is a native view on top of the flutter view. you won't be able to use snackbars, dialogs ...” source
Also, there is keyboard issue so if you intend to use this for OAuth or something, stick with flutter_webview_plugin
Read more on reddit
The webview_flutter is developed by the flutter team and it is the official way to integrate webviews in flutter app.
The flutter_webview_plugin is developed by the flutter community and soon it is going to be merged into the official webview_flutter.
As the two plugins are being merged and after the merger the unofficial plugin is going to be deprecated. So it is safe and my personal opinion to use the official webview_flutter from now on.
Another option is the flutter_inappwebview plugin (I'm the author) other than webview_flutter and flutter_webview_plugin. It's a Flutter plugin that allows you to add an inline webview, use a headless webview, and open an in-app browser window.
Currently, it's the most advanced and feature-rich WebView implementation you can find for Flutter.
You can check the official inappwebview.dev website for more details and documentation!
Also, starting from version 6 (the current latest one is 6.0.0-beta.20), it supports Web and macOS platforms!
I'm using the React Native firebase library for firebase analytics. I wanted to use Google Tag Manager also in my project for iOS application. Is there a way to integrate it into my project while I'm using react-native-firebase?
This link: https://developers.google.com/tag-manager/ios/v5/ gives me an explanation, but it will not work because react-native-firebase uses v5 of firebase library and Google Tag Manager uses v4 of the same library. I've also tried some third party libraries such as React Native analytics bridge, but no success, because it has poor documentation.
Since you have already configured Firebase in your React Native project, implementing GTM is not a big issue. I am using this package https://www.npmjs.com/package/react-native-gtm in my application. It works perfectly, just follow the link along with the extra steps for iOS.
Note :
Just install react-native-gtm using npm, do not link it.
And yes, there is no proper documentation related to Google Tag
Manager in React Native, most of the articles focus on Native
implementation alone.
I'm building an app for iOS and android using sencha touch 2.3.1 (using sencha architect 3 as my IDE if that's useful to know) and I want to be able to play video inline, as opposed to an embedded video that opens up the native video player after the user taps on it. A perfect example of the functionality I'm after would be the Vine app (at least for iOS, I haven't looked at it on android), videos simply play right there on the page without the native iOS video player taking over.
I'm aware of the allowsInlineMediaPlayback property of UIWebView, but I have no clue how to set that, or even whether I can, since I'm not building a native app in xcode (in fact I have no experience doing so, this is my first attempt at building any sort of mobile application).
How do you plan to package your application to run on a mobile device? The html/js/css what you are creating needs to be packaged on some way to have a mobile app. You can use sencha cmd for that but phonegap is sort of more popular for that. If you will use phonegap then you can set this in the config.xml. See http://docs.phonegap.com/en/2.2.0/guide_project-settings_ios_index.md.html
I managed to get this working by installing cordova on my machine, then running the
sencha cordova init
command on my sencha project folder. After that I simply made sure allowsInlineMediaPlayback was set in my cordova config and that my video tag/object in Architect had the webkit-playsinline attribute set to "1".
If you're interested I am still able to continue my normal development and build workflow in Architect (Architect is now compatible with Cordova, though make sure you add
{
"path": "cordova.js",
"remote": true
}
to your app.json manually. Note you only need that entry in the js section of your app.json and DO NOT NEED THE ACTUAL CORDOVA.JS FILE TO BE IN YOUR PROJECT FOLDER, Architect will handle this when you run your build command).