CODEWITHSUNDEEP
reactjsreact-nativevideo
sss
sss

Reputation: 11

how to add video in react-native?

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
import Video from 'react-native-video';
const sintel = require('./assets/Bleach - Ending 6 _ My Pace.mp4')
class Hero extends Component {
 render() {
   return (
     <Video source={{ uri: 'https://www.w3schools.com/html/mov_bbb.mp4' }}></Video>
   )
 }
}
const App = () => {
 return (
   <View style={styles.default}>

     <Hero></Hero>
   </View >
 )
}
export default App;

this don't working, i try put the local path in variable, and just , it's not working i try use the other library, but in conclusion i don't have what i want - it's still don't working

Upvotes: 1

Views: 678

Answers (1)

Stefan
Stefan

Reputation: 260

Try adding height and width to your Video component like this:

class Hero extends Component {
  render() {
    return (
      <Video 
        style={{ width: 300, height: 300 }} 
        source={{ uri: 'https://www.w3schools.com/html/mov_bbb.mp4' }} 
      />
    )
  }
}

If there is no content between opening and closing JSX tags or there are no child elements, you can use self closing tag <Hero />.

const App = () => {
 return (
   <View style={styles.default}>
     <Hero />
   </View>
 )
}

Same for Video component:

<Video 
  style={{ width: 300, height: 300 }} 
  source={{ uri: 'https://www.w3schools.com/html/mov_bbb.mp4' }} 
/>

Upvotes: 2

Related Questions