[Bug?] Issues with using hooks

Author: JakeHadleyCreated Jul 18, 2019Updated Sep 25, 2024

I'm working on animating an icon with hooks and react-native-animatable but I'm getting an error using the useRef hook. The error is undefined is not an object (evaluating 'iconRef.current.animatable.transitionTo').

I'm trying to figure out if this is an issue with the library or with how I'm using useRef or the library method. In the end, I want the icon to rotate when the button is pushed.

Reproducible snack here

javascript

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import Icon from 'react-native-vector-icons/Entypo';
import * as Animatable from 'react-native-animatable';
const AnimatedIcon = Animatable.createAnimatableComponent(Icon);

const App = () => {
  const iconRef = React.useRef(null);
  const [rotated, setRotated] = React.useState(true);

  return (
    <View>
      <TouchableOpacity
        style={styles.container}
        onPress={() => {
          setRotated(!rotated);
          iconRef.current.animatable.transitionTo({
            transform: rotated ? [{ rotate: '0deg' }] : [{ rotate: '90deg' }],
          });
        }}>
        <Text style={{ fontSize: 30 }}>Press Me</Text>
      </TouchableOpacity>
      <AnimatedIcon
        name="chevron-small-right"
        ref={iconRef}
        size={50}
        style={{
          transform: [{ rotate: '0deg' }],
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
    marginTop: 50,
  },
});

export default App;

Source: oblador/react-native-animatable

View original on GitHub View discussion on GitHub