Error while animating rotateX in react native-CodePudding

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?

CodePudding user response：

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