Building an Animation Hook in React Native
Tags: reactnative, react, javascript, mobiledevelopment
Published: 2019-02-22 16:20:01

---
title: Building an Animation Hook in React Native
published: true
description: Take a first look at how you can use React Hooks to simplify your animation logic in React Native.
tags: React Native, React, JavaScript, Mobile Development
canonical_url: "https://www.reactnativeschool.com/building-an-animation-hook-in-react-native"
---


{% youtube tAY3eQoyujM %}

**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](https://www.reactnativeschool.com/building-an-animation-hook-in-react-native). 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](https://reactjs.org/docs/hooks-reference.html#useref):

> 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](https://www.linkedin.com/in/milli-jolic/) for pointing this out!

## Additional Resources

- [Learn more about React Hooks](https://reactjs.org/docs/hooks-intro.html).
- [useEffect hook](https://reactjs.org/docs/hooks-reference.html#useeffect)
- [useRef hook](https://reactjs.org/docs/hooks-reference.html#useref)

The final code from the video can be found below:

<p class="code-header">App.js</p>

```jsx
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} />;
  }
}
```