Error while animating rotateX in react native

Question

I am trying to rotate an icon on press of a button in my react native application. But I am getting this error:

Error while updating property 'transform' of a view managed by: RCTView

This is the Icon itself:

        <TouchableOpacity
          style={[
            styles.expandButton,
            {transform: [{rotateX: toString(expandIconAngle) + 'deg'}]},
          ]}
          onPress={() => {
            rotateIcon();
          }}>
          <Icon name="expand-less" color="#ffffff" size={28} />
        </TouchableOpacity>

This is the function which is responsible for rotating the icon:

 const expandIconAngle = useRef(new Animated.Value(0)).current;
  function rotateIcon() {
    Animated.timing(expandIconAngle, {
      toValue: 180,
      duration: 300,
      easing: Easing.linear,
    }).start();
  }

Where am I going wrong?

Have you tried `react-native-reanimated` for the animation stuff? — Emad Baqeri, Oct 23 '21 at 10:55

score 1 · Accepted Answer · answered Oct 23 '21 at 09:01

use interpolate and Animated.Image :

import React, { useRef } from "react";
import { Animated, Text, View, StyleSheet, Button, SafeAreaView,Easing,TouchableOpacity } from "react-native";

const App = () => {
  // fadeAnim will be used as the value for opacity. Initial Value: 0
  const angle = useRef(new Animated.Value(0)).current;


  const fadeOut = () => {
    // Will change fadeAnim value to 0 in 3 seconds
  Animated.timing(
      angle,
    {
      toValue: 1,
      duration: 3000,
      easing: Easing.linear, // Easing is an additional import from react-native
      useNativeDriver: true  // To make use of native driver for performance
    }
  ).start()
  };

  const spin =angle.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg']
})

  return (
    <SafeAreaView style={styles.container}>
     <Animated.Image
  style={{transform: [{rotateX: spin}] }}
  source={require('@expo/snack-static/react-native-logo.png')} />
      
      <TouchableOpacity onPress={fadeOut}  style={styles.buttonRow}>
        <Text>Button</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  buttonRow: {
    flexBasis: 100,
    justifyContent: "space-evenly",
    marginVertical: 16
  }
});

export default App;

LIVE example - https://snack.expo.dev/TP-fQExXT

@Pro I just open my live example and when I pressed button the image was rotating for 3 seconds — Quintis, Oct 23 '21 at 10:09
apparently it wasn't working as I was trying the web version...It works in the android version...I used the snippet in my code and it works flawlessly..thanks man! — Pro, Oct 23 '21 at 12:11

Error while animating rotateX in react native

1 Answers1