import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Button,
Image
} from 'react-native';
var ImagePicker = require('react-native-image-picker');
import {ImageCrop} from 'react-native-image-cropper'
var options = {
title: 'Select Avatar',
customButtons: [
{name: 'fb', title: 'Choose Photo from Facebook'},
],
storageOptions: {
skipBackup: true,
path: 'images'
},
maxWidth:200,
maxHeight: 200
};
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component {
state = {
avatarSource:"",
height:200,
width:200,
zoom:0,
avatarUri:""
}
capture() {
console.log(this.refs.cropper);// Its retuning undefined
this.refs.cropper.crop()
.then(base64 => console.log(base64))
}
getImageView() {
var view=[];
let cropper = null;
if(this.state.avatarSource!=''){
view.push(
Please check my code below, /**
import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View, Button, Image } from 'react-native'; var ImagePicker = require('react-native-image-picker'); import {ImageCrop} from 'react-native-image-cropper'
var options = { title: 'Select Avatar', customButtons: [ {name: 'fb', title: 'Choose Photo from Facebook'}, ], storageOptions: { skipBackup: true, path: 'images' }, maxWidth:200, maxHeight: 200 }; const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu', });
export default class App extends Component { state = { avatarSource:"", height:200, width:200, zoom:0, avatarUri:"" } capture() { console.log(this.refs.cropper);// Its retuning undefined
.then(base64 => console.log(base64)) } getImageView() { var view=[]; let cropper = null; if(this.state.avatarSource!=''){ view.push(
} componentWillMount() { } onPressLearnMore() { ImagePicker.showImagePicker(options, (response) => { console.log('Response = ', response);
}
render() { return (
} }
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, uploadAvatar:{ width: 200, height: 200 } });