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 8 months ago

Package Health Score

88 / 100
Full package analysis