How to use react-native-image-picker - 10 common examples

// 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 };

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

handleImagePicker() {
    this.setState({
      isEmoji: false
    })
    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 {
          // You can display the image using either data...
          //const source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};

          // or a reference to the platform specific asset location

openLibrary() {
        // Open Image Library:
        ImagePicker.launchImageLibrary(options, (response) => {
            // Same code as in above section!
            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: 'data:image/jpeg;base64,' + response.data };
                // console.log('source = ', source);
                this.props.route.params.response(response)

Permissions.request('camera').then(res => {
        switch (res) {
          case "authorized":
            /** 调用系统拍照功能 */
            ImagePicker.launchCamera({}, response => {
              if (response.didCancel) {
                // window.console.log('User cancelled image picker');
              }
              else if (response.error) {
                // window.console.log('ImagePicker Error: ', res.error);
              }
              else if (response.customButton) {
                // window.console.log('User tapped custom button: ', response.customButton);
              }
              else {
                this.setState({
                  headPicture: response.uri
                })
              }
            })
            break;

openCamera() {
        // Launch Camera:
        ImagePicker.launchCamera(options, (response) => {
            // Same code as in above section!
            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: 'data:image/jpeg;base64,' + response.data }
                // console.log('source = ', source)
                this.props.route.params.response(response)

Permissions.request('camera').then(res => {
        switch (res) {
          case "authorized":
            /** 调用系统拍照功能 */
            ImagePicker.launchCamera({}, response => {
              if (response.didCancel) {
                // window.console.log('User cancelled image picker');
              }
              else if (response.error) {
                // window.console.log('ImagePicker Error: ', res.error);
              }
              else if (response.customButton) {
                // window.console.log('User tapped custom button: ', response.customButton);
              }
              else {
                if (ImageData.selectImgList.length < 4) {
                  ImageData.selectImgList.push({
                    uri: response.uri,
                    isSelect: true,
                    filename: response.uri.slice(response.uri.lastIndexOf('/') + 1)
                  })

handleCameraPicker() {
    this.setState({
      isEmoji: false
    })
    // Launch Camera:
    ImagePicker.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);
      }
      else {
        // You can display the image using either data...
        //const source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};

        // or a reference to the platform specific asset location

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);
      }
    });
  });
}

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){