I am using react-native-cli
and in my app, react-native-video doesn't work in my page. It shows blank space. I have already run react-native link
command to link libraries and after I have run react-native run-android
command but shows blank space without any error. I am using react-native v 0.48.4 Any help appreciated!!
import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView,Image, Dimensions,Alert } from 'react-native';
import Video from 'react-native-video';
export default class HomeScreen extends Component {
constructor(props) {
super(props);
this.loadStart = this.loadStart.bind(this);
this.onLoad = this.onLoad.bind(this);
this.onProgress = this.onProgress.bind(this);
this.onEnd = this.onEnd.bind(this);
this.onError = this.onError.bind(this);
this.onBuffer = this.onBuffer.bind(this);
this.onTimedMetadata = this.onTimedMetadata.bind(this);
};
loadStart(){
console.log('loadStart');
}
onLoad(){
console.log('onLoad');
}
onProgress(){
console.log('onProgress');
}
onEnd(){
console.log('onEnd');
}
onError(){
console.log('onError');
}
onBuffer(){
console.log('onBuffer');
}
onTimedMetadata(){
console.log('onTimedMetadata');
}
render() {
return (
<View style={styles.container}>
<Image style={styles.logo} source={require('../../images/logo.png')} />
<View style={styles.Body}>
<ScrollView>
<View style={styles.scrollerInner}>
<Video source={require('../../images/tndc-video.mp4')} // Can be a URL {uri:'https://www.w3schools.com/html/mov_bbb.mp4'} or a local file require('').
ref={(ref) => {this.player = ref}}
muted={false} // Mutes the audio entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio.*
repeat={false} // Repeat forever.
playInBackground={false} // Audio continues to play when app entering background.
playWhenInactive={false} // [iOS] Video continues to play when control or notification center are shown.
ignoreSilentSwitch={"ignore"} // [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.
progressUpdateInterval={250.0} // [iOS] Interval to fire onProgress (default to ~250ms)
onLoadStart={this.loadStart} // Callback when video starts to load
onLoad={this.setDuration} // Callback when video loads
onProgress={this.setTime} // Callback every ~250ms with currentTime
onEnd={this.onEnd} // Callback when playback finishes
onError={this.videoError} // Callback when video cannot be loaded
onBuffer={this.onBuffer} // Callback when remote video is buffering
onTimedMetadata={this.onTimedMetadata} // Callback when the stream receive some metadata
style={styles.videoPlayer}
/>
</View>
</ScrollView>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
paddingTop:30,
width:'100%',
},
logo:{
width:260,
height:66,
marginBottom:20,
marginLeft:20,
},
Body:{
width:'100%',
flexGrow:1,
height:30
},
scrollerInner:{
paddingHorizontal:20,
},
title:{
fontSize:30,
color:'#000',
fontWeight:'bold',
marginBottom:12,
},
description:{
fontSize:16,
color:'#000',
marginBottom:20,
},
videoPlayer:{
width:Dimensions.get('window').width,
backgroundColor:'#000',
height:300,
},
});
I think that in your case main issue is with file location. Using require('../../images/tndc-video.mp4')
you are going outside your project folder too look for files. In one of my recent projects I tried to do that for additional js files. You can do that by putting additional folders in webpack config but react packager didn't like that and it wasn't very stable. So "quick fix" for you is to put assets within the project folder like require('./images/tndc-video.mp4')
.
Additional findings
While experimenting with this issue I found a strange way how "require" works. Initially I thought this whole thing was a bundling issue with local assets but actually it's all about file names.
Using your code I got a black screen with the following source
source={require('./assets/google pixel 2 impressions.mp4')}
iOS simulator screenshot with spaces in file name I couldn't embed image, sorry.
But when I changed file name to use underscore instead of space it went well
source={require('./assets/google_pixel_2_impressions.mp4')}
iOS simulator screenshot with _ in file name
I think it might be helpful.
Container source code. I used your styles and helper functions.
<Image style={styles.logo} source={require('./assets/so-logo.png')}//source={{uri:"https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png"}}
/>
<View style={styles.Body}>
<ScrollView>
<View style={styles.scrollerInner}>
<Video
// source={require('../images/mov_bbb.mp4')}
source={require('./assets/google_pixel_2_impressions.mp4')}
// source={require('./assets/google pixel 2 impressions.mp4')}
ref={(ref) => {this.player = ref}}
muted={false}
resizeMode="cover"
repeat={false}
playInBackground={false}
playWhenInactive={false}
ignoreSilentSwitch={"ignore"}
progressUpdateInterval={250.0}
onLoadStart={this.loadStart}
onLoad={this.setDuration}
onProgress={this.setTime}
onEnd={this.onEnd}
onError={this.videoError}
onBuffer={this.onBuffer}
onTimedMetadata={this.onTimedMetadata}
style={styles.videoPlayer}
/>
</View>
</ScrollView>
</View>
</View>
Tested with fresh react-native init
project and react: 16.0.0-beta.5, react-native: 0.49.1, react-native-video: 2.0.0.