useNativeControl with Expo Video component causing app to crash - react-native

Hi I am trying to use video with React Native and came across Expo Video Component (see https://docs.expo.io/versions/v14.0.0/sdk/video.html) and as I am using create-react-native-app to setup my app I thought this would be a good option. However when I add "useNativeControl to my video component it causes my app to crash.
Here is some code with useNativeControl: //displays just the controls for a second and then says "Expo has stopped" before exiting app
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import { Video } from 'expo';
export default class App extends Component {
render() {
return (
<View style={styles.app}>
<Video source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }} rate={1.0} volume={1.0} useNativeControls muted={false} resizeMode="cover" shouldPlay isLooping style={{ width: 300, height: 300 }} />
</View>
);
}
}
Here is the code without it:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import { Video } from 'expo';
export default class App extends Component {
render() {
return (
<View style={styles.app}>
<Header />
<Topics />
<Video source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }} rate={1.0} volume={1.0} muted={false} resizeMode="cover" shouldPlay isLooping style={{ width: 300, height: 300 }} />
</View>
);
}
so as you can see the only difference is the "useNativeControls", without usenativecontrols the app works fine, I just don't have any controls on the video.
Main Question: How can I use native controls and not have my app crash?
Side Note/Question:
Alternatively, is there another video player that is simple to use for beginners of react-native? I have spent a few hours on this but haven't come up with a solution yet. I originally tried react-native-video (https://www.npmjs.com/package/react-native-video), but this did not work for me (and judging from the docs it requires you to make changes to java code which is not something I am looking to do). So if there is an alternative to expo's video component that has controls and works without any java/swift knowledge that is what I am looking for.
Edit:
package.json dependencies:
"dependencies": {
"expo": "^20.0.0",
"link": "^0.1.5",
"react": "16.0.0-alpha.12",
"react-native": "^0.46.4",
"react-native-video": "^2.0.0",
}

Have you ejected/detached your app? That library needs some native code to be added to a project. You cannot use it with plug&play method. Read more about detaching here: https://docs.expo.io/versions/latest/guides/detach.html
Be warned though, it's wild world once you start building an app for yourself. I am there by myself right now and failing wonderfully. I doubt you can find any video player that would not require some native code to be added.

Related

White blank screen when load website WebView React Native

i have a problem when i want to send data of a URL so when you go to the next page your show the spesific url, im using expo cli not react native cli
website.tsx
import React, { useState } from "react";
import { Dimensions } from "react-native";
import { Div, Text } from "react-native-magnus";
import WebView from "react-native-webview";
const Website = ({YOUR_URL}) => {
return (
<WebView
rautomaticallyAdjustContentInsets={false}
source={{uri: YOUR_URL}}
style={{marginTop: 20, height: "100%", width: "100%"}}
onLoad={console.log("Loaded")}
startInLoadingState={true}
javaScriptEnabled={true}
/>
);
};
export default Website;
and this is my button to send the data
<Button w={wp(40)} h={hp(5.5)} ml={hp(2)}
onPress={() => navigation.navigate('Website', {YOUR_URL:data?.external_link})}
// onPress={() => Linking.openURL(data?.external_link)}
>
<Text allowFontScaling={false} fontSize={16} color="#fff">
Selengkapnya
</Text>
if you can help me, thank you very much
For me it worked by passing it precise values for width and height for Webview component and not percentage values. For managing the different display sizes I think you should use "scale".

What is the best way to indicate loading while a video is loading on Expo React Native app?

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;

ReactNative WebView not rendering on web, but works fine on Android

