React-native-image-crop-picker: Allow user to decide between camera and gallery?

Created on 19 Jul 2020  路  2Comments  路  Source: ivpusic/react-native-image-crop-picker

I'm sure this has been asked before but I couldn't find it. Is there a way to combine openPicker and openCamera easily, like how react-native-image-picker's' showImagePicker works? If not, can anyone recommend an easy way to interface with react-native-image-picker?

Most helpful comment

react-native-image-picker doesn't open camera or gallery for custom buttons, so I used those to get the desired behavior by letting react-native-image-crop-picker open the camera and gallery. Here's what I came up with:

import ImagePicker from "react-native-image-picker"
import ImageCropPicker from "react-native-image-crop-picker"

ImagePicker.showImagePicker(
  {
    title: "Select Profile Picture",
    mediaType: "photo",
    storageOptions: {
      cameraRoll: false,
      privateDirectory: true,
    },
    takePhotoButtonTitle: null, // Remove this button
    chooseFromLibraryButtonTitle: null, // Remove this button
    customButtons: [
      { name: "camera", title: "Take Photo..." },
      { name: "gallery", title: "Choose from Library..." },
    ],
  },
  async (response) => {
    if (response.didCancel) {
      console.log("User cancelled image picker.")
    } else if (response.error) {
      console.log("ImagePicker error: ", response.error)
    } else if (response.customButton === "camera") {
      const image = await ImageCropPicker.openCamera({   ...   })
    } else if (response.customButton === "gallery") {
      const image = await ImageCropPicker.openPicker({   ...   })
    }
  }
)

All 2 comments

Seems this is a duplicate of #1193. Leaving it open for now, in case anyone has any workarounds or advice.

react-native-image-picker doesn't open camera or gallery for custom buttons, so I used those to get the desired behavior by letting react-native-image-crop-picker open the camera and gallery. Here's what I came up with:

import ImagePicker from "react-native-image-picker"
import ImageCropPicker from "react-native-image-crop-picker"

ImagePicker.showImagePicker(
  {
    title: "Select Profile Picture",
    mediaType: "photo",
    storageOptions: {
      cameraRoll: false,
      privateDirectory: true,
    },
    takePhotoButtonTitle: null, // Remove this button
    chooseFromLibraryButtonTitle: null, // Remove this button
    customButtons: [
      { name: "camera", title: "Take Photo..." },
      { name: "gallery", title: "Choose from Library..." },
    ],
  },
  async (response) => {
    if (response.didCancel) {
      console.log("User cancelled image picker.")
    } else if (response.error) {
      console.log("ImagePicker error: ", response.error)
    } else if (response.customButton === "camera") {
      const image = await ImageCropPicker.openCamera({   ...   })
    } else if (response.customButton === "gallery") {
      const image = await ImageCropPicker.openPicker({   ...   })
    }
  }
)
Was this page helpful?
0 / 5 - 0 ratings

Related issues

equesteo picture equesteo  路  3Comments

aterribili picture aterribili  路  3Comments

victorwpbastos picture victorwpbastos  路  3Comments

cwRichardKim picture cwRichardKim  路  3Comments

manojshrimalla picture manojshrimalla  路  3Comments