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

To help you get started, we’ve selected a few react-native-image-crop-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 BrightID / BrightID / BrightID-rn / src / components / OnboardingScreens / SignUp.js View on Github external
width: 180,
      height: 180,
      includeBase64: true,
      // compressImageQuality: 0.2,
      mediaType: 'photo',
    };
    // loading UI to account for the delay after picking an image
    setTimeout(
      () =>
        this.setState({
          imagePicking: true,
        }),
      1000,
    );

    ImagePicker.openPicker(options)
      .then((image) => {
        const imageData = { uri: `data:${image.mime};base64,${image.data}` };
        this.setState({
          userAvatar: imageData,
          imagePicking: false,
        });
        setTimeout(
          () =>
            this.setState({
              imagePicking: false,
            }),
          1001,
        );
      })
      .catch((err) => {
        console.log(err);
github reactnativecomponent / react-native-chat-demo / src / screens / Chat.ios.js View on Github external
handleCameraPicker = () => {
    ImagePicker.openCamera({
      mediaType: 'photo',
      loadingLabelText: '请稍候...',
    }).then(image => {
      NimSession.sendImageMessages(image.path, 'myName')
    })
    // ImagePicker.openPicker({
    //     mediaType:'video',
    //     loadingLabelText:'请稍候...'
    // }).then((video) => {
    //     console.log(video);
    //     NimSession.sendVideoMessage(video.path, 'duration', 'width', 'height', 'displayName');
    // });
  }
  onLocation = (coordinate) => {
github mongrov / roverz / src / chat / ui / room / RoomView.js View on Github external
.then((images) => {
      console.log('LogOut - imagemap', this._network.service.loggedInUser);
      console.log('PM - images', images);
      if (images && images.length > 0) {
        if (images.length === 1 && images[0].mime !== 'image/gif' && Platform.OS !== 'ios') {
          console.log('LogOut - singleimageselection', this._network.service.loggedInUser);
          // Cropper
          ImagePicker.openCropper({
            path: images[0].path,
            width: 1000,
            height: 1000,
          }).then((data) => {
            console.log('LogOut - singleimagecrop', this._network.service.loggedInUser);
            console.log('PM - data', data);
            const _progressCallback = this._progressCallback;
            new ImageUtil().uploadImage(data, this._group._id, true, 'Image',
            (fuFileName, fuPercent, fuMsg) => {
              console.log(fuFileName, ':', fuPercent, ':', fuMsg);
              const fileNameCount = fuFileName;
              console.log('LogOut - roomview', this._network.service.loggedInUser);
              const percentage = Math.round(Number(parseFloat(fuPercent).toFixed(2) * 100));
              if (_progressCallback) {
                _progressCallback(fileNameCount, fuMsg, percentage, 1, 0);
              }
github zetaoWu / IRunning / app / containers / page / mePage.js View on Github external
_openCamera() {
        this.setState({ modalVisible: false });
        // ImagePicker.launchCamera(options, (response) => {
        //     // uri (on android)
        //     // const source = { uri: response.uri, isStatic: true };
        //     const source = { uri: 'data:image/jpeg;base64,' + response.data, isStatic: true };
        //     this.setState({
        //         avatarSource: source,
        //     });
        // });

        ImageCropPicker.openCamera({
            width: 500,
            height: 500,
            cropping: true,
            cropperTintColor: '#453d4b'
        }).then(image => {
            this.setState({
                avatarSource: image.path,
            });
        });
    }
github hummingbird-me / kitsu-mobile / src / screens / Feed / components / PostCreator / component.js View on Github external
componentWillUnmount() {
    // Abort any uploading if user cancels
    if (this.uploader) {
      this.uploader.abort();
    }
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
    ImagePicker.clean();
    Keyboard.dismiss();
  }
github hummingbird-me / kitsu-mobile / src / screens / Feed / components / PostCreator / component.js View on Github external
id: currentUserId,
          },
          ...postUploads,
          ...targetData,
          ...mediaData,
          nsfw,
          spoiler,
          ...spoiledData,
          embedUrl,
        }, {
          include: 'media,spoiledUnit,user,uploads',
        });
      }

      // Clean up any tmp image files
      ImagePicker.clean();

      if (onPostCreated) {
        onPostCreated(newPost);
      }
    } catch (err) {
      const string = (err && err[0].detail) || 'Failed to create post.';
      this.setState({ error: string });
    }

    this.setState({ busy: false });
  }
github NervJS / taro / packages / taro-rn / src / api / image / chooseImage.js View on Github external
function openPicker (options) {
  console.log(options)
  const {count: maxFiles, success, complete} = options
  return ImagePicker.openPicker({
    multiple: true,
    maxFiles
  }).then(images => {
    console.log(images)
    let data = Object.assign({}, getRes(images), res)
    success && success(data)
    complete && complete(data)
    return data
  })
}
github RocketChat / Rocket.Chat.ReactNative / app / views / ProfileView / index.js View on Github external
pickImage = async() => {
		const options = {
			cropping: true,
			compressImageQuality: 0.8,
			cropperAvoidEmptySpaceAroundImage: false,
			cropperChooseText: I18n.t('Choose'),
			cropperCancelText: I18n.t('Cancel'),
			includeBase64: true
		};
		try {
			const response = await ImagePicker.openPicker(options);
			this.setAvatar({ url: response.path, data: `data:image/jpeg;base64,${ response.data }`, service: 'upload' });
		} catch (error) {
			console.warn(error);
		}
	}
github SocialXNetwork / socialx_react_native / packages / RNSocialX / src / utilities / mediaPicker.ts View on Github external
export const getGalleryMediaObject = async (
	options: Partial<Options> = {},
): Promise<IPickerImage | undefined> => {
	try {
		const mediaObject: IPickerImage | IPickerImage[] = await ImagePicker.openPicker({
			...DEFAULT_PICKER_OPTIONS,
			...options,
		});

		return mediaObject as IPickerImage;
	} catch (ex) {
		console.log('getGalleryMediaObject error', ex);
	}
};
github SocialXNetwork / socialx_react_native / packages / RNSocialX / src / utilities / mediaPicker.ts View on Github external
export const getCameraMediaObjectMultiple = async (options = {}): Promise<IPickerImageMultiple> => {
	try {
		const mediaObject: IPickerImage | IPickerImage[] = await ImagePicker.openCamera({
			...DEFAULT_CAMERA_OPTIONS,
			...options,
		});

		return [mediaObject as IPickerImage];
	} catch (ex) {
		console.log('getCameraMediaObjectMultiple error', ex);
		return [];
	}
};