How to give option to select image only from gallery in react-native-image-picker?

6.3k Views Asked by At

The below code give popup showing camera or choose from gallery. I do not want camera option in this. I want to launch gallery when this function is called. Is there any way to do that?

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

function selectImageFromGallery() {
const options = {
  title: 'Select Avatar',
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};
 
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 if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  } else {
    const source = { uri: response.uri };
  }
});}
3

There are 3 best solutions below

0
On

for get image from gallery use this code :

  var options = {
            title: 'Select Image',
            allowsEditing: false,
            quality:0.9,
            noData: true,
            maxWidth:1200,
            maxHeight:1200,
            mediaType: "photo",
            customButtons: [
              { name: 'customOptionKey', title: 'Choose Photo from Custom Option' },
            ],
            storageOptions: {
                skipBackup: true,
                cameraRoll: false
            },
          };

          ImagePicker2.launchImageLibrary(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 if (response.customButton) {
              console.log('User tapped custom button: ', response.customButton);
              alert(response.customButton);
            } else {
              let source = response;
              // You can also display the image using data:
              // let source = { uri: 'data:image/jpeg;base64,' + response.data };
              this._sendpic(response.uri);
            }
          });

and get image from Camera use this code:


        var options = {
            title: 'Select Image',
            allowsEditing: false,
            quality:0.9,
            noData: true,
            maxWidth:1200,
            maxHeight:1200,
            mediaType: "photo",
            customButtons: [
              { name: 'customOptionKey', title: 'Choose Photo from Custom Option' },
            ],
            storageOptions: {
                skipBackup: true,
                cameraRoll: false
            },
          };

          ImagePicker2.launchCamera(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 if (response.customButton) {
              console.log('User tapped custom button: ', response.customButton);
              alert(response.customButton);
            } else {
              let source = response;
              // You can also display the image using data:
              // let source = { uri: 'data:image/jpeg;base64,' + response.data };
              this._sendpic(response.uri);
            }
          });

for more info see this link: link

0
On

Use launchImageLibrary instead of showImagePicker. It will directly ask gallery option

ImagePicker.launchImageLibrary(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 if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  } else {
    const source = { uri: response.uri };
  }
});
0
On

These are the two lines you need to change in Migrating from 2.x.x to 3.x.x:

// before, 2.x.x
import ImagePicker from 'react-native-image-picker';
ImagePicker.showImagePicker(options , response => {
    ...
});
// after, 3.x.x
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
launchImageLibrary(options , response => {
    ...
});