how to show videos and images with react-native-image-picker in react native

Question

import ImagePicker from 'react-native-image-picker';
   const options = {
      title: 'Select Image',
      takePhotoButtonTitle:'take a photo',
      chooseFromlibraryButtonTitle:'choose from gallery',
      quality:1 
    };

    class Upload extends Component <{}>{
        static navigationOptions = { header: null }

        constructor(){
            super()
            this.state ={
                ImageSource:null
            }
        }
        selectPhoto(){
                    ImagePicker.showImagePicker(options, (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 {
                let source = { uri: response.uri };  
                this.setState({
                  ImageSource: source,
                });
                }
                });
        }

1. how to show videos with image in react native and by using video soucr uri state still only shows the image 2.and if using mediatypes all still is shows the image how to fix this

Answer 1

Are you developing for Android/iOS/Both? Looks like you have to specify mediaType={mixed} for iOS and you'll have to specify whether you want to see video or images for Android.

Answer 2

Here you go

   ImagePicker.showImagePicker({
        title: 'Choose Image or Video',
        customButtons: [{ name: 'image', title: 'Take a Photo' },{ name: 'video', title: 'Take a Video' }],
        chooseFromLibraryButtonTitle: null,
        takePhotoButtonTitle: null,
    }, (res) => {
        if(res.customButton ){
            ImagePicker.launchCamera({
                mediaType: res.customButton,
                videoQuality: 'high',
                quality: 1,
            }, (response) => {
                // Same code as in above section!
            });
        }
    });

Answer 3

const selectGalleryMedia = async () => {
    const options = {
      title: "Select Images/Videos",
      mediaType: "mixed",
      selectionLimit: 0,
      storageOptions: {
        skipBackup: true,
        path: "images",
      },
    };
    launchImageLibrary(options, (res) => {
      console.log("Response = ", res);
    });
  };