st0ffern / react-native-image-cropper

Crop your images with zoom and pan
https://www.npmjs.com/package/react-native-image-cropper
MIT License
158 stars 67 forks source link

TypeError: Cannot read property 'crop' of undefined #60

Closed ChiranjeeviAdi closed 6 years ago

ChiranjeeviAdi commented 6 years ago

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

 this.refs.cropper.crop()

.then(base64 => console.log(base64)) } getImageView() { var view=[]; let cropper = null; if(this.state.avatarSource!=''){ view.push(

Capture() {cropper}
    );
return view;

}

} componentWillMount() { } onPressLearnMore() { 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,
      avatarUri:response.uri
    });
  }
});

}

render() { return (

Welcome to React Native! To get started, edit App.js {instructions}
st0ffern commented 6 years ago

Stackoverflow. You need import on top of document!