Used versions:
"expo": "^36.0.2",
"react": "16.9.0",
"react-dom": "^16.8.6",
"react-native": "0.61.4",
"react-native-web": "0.11.7",
"react-native-webview": "^8.1.2"
Used React Native code:
<WebView
source={{uri: 'https://www.somedomain.com/'}}
style={{marginTop: 22, flex: 1}}
injectedJavaScript={this.state.contentScript}
domStorageEnabled={true}
startInLoadingState={true}
onMessage={this.receiveMessage}
ref={this.props.webview}
/>
Only a red border is present on the web version meanwhile on the Android it loads fine.
No errors present. Could this be a known issue? But I can't find it reported anywhere.
Currently WebView is not supported by expo-web. Check Platform Compatibility for more information.
But if you want to load your WebView inside expo-web, place it inside iframe as below,
import * as React from "react";
import { View, Platform } from "react-native";
import { WebView } from "react-native-webview";
export default class App extends React.Component {
render() {
return Platform.OS === "web" ? (
<iframe src="https://www.somedomain.com/" height={'100%'} width={'100%'} />
) : (
<View style={{ flex: 1 }}>
<WebView
source={{ uri: "https://www.somedomain.com/" }}
style={{marginTop: 22, flex: 1}}
/>
</View>
)
}
}
Hope this helps you. Feel free for doubts.

React Native: no style on views works when I use react-router / react-router-navigation

Advance, sorry if my english is not the best.
I've not been working on React Native for a very long time and now I have to implement an app with it. I currently use:
Android Studio 3.3
Android 9.0 Api 28
React Native 0.57.8
React Router 4.3.1
React Router Native 4.3.0
React Router Navigation 2.0.0-alpha.10
By the time I added the router, the styles worked like backgroundColor. Since then, the background of the app is only white and no matter which component I can't e.g. do represent a border when I use a view.
Have I might have missed something?
I have already tested the View element at every point. Same result. As I said, before I used React Router, it worked. With the integration of React Native Paper and Redux, there were no problems. I also tried customizing the styles.xml. Although this does work for permanently changing the background color, that's why I still can not put Border in any component. I also tried "component" instead of "render" in the Card component. And also with its own layout component.
App.js
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { Provider as StoreProvider } from 'react-redux'
import { createStore } from 'redux'
import reducers from './reducers'
import { NativeRouter } from 'react-router-native'
import { Navigation, Card } from 'react-router-navigation'
import { Provider as PaperProvider } from 'react-native-paper'
import theme from './assets/js/theme'
import { Login } from './components/Views'
const appStyles = StyleSheet.create({
root: {
backgroundColor: theme.colors.background
}
})
export default App = () => {
return (
<View styles={ appStyles.root }>
<StoreProvider store={createStore(reducers)}>
<PaperProvider theme={theme}>
<NativeRouter>
<Navigation hideNavBar>
<Card
exact
path="/"
render={() => <Login/>}
/>
</Navigation>
</NativeRouter>
</PaperProvider>
</StoreProvider>
</View>
)
}
part of Login.js
const loginStyles = StyleSheet.create({
login: {
width: 400,
height: 400,
borderWidth: 4,
borderColor: theme.colors.error,
borderRadius: 3,
padding: 20,
justifyContent: 'center'
}
})
class Login extends Component {
render() {
console.log('LOGIN')
return (
<View styles={loginStyles.login}>
<Text style={{ color: theme.colors.error, alignSelf: 'center' }}>Test</Text>
</View>
)
}
}
None of it worked. Thanks for help.
I solved it myself. I am now using React Native Router Flux. I am still learning and trying out.

How to change uri value of Video component dynamically

I am working with react native, and I am using a video component from the expo. during this how I can change the value for URI attribute dynamically
(As you mentioned in the comment that you already solved the problem and want to play youtube videos)
You can use WebView to play Youtube video.
Working demo: https://snack.expo.io/Syhzx-VvX
Here is the sample code:
import React, { Component } from 'react';
import { StyleSheet, View, WebView, Platform } from 'react-native';
export default class App extends Component<{}> {
render() {
return (
<View style={{ height: 300 }}>
<WebView
style={ styles.WebViewContainer }
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri: 'https://www.youtube.com/embed/YE7VzlLtp-4' }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
WebViewContainer: {
marginTop: (Platform.OS == 'android') ? 20 : 0,
}
});
Otherwise if you don't want to use WebView, use a third party package like react-native-youtube