How to add multiple image using react native image picker

user_8322669 0
Viewed 32002

I am building a simple social media Application. The User can add status, location, video from youtube, and photos. But I had a problem uploading multiple images using react native image picker. I have read the documentation but I don't know how to fix the problem

Here's my function code

onPhotoPress() {
 const options = {
  quality: 1.0,
  maxWidth: 50,
  maxHeight: 50,
  storageOptions: {
    skipBackup: true,
  },
};
ImagePicker.launchImageLibrary(options, openPicker(), (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled photo 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: `data:image/jpeg;base64,${response.data}` };

    this.setState({
      avatarSource: source,
      name: response.fileName,
      data: response.data,
      type: response.type,
      path: response.uri,
    });
  }
 });
}

This my code for view images

         {this.state.avatarSource !== null ?
          <Image
            source={this.state.avatarSource}
            style={{
              flex: 1,
              resizeMode: 'contain',
              marginVertical: 12,
            }}
          /> : <View /> }

This is picture for upload single image enter image description here

so Can you help me, to get multiple image or give me advice another library i should use to solve my problem

react-native
3 Answers
100% Sure this is working

use the library for multiple images selection and upload 
react-native-image-crop-picker

import ImagePicker from 'react-native-image-crop-picker';


  takePics = () => {
    ImagePicker.openPicker({
      width: 200,
      height: 200, compressImageMaxHeight: 400,
      compressImageMaxWidth: 400, cropping: true, multiple: true
    })
      .then(response => {
        let tempArray = []
        console.log("responseimage-------" + response)
        this.setState({ ImageSource: response })
        console.log("responseimagearray" + this.state.ImageSource)
        response.forEach((item) => {
          let image = {
            uri: item.path,
            // width: item.width,
            // height: item.height,
          }
          console.log("imagpath==========" + image)
          tempArray.push(image)
          this.setState({ ImageSourceviewarray: tempArray })
          // console.log('savedimageuri====='+item.path);

          console.log("imagpath==========" + image)
        })

      })

  }
user_114086620

if you wish to add multiple images either try multi-picker or make recursive calls on response after image is selected in this module. Show a popup to user to add more images and add all images to a list.

user_59562130
Related