How to show Video using react-native-image-picker

Question

I'm using react-native-ImagePicker for selecting video's from my phone . so i used the below code ,

const options = {
      title: 'Video Picker', 
      mediaType: 'video', 
      storageOptions:{
        skipBackup:true,
        path:'images'
      }
};

The problem here is i can able to record/Select the video , i cant able to show that inside a <View> . I searched many sites and almost spend 5 hours in this but still am not able to find the solution for that . Can someone help/clarify me from this . Code reference from this git_hub site .

score 2 · Answer 1 · answered Aug 29 '19 at 09:34

import ImagePicker from 'react-native-image-picker';
import Video from 'react-native-video';

class MyComponent extends Component{

constructor(props){
  super(props);

 this.state = {
     videoSource:'',
   };
}

const options2 = {
  title: 'Select video',
   mediaType: 'video',
  path:'video',
  quality: 1
};


selectVideo = () => {


ImagePicker.showImagePicker(options2, (response) => {
console.log('Response = ', response);

if (response.didCancel) {
  console.log('User cancelled image picker');
} else if (response.error) {
  console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
  console.log('User tapped custom button: ', response.customButton);
} else {
  const source = { uri: response.uri };


  this.setState({videoSource: source})


}
});


}

render(){
return(

<View>

    <Video source={this.state.videoSource}   // Can be a URL or a local file.
           ref={(ref) => {
             this.player = ref
           }}                                      // Store reference
           onBuffer={this.onBuffer}                // Callback when remote video is buffering
           onError={this.videoError}               // Callback when video cannot be loaded
           style={styles.backgroundVideo}
           controls={true}
           fullscreen={true}
           style={styles.uploadImage} />


    <Button small primary onPress={this.selectVideo}>
      <Text>Select Video</Text>
    </Button>



</View>

);
}



}

Hi bhargav Patel, give some context to your answer to help other to understand better — red, Aug 29 '19 at 09:37
Ohh, great man, you saved my week, it works fine with small modifications — Deepak N, Sep 27 '19 at 13:48

Alexander Vitanov · Answer 2 · 2017-10-16T23:51:23.087

1

You can use this package and pass it the uri which you retrieve from image picker like so:

ImagePicker.launchCamera(options, (response)  => {
    const uri = response.uri
});

Example:

ImagePicker.launchCamera(options, (response)  => {
    const uri = response.uri
    this.setState({ uri })
});

 ...

<View style={{ flex: 1 }}>
   <Video source={{uri: this.state.uri}}
</View>

edited Oct 16 '17 at 23:51

answered Oct 16 '17 at 15:34

Alexander Vitanov

4,074
2
19
22

Tnx for your reply bro . Can you pls show me that with a Example , like render them inside a ?? – Beckham_Vinoth Oct 16 '17 at 16:31
when i tried the above Link , i got error - - > "invariant Violation" error bro !! – Beckham_Vinoth Oct 16 '17 at 16:32
`ImagePicker.launchCamera(options, (response) => { let source = { uri: response.uri }; this.setState({ avatarSource: source }); }); ... – Samiksha Jagtap Dec 22 '17 at 10:14

How to show Video using react-native-image-picker

2 Answers2