React-Native : How to rotate base 64 image - react-native

Question

I have PNG image in base64 format which will be saved in server, But before saving into server image need to be rotated.
I have gone through this link, but it doesn't seem possible in react-native.
Is there any way in react-native to rotate base64 image?
I tried using gm package, But i end up with lot of errors in node_modules. Has any one else tried this package?

Answer 1

There is a package react-native-image-rotate
you can rotate any image including base64
Installation
First install the package via npm
$ npm install react-native-image-rotate
then use rnpm to link native libraries
$ react-native link react-native-image-rotate
usage
static rotateImage(
uri: string,
angle: number,
success: (uri: string) => void,
failure: (error: Object) => void
) : void
Example
import React from 'react';
import { StyleSheet, View,Image, TouchableHighlight,Text } from 'react-native';
import ImageRotate from 'react-native-image-rotate';
const string = 'Your base64 image here'
export default class App extends React.Component{
constructor(props){
super(props);
this.state = {
image: string,
currentAngle: 0,
width: 150,
height: 240,
};
this.rotate = this.rotate.bind(this);
}
rotate = (angle) => {
const nextAngle = this.state.currentAngle + angle;
ImageRotate.rotateImage(
string,
nextAngle,
(uri) => {
console.log(uri, 'uri')
this.setState({
image: uri,
currentAngle: nextAngle,
width: this.state.height,
height: this.state.width,
});
},
(error) => {
console.error(error);
}
);
}
render(){
return (
<View style={{flex:1,alignItems:'center'}}>
<Image source={{uri: this.state.image}} style={{width: 300, height: 300}}/>
<TouchableHighlight
onPress={() => this.rotate(90)}
style={styles.button}
>
<Text style={styles.text}>ROTATE CW</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 2

Here is My research and what i have found https://aboutreact.com/react-native-rotate-image-view-using-animation/
npm install -g react-native-cli
react-native init myproject
cd myproject
then .js
import React from 'react';
import { StyleSheet, View, Animated, Image, Easing } from 'react-native';
export default class App extends React.Component {
RotateValueKeeper: any;
constructor() {
super();
this.RotateValueKeeper = new Animated.Value(0);
}
componentDidMount() {
this.ImageRotateStarterFunction();
}
ImageRotateStarterFunction() {
this.RotateValueKeeper.setValue(0);
Animated.timing(this.RotateValueKeeper, {
toValue: 1,
duration: 3000,
easing: Easing.linear,
}).start(() => this.ImageRotateStarterFunction());
}
render() {
const MyRotateData = this.RotateValueKeeper.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
});
return (
<View style={styles.container}>
<Animated.Image
style={{
width: 150,
height: 150,
transform: [{ rotate: MyRotateData }],
}}
source={{
uri:
'https://aboutreact.com/wp-content/uploads/2018/08/logo1024.png',
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#C2C2C2',
},
});
then
Android
react-native run-android
iOS
react-native run-ios