React-native Animatable rotate view in onPress

Question

I am trying to rotate my image when it's pressed using following:

this.myView.transitionTo({ rotate: '180deg' }, 200);

I get error:

Invariant Violation: Transform with key of "rotate" must be a string: {"rotate":null}

Using react-native-animatable library. Not sure what is the proper syntax to use for transform props.

Thanks.

score 1 · Answer 1 · answered Mar 07 '19 at 08:45

Try this one it works for me.

import * as Animatable from "react-native-animatable";

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      back: false
    };
  }
  render() {
    return (
      <TouchableOpacity
        onPress={() => this.setState({ back: !this.state.back })}
      >
        <Animatable.Image
          source={require("./assets/images/nike.png")}
          style={{ width: 100, height: 100 }}
          animation={{
            from: {
              rotate: this.state.back ? "180deg" : "0deg"
            },
            to: {
              rotate: this.state.back ? "180deg" : "0deg"
            }
          }}
        />
      </TouchableOpacity>
    );
  }
}

score 0 · Answer 2 · answered Sep 02 '21 at 09:04

This works for me.

import * as Animatable from "react-native-animatable";

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      back: false
    };
  }
  render() {
    return (
      <TouchableOpacity
        onPress={() => this.setState({ back: !this.state.back })}
      >
        <Animatable.Image 
            animation = {{
                from: {
                    transform: [{ rotate: this.state.back?'0deg': '45deg'}]
                },
                to: {
                    transform: [{ rotate: this.state.back?'45deg' : "deg0"}]
                }
            }}
            source={icon} style={{}}  resizeMode = {"contain"}/> 
      </TouchableOpacity>
    );
  }
}

React-native Animatable rotate view in onPress

2 Answers2