How to use the react-native-image-picker.showImagePicker function in react-native-image-picker

To help you get started, we’ve selected a few react-native-image-picker examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github transloadit / uppy / examples / react-native / App.js View on Github external
// Permissions.askAsync(Permissions.CAMERA_ROLL).then((isAllowed) => {
    //   if (!isAllowed) return

    //   ImagePicker.launchImageLibraryAsync({
    //     mediaTypes: 'All'
    //   })
    //     .then((result) => {
    //       console.log(result)
    //       if (!result.cancelled) {
    //         this.setState({ file: result })
    //         this.addFile(result)
    //       }
    //     })
    // })

    ImagePicker.showImagePicker({}, (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 
        }

        // You can also display the image using data:
        // const source = { uri: 'data:image/jpeg;base64,' + response.data };
github BrightID / BrightID / old-rn / src / components / SignUp.js View on Github external
getAvatarPhoto = () => {
		// see https://github.com/react-community/react-native-image-picker
		// for full documentation on the Image Picker api

		const options = {
			title: "Select Avatar",
			customButtons: [{ name: "fb", title: "Choose Photo from Facebook" }],
			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 {
				let source = { uri: response.uri };

				// You can also display the image using data:
				// let source = { uri: 'data:image/jpeg;base64,' + response.data };

				this.setState({
					avatarSource: source
github mtford90 / react-native-watch-connectivity / example / app / images.js View on Github external
cancelButtonTitle: 'Cancel',
      takePhotoButtonTitle: 'Take Photo...',
      chooseFromLibraryButtonTitle: 'Choose from Library...',
      cameraType: 'front',
      mediaType: 'photo',
      quality: 0.5,
      allowsEditing: true,
      noData: !data,
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
      ...xtra,
    };

    ImagePicker.showImagePicker(options, response => {
      const { error } = response;
      if (response.didCancel) {
        // Do nothing
      } else if (error) {
        reject(error);
      } else {
        if (data && response.data) {
          let dataUri = 'data:image/jpeg;base64,' + response.data;
          response.dataUri = dataUri;
        }
        resolve(response);
      }
    });
  });
}
github buildreactnative / assemblies / application / components / accounts / RegisterConfirmation.js View on Github external
showImagePicker(){ /* select image from camera roll for avatar */
    ImagePicker.showImagePicker(ImageOptions, (response) => {
      if (response.didCancel || response.error) { return; }
      const avatar = 'data:image/png;base64,' + response.data;
      this.setState({ avatar });
    });
  }
  selectTechnology(technology){
github cometchat-pro-samples / react-native-chat-app / chatApp / src / ChatScreen.js View on Github external
imagePicker(){
        const options = {
            quality: 1.0,
            storageOptions: {
              skipBackup: true,
            },
          };
        ImagePicker.showImagePicker(options, (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 {
                console.log('ImagePicker Response: ',response);
                if(Platform.OS === 'ios' && response.fileName != undefined){
                    var ext = response.fileName.split('.')[1].toLowerCase();               
                    var type = this.getMimeType(ext);
                    var name = response.fileName;
                }else{
                    var type = response.type;
                    var name = 'Camera_001.jpeg';
                }
github strongwray / react-native-demo / nba_news / views / user / user_infor.js View on Github external
_selectPhotoTapped() {
    const options = {
      quality: 1.0,
      maxWidth: 500,
      maxHeight: 500,
      title:'请选择照片',
      takePhotoButtonTitle:'拍照',
      chooseFromLibraryButtonTitle:'从照片库中查找',
      cancelButtonTitle:'取消',
      storageOptions: {
        skipBackup: true
      }
    };
    ImagePicker.showImagePicker(options, (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 {
        var source;
        if (Platform.OS === 'android') {
          source = {uri: response.uri, isStatic: true};
        } else {
          source = {uri: response.uri.replace('file://', ''), isStatic: true};
github blockmason / lndr-mobile / packages / ui / forms / verify-identity / index.tsx View on Github external
return this.governmentPhotoTypeActionSheet.show()
            }
            title = lndrVerified.chooseGovernmentPhoto
        } else if (type === 'selfiePhoto') {
            title = lndrVerified.chooseSelfiePhoto
        } else {
            if (getType) {
                return this.addressPhotoTypeActionSheet.show()
            }
            title = lndrVerified.chooseAddressPhoto
        }
        let options = {
            title,
            storageOptions: { skipBackup: true, path: 'images' }
        }
        ImagePicker.showImagePicker(options, async (response) => {
            if (response.didCancel) {
                console.log('User cancelled image picker')
            } else if (response.error) {
                console.log('ImagePicker Error: ', response.error)
            } else {
                const { uri, data } = response
                const photo = await setKYCImage(uri, data)
                if (type === 'governmentPhoto') {
                    this.setState({ governmentPhoto: photo, generalFormError: undefined })
                } else if (type === 'selfiePhoto') {
                    this.setState({ selfiePhoto: photo, generalFormError: undefined })
                } else {
                    this.setState({ addressPhoto: photo, generalFormError: undefined })
                }
            }
        })
github ricopella / splitz-ease / client / src / pages / App1.js View on Github external
selectPhoto() {
        console.log("Reached me!");
        const options = {
            quality: 1.0,
            maxWidth: 500,
            maxHeight: 500,
            storageOptions: {
                skipBackup: true
            }
        };

        ImagePicker.showImagePicker(options, (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 {
                var source;

                if (Platform.OS === 'android') {
                    source = {
                        uri: response.uri,
                        isStatic: true
                    };
github scorelab / Go-social / app / screens / NewPostScreen / NewPostScreen.js View on Github external
_handleButtonPress = () => {
        ImagePicker.showImagePicker({ title: "Pick an Image", maxWidth: 800, maxHeight: 600 }, res => {
            if (res.didCancel) {
                console.log("User cancelled!");
            } else if (res.error) {
                console.log("Error", res.error);
            } else {
                this.setState({
                    pickedImage: res.uri,
                    imageSelected: true
                });
            }
        });

    };
    reset = () => {
github mhdrare / Shovee-Frontend / src / screens / user / NextDaftar.js View on Github external
handleUpdateImage = async () => {
		const options = {
			noData: true,
			mediaType: 'photo'
		}
		ImagePicker.showImagePicker(options, (response) => {
			if (response.didCancel) {
			    console.warn('User cancelled image picker');
			} else if (response.error) {
			    console.warn('ImagePicker Error: ', response.error);
			} else if (response.customButton) {
			    console.warn('User tapped custom button: ', response.customButton);
			} else {
			    const source = { uri: response.uri }
			    this.setState({
			      imageProfile: source,
			    });
			}
		})
	}

react-native-image-picker

A React Native module that allows you to use native UI to select media from the device library or directly from the camera

MIT
Latest version published 13 days ago

Package Health Score

95 / 100
Full package analysis