The base64 image is not displayed

[marckalil]

The base64 image is not displayed and the corners are all at the same place Did I miss something ?

`import React from "react"; import { StyleSheet, View, Image, Text, TouchableOpacity } from "react-native";

import CustomCrop from "react-native-perspective-image-cropper";

class CropImage extends React.Component { constructor() { super(); this.state = { image: "", initialImage: "", imageWidth: 0, imageHeight: 0, rectangleCoordinates: { topLeft: { x: 10, y: 10 }, topRight: { x: 10, y: 10 }, bottomRight: { x: 10, y: 10 }, bottomLeft: { x: 10, y: 10 } } }; }

componentWillMount() { const image = this.props.navigation.state.params.imageSource; Image.getSize(data:image/jpeg;base64,${image}, (width, height) => { this.setState({ imageWidth: width, imageHeight: height, initialImage: image, rectangleCoordinates: { topLeft: { x: 10, y: 10 }, topRight: { x: 100, y: 10 }, bottomRight: { x: 10, y: 100 }, bottomLeft: { x: 100, y: 100 } } }); }); }

updateImage(image, newCoordinates) { this.setState({ image, rectangleCoordinates: newCoordinates }); }

crop() { this.customCrop.crop(); }

render() { return (

(this.customCrop = ref)} overlayColor="rgba(18,190,210, 1)" overlayStrokeColor="rgba(20,190,210, 1)" handlerColor="rgba(20,150,160, 1)" /> CROP IMAGE

);

} }`

[marckalil]

I got it, element simply doesn't re-render after a setState. My solution:

render() {
    if (!this.state.isLoaded) {
      return null;
    }
    return (
      <View>
        <CustomCrop
          updateImage={this.updateImage.bind(this)}
          rectangleCoordinates={this.state.rectangleCoordinates}
          initialImage={this.state.initialImage}
          height={this.state.imageHeight}
          width={this.state.imageWidth}
          ref={ref => (this.customCrop = ref)}
          overlayColor="rgba(18,190,210, 1)"
          overlayStrokeColor="rgba(20,190,210, 1)"
          handlerColor="rgba(20,150,160, 1)"
        />
        <TouchableOpacity onPress={this.crop.bind(this)}>
          <Text>CROP IMAGE</Text>
        </TouchableOpacity>
      </View>
    );
  }