here is the detail:-
I generated my react native expo project using the command line npx expo-cli init youtube
then I refered to this link:- https://www.npmjs.com/package/react-native-youtube
I installed the react-native-youtube dependencies using the command:- npm i react-native-youtube
I also got my official youtube API from https://developers.google.com/youtube/android/player/register
In App.js file the below are the codes written
`import React from 'react'
import {View,StyleSheet,Text,SafeAreaView} from 'react-native'
import YouTube from 'react-native-youtube';
const App=()=>{
const linkTest="https://www.youtube.com/watch?v=aqz-KE-bpKQ"
return (
<SafeAreaView style={styles.container}>
<YouTube
apiKey="*******************"
videoId={linkTest} // The YouTube video ID
play // control playback of video with true/false
fullscreen // control whether the video should play in fullscreen or inline
loop // control whether the video should loop when ended
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
style={{ alignSelf: 'stretch', height: 300 }}
/>
</SafeAreaView>
)
}
const styles= StyleSheet.create({
container:{ backgroundColor:"white", flex:1},
})
export default App
After this, in my cmd I ran :- npm start
Scanned the QRCode and opened the App in my EXPO App in my mobile
the following is the screenshot of the error I got
Click here for show larger image:
Click here for show larger image:
Click here for show larger image:
The below picture are screenshots of project running on expo on android platform or mobile:
Click here for show larger image:
module 'react-native-youtube' doesnt support youtube link. Rather than that use
<WebView
style={ styles.styleCode }
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri: 'https://www.youtube.com/embed/dFKhWe2bBkM' }}
/>
Find the youtube uri from ( share > embed ).
Related
I'm trying to use expo-image-picker in my React Native application for a user to choose the image and crop it by zooming in or out. All works well on iOS simulator, but same feature doesn't work on Android simulation as well as on Android device.
I couldn't find any place in the documentation that says explicitly that this feature doesn't work on Android, so I'm assuming that I've omitted something. To test the feature I'm using the example from Expo docs (as below, link: https://docs.expo.dev/versions/latest/sdk/imagepicker/?redirected)
If this is not possible using expo-image-picker, are there any alternatives for Expo that would work on Android?
import React, { useState, useEffect } from 'react';
import { Button, Image, View, Platform } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
export default function ImagePickerExample() {
const [image, setImage] = useState(null);
const pickImage = async () => {
// No permissions request is necessary for launching the image library
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
console.log(result);
if (!result.canceled) {
setImage(result.assets[0].uri);
}
};
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Pick an image from camera roll" onPress={pickImage} />
{image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
</View>
);
}```
I am trying with react native web view and connected the embed link. Url opens the finger print authenticator when using webpage. But after connecting to react native it never opens the fingerprint authentication part. How can I get the finger print authentication by app calling phone framework
import React,{useState} from 'react'
import{View,Text,StyleSheet} from 'react-native'
import{WebView} from 'react-native-webview'
const App=()=> {
//const {url,setUrl} =useState("https://www.google.com/");
return(
<View style={styles.Container}>
<WebView
source={{uri:"https://whatpwacando.today/authentication"}}
onLoadEnd={(events)=>{
const{nativeEvent}=events;
console.log(nativeEvent.loading)
}}
onLoad={(events)=>{
const{nativeEvent}=events;
console.log(nativeEvent.loading)
}}
javaScriptEnabled={true}
thirdPartyCookiesEnabled={true}
/>
</View>
)
}
export default App
const styles= StyleSheet.create({
Container:{
flex:1,
}
})
I wanted to ask what would be the best way to handle loading for videos on Expo / React Native.
Expo has good documentation on the Video and AV components to handle video / audio:
https://docs.expo.io/versions/latest/sdk/video/
https://docs.expo.io/versions/latest/sdk/av/
I've tried two things so far: '
Using posterSource in a Video component. The problem here is that the poster image doesn't format properly.
This is what my Video component looks like:
const videoStyle = { width: '100%', height: '100%', display: display};
return (
<Video
ref={playbackObject}
source={{uri: source}}
posterSource={require('path/to/file')}
rate={1.0}
volume={1.0}
isMuted={isMuted}
resizeMode="cover"
usePoster={true}
shouldPlay={shouldPlay}
onPlaybackStatusUpdate={_onPlaybackStatusUpdate}
progressUpdateIntervalMillis={50}
isLooping
style={videoStyle}
posterStyle={videoStyle}
>
</Video>
)
I’ve also tried using playbackStatus to see if the video is loaded or buffering and have an activity indicator when the video is loaded or buffering, but because I use states, there is some lag.
My implementation for (2) looks like this:
const [loaded, setLoaded] = useState(false);
const _onPlaybackStatusUpdate = playbackStatus => {
if(playbackStatus.isBuffering){
if(loaded){
setLoaded(false);
}
} else {
if(!loaded){
setLoaded(true);
}
}
}
If loaded = true, we do not show an activity indicator. Else, we do show an activity indicator. The main problem here is there is a lag, which is not great UI.
So with that in mind, what would be people’s recommendation of handling loading for videos? Thanks!!
What you can do is to render an <ActivityIndicator /> as background and when it finishes loading the asset, it will get behind the video (or you could just check if the asset was loaded or not -> optionally rendering it inside <Video />.
<Video
ref={handleVideoRef}
>
<ActivityIndicator size="large" />
</Video>
const handleVideoRef = async component => {
const playbackObject = component;
if (playbackObject) {
await playbackObject.loadAsync(
{ uri: currentVideoURI },
);
}
};
here's my solution for that :
Video component has onLoadStart and onReadyForDisplay props, which indicate when the loading starts and when it's finished.
So we could create a custom component, which would support loading indicator using the Video component imported from expo. So in the end, this would looksomething like this :
import React, {useState} from "react";
import { ActivityIndicator } from "react-native";
import { Video } from "expo-av";
const AppVideo = ({style, ...rest}) => {
return (
<View style={style}>
{isPreloading &&
<ActivityIndicator
animating
color={"gray"}
size="large"
style={{ flex: 1, position:"absolute", top:"50%", left:"45%" }}
/>
}
<Video
{...rest}
onLoadStart={() => setIsPreloading(true)}
useNativeControls
onReadyForDisplay={() => setIsPreloading(false)}
resizeMode="contain"
isLooping
/>
</View>
);
}
export default AppVideo;
I`m New programmer.
I want to show some image in react-native but I can't.
my Url is working fine in browser and show image. Another Url is working fine in my Image Component,
but whenever I want to load this Image, It`s failed Load
this Image
this image is shown when I connected to wifi, but whenever I connected to mobile data, not show.
my code is here:
import React from 'react';
import { Image } from 'react-native';
const App = () => {
return (
<Image
style={{ resizeMode: 'cover', width: '100%', height: '100%' }}
source={{
uri:
'https://scontent.xx.fbcdn.net/v/t51.2885-15/81029992_467176754190207_4901390856020107347_n.jpg?_nc_cat=102&_nc_sid=8ae9d6&_nc_ohc=H6AtyKWx0U0AX95qU2t&_nc_ht=scontent.xx&oh=7ad928f323a8c64e81a4e8abe3dd5142&oe=5E9F51E6',
}}
/>
);
};
export default App;
Can Any One Help me, please?
I have tried to display the same image in one of my react-native projects. I am able to display it you can check attached image for the same. It took some time to display but it displayed at last.
You can try onError to see if you are getting any error or not.
<Image
onError={e => {
let tempData = { ...this.state.userData }
tempData.imageUri = ''
this.setState({ userData: tempData })
}}
style={ProfileStyle.profileImageStyle}
borderRadius={50}
source={
{ uri: 'https://scontent.xx.fbcdn.net/v/t51.2885-15/81029992_467176754190207_4901390856020107347_n.jpg?_nc_cat=102&_nc_sid=8ae9d6&_nc_ohc=H6AtyKWx0U0AX95qU2t&_nc_ht=scontent.xx&oh=7ad928f323a8c64e81a4e8abe3dd5142&oe=5E9F51E6' }}
defaultSource={constant.completeProfile.userPlaceHolder}
/>
I am trying to display a video in react-native. But having some issues. 'till now this what I did: I install react-native-video. and also linked it.
And this is the codes:
import React, {Component} from 'react';
import {
AppRegistry,
Platform,
StyleSheet,
Text,
View,
ScrollView,
TouchableOpacity,
Button,
Alert} from 'react-native';
import Video from 'react-native-video';
export default class App extends Component<Props> {
Open() {
}
render() {
return (
<View style={styles.container}>
<Text>
Open the video
</Text>
<Button
onPress={this.Open}
title="Press Me"
/>
<Video
source={{ uri:"https://www.youtube.com/watch?v=HIB8RBhPkBA"}}
resizeMode={"cover"}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor : 'white',
alignItems: 'center',
justifyContent: 'center'
},
});
There is no error in the emulator. But also there is no video too. Is there anything that I did wrong about setup?
unfortunately, react-native-video will not work since the source uri is a link to the youtube page. unless you can procure the video as an asset and append its extension to its url (...video.mp4), it should work. see this.
for a quick fix, you can use the webview component to embed the link.
For displaying youtube videos, you can use this package instead
react-native-youtube
API
import YouTube from 'react-native-youtube'
<YouTube
videoId="KVZ-P-ZI6W4" // The YouTube video ID
play={true} // control playback of video with true/false
fullscreen={true} // control whether the video should play in fullscreen or inline
loop={true} // control whether the video should loop when ended
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
style={{ alignSelf: 'stretch', height: 300 }}
/>
For getting the youtube id from the url, you can use
var video_id = window.location.search.split('v=')[1];
var ampersandPosition = video_id.indexOf('&');
if(ampersandPosition != -1) {
video_id = video_id.substring(0, ampersandPosition);
}