React-Native : How to rotate base 64 image

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

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

Answer 2

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',
    },
});