react-native-image-cropper/Example/index.ios.js

Crop image in React Native using pan to move, pinch to zoom -> capture to file or base64

import React, { Component } from 'react'
import {
  Text,
  View,
  Image,
  Slider,
  ScrollView,
  AppRegistry,
  TouchableOpacity,
} from 'react-native'

import {ImageCrop} from '../src/'

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      image: 'http://i.imgur.com/tCatS2c.jpg',
      height: 200,
      width: 300,
      zoom: 50,
      showNew: true,
      newImage: 'http://i.imgur.com/tCatS2c.jpg',
    };
  }

  render() {
    return (
      <ScrollView>
        <View>
          <ImageCrop 
            ref={'cropper'}
            image={this.state.image}
            cropHeight={this.state.height}
            cropWidth={this.state.width}
            zoom={this.state.zoom}
            maxZoom={80}
            minZoom={20}
            panToMove={true}
            pinchToZoom={true}
          />
          <View style={{flex: 1, marginTop: 20}}>
            <Slider
              value={this.state.zoom}
              onValueChange={value => this.setState({zoom: value})}
              maximumValue={100}
              minimumValue={0}
              step={0.1}
            />
            <TouchableOpacity onPress={this.capture.bind(this)}>
              <View style={{flex: 1, alignItems: "center", justifyContent: "center",marginTop: 20}}>
                <Text style={{color: "grey", padding: 10}}>CAPTURE</Text>
              </View>
            </TouchableOpacity>

            <Image source={{ uri: this.state.newImage }} style={{height: this.state.height, width: this.state.width}} />

          </View>
        </View>
      </ScrollView>
    );
  }
  capture(){
    this.refs.cropper.crop()
    .then(res =>{
      this.setState({
        showNew: true,
        newImage: res,
      });
    })
  }
}

AppRegistry.registerComponent('Example', () => Example)