Showing Video in react-native IOS Application

Question

New to react-native. Serving data via internal API. I'm attempting to render videos in the app. To do this, it seems that most people either use react-native-video (which is what I'm currently trying to do) or use the built-in WebView component.

I'm having trouble getting access to the component. I installed react-native-video and linked it via rnpm per the setup instructions. I included it in the project like several other apps I found that were using it did:

import Video from 'react-native-video';

When I try to use

<Video source={{uri: video.url}} />

I have seen a couple different errors in the iOS simulator, but currently seeing Cannot read property 'Constants' of undefined. When I remove the <Video /> tag I don't get the error. Haven't been able to figure out what I'm doing wrong in terms of setup. So my questions are essentially (1) is this even how I should be trying to include video with react-native and (2) assuming that it is, what am I doing wrong.

Please let me know if additional information is needed. Very new to react-native.

UPDATE: solved error by uninstalling and reinstalling.

did you get react-native-video working on the simulator? or do you need to test it on the device itself? — diehell
– diehell, Commented Aug 25, 2016 at 9:20
Can i get an example of your code @toddmetheny? I tried to get it to work on the index just to see whether it works but to no avail. — diehell
– diehell, Commented Aug 29, 2016 at 0:47
Sure--at this point we've added a lot of complexity to it. Did you try running their example in a new project? — toddmetheny
– toddmetheny, Commented Aug 29, 2016 at 0:48
I'm on my phone right now but I'll ping you tomorrow from my computer. — toddmetheny
– toddmetheny, Commented Aug 29, 2016 at 0:49

Sagar Kachhadiya · Accepted Answer · 2019-07-09 16:39:49Z

install this three command

1:- react-native-element

2:- react-native-vector-icons

3:- react-native-video

and after run:- react-native link

 import React, { Component } from 'react'; import { StyleSheet, View, TouchableOpacity, } from 'react-native'; import { Icon } from 'react-native-elements'; import Video from 'react-native-video'; export default class App extends Component { state = { rate: 1, volume: 1, muted: false, resizeMode: 'contain', duration: 0.0, currentTime: 0.0, paused: true, }; video: Video; onLoad = (data) => { this.setState({ duration: data.duration }); }; onProgress = (data) => { this.setState({ currentTime: data.currentTime }); }; onEnd = () => { this.setState({ paused: true }) this.video.seek(0) }; onAudioBecomingNoisy = () => { this.setState({ paused: true }) }; onAudioFocusChanged = (event: { hasAudioFocus: boolean }) => { this.setState({ paused: !event.hasAudioFocus }) }; renderVideoView = () => { const { fullScreen } = styles; return ( <Video ref={(ref: Video) => { this.video = ref }} source={require('Your Video Url OR Path Hear')} style={fullScreen} rate={this.state.rate} paused={this.state.paused} volume={this.state.volume} muted={this.state.muted} resizeMode={this.state.resizeMode} onLoad={this.onLoad} onProgress={this.onProgress} onEnd={this.onEnd} onAudioBecomingNoisy={this.onAudioBecomingNoisy} onAudioFocusChanged={this.onAudioFocusChanged} repeat={false} /> ) } render() { return ( <View style={styles.container}> {this.renderVideoView()} <TouchableOpacity onPress={() => this.setState({ paused: !this.state.paused })}> { this.state.paused == true ? <Icon name='caretright' type='antdesign' color='#09548c' /> : <Icon name='pause' type='Foundation' color='#09548c' /> } </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, fullScreen: { width: '100%', height: 233, }, });

Collectives™ on Stack Overflow

Showing Video in react-native IOS Application

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related