Building an Animation Hook in React Native

Note: At the time of recording/writing React Native 0.59 is in RC status. As such, to try it out you'll need to specify your React Native version react-native init MyProject --version react-native@next

Second Note: Hooks are new and I'm new to them too. I may have misspoken multiple times through the video - my apologies! I'm learning them too ;)

This post was originally published on React Native School. For the most up to date article & resources please visit me there! Also, if you’re looking to level up as a React Native developer check out some of our other tutorials!

Why useRef?

The reason I used useRef in this code was because of this line from the docs:

The returned object will persist for the full lifetime of the component.

Since we want one animated value that we continually update we want it to persist through the full lifetime of the component, rather than being re-created each time the component updates (each time the count increments in this case).

Update #1: Avoiding Memory Leaks

Please review the code below. To avoid a memory leak you need to clean up the timeout when the component unmounts. You can accomplish this by returning a function from the useEffect callback in which you call clearTimeout. Thanks to Milli for pointing this out!

Additional Resources

• Learn more about React Hooks.
• useEffect hook
• useRef hook

The final code from the video can be found below:

App.js

import React, { useEffect, useRef } from 'react';
import { View, Animated, Text } from 'react-native';

const Box = ({ backgroundColor = '#3cae6f', scale = 1 }) => (
  <Animated.View
    style={[
      {
        width: 100,
        height: 100,
        backgroundColor,
        transform: [{ scale }],
      },
    ]}
  />
);

const usePulse = (startDelay = 500) => {
  const scale = useRef(new Animated.Value(1)).current;

  const pulse = () => {
    Animated.sequence([
      Animated.timing(scale, { toValue: 1.2 }),
      Animated.timing(scale, { toValue: 0.8 }),
    ]).start(() => pulse());
  };

  useEffect(() => {
    const timeout = setTimeout(() => pulse(), startDelay);
    return () => clearTimeout(timeout);
  }, []);

  return scale;
};

const App = ({ count }) => {
  const scale = usePulse();
  const scale2 = usePulse(750);

  return (
    <View
      style={{ flex: 1, alignItems: 'center', justifyContent: 'space-around' }}
    >
      <Box scale={scale2} backgroundColor="#1f9cb8" />
      <Text>{count}</Text>
      <Box scale={scale} />
    </View>
  );
};

// class App extends React.Component {
//   scale = new Animated.Value(1);

//   componentDidMount() {
//     setTimeout(() => this.pulse(), 500);
//   }

//   pulse = () => {
//     Animated.sequence([
//       Animated.timing(this.scale, { toValue: 1.2 }),
//       Animated.timing(this.scale, { toValue: 0.8 }),
//     ]).start(() => this.pulse());
//   };

//   render() {
//     return (
//       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'space-around' }}>
//         <Text>{this.props.count}</Text>
//         <Box scale={this.scale} />
//       </View>
//     );
//   }
// }

export default class Wrapper extends React.Component {
  state = { count: 1 };

  componentDidMount() {
    setInterval(() => {
      this.setState(state => ({
        count: state.count + 1,
      }));
    }, 500);
  }

  render() {
    return <App count={this.state.count} />;
  }
}