i'm making a image editor application using react native.
just adding function of and a shape like circle or square.
_handleAddCircle() {
let circle = {
left: 20,
top: 84
};
let circles = this.state.circles;
circles.push(circle);
this.setState({
circles: circles
});
},
render: function() {
let circles = this.state.circles.map((circle, key) => {
return (
<Circle key={key} left={circle.left} top={circle.top} updatePosition={this.updatePosition} />
);
});
return (
<View style={styles.container}>
<TouchableHighlight
style={styles.button}
onPress={this._handleAddCircle}
underlayColor="#88D4F5">
<Text style={styles.buttonText}>add</Text>
</TouchableHighlight>
<ScrollView ref="resultImage" style={styles.scrollView}>
<Image
style={styles.image}
source={require('../../resources/images/1422374259704.jpeg')} />
{circles}
</ScrollView>
<TouchableHighlight
style={styles.button}
onPress={this._handleSave}
underlayColor="#88D4F5">
<Text style={styles.buttonText}>save</Text>
</TouchableHighlight>
</View>
);
}
but i cannot find saving image after working.
i guess hard to make image editor without native language.
what package or plugin do i need for it?
You could use a package like https://github.com/gre/react-native-view-shot that would allow you to wrap your image + overlays :
<ViewShot ref="viewShot" options={{ format: "png", quality: 1 }}>
<ScrollView ref="resultImage" style={styles.scrollView}>
<Image
style={styles.image}
source={require('../../resources/images/1422374259704.jpeg')} />
{circles}
</ScrollView>
</ViewShot>
and then capture it :
this.refs.viewShot.capture()