How to animate background image in react native
Published: 2022-11-21 21:26:18


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuzzeyucfmzbwhasrq6w.gif)

I wanted to add an animated background for my game Catchphrase as the main play screen had a lot of white space and now you can add it as well.

## 1. Constants
Let’s start by defining some constants for our animation. Create constants.js

```
export const INPUT_RANGE_START = 0;
export const INPUT_RANGE_END = 1;
export const OUTPUT_RANGE_START = -281;
export const OUTPUT_RANGE_END = 0;
export const ANIMATION_TO_VALUE = 1;
export const ANIMATION_DURATION = 25000;
```
you can modify the values according to your need.

We need these values for interpolation . If you want to learn more about interpolation. Here is a great tutorial for it

[Interpolation with React Native Animations](https://eveningkid.medium.com/interpolation-with-react-native-animations-853e467fe5c1)

Now we need an image that we want to animate. I am using the following image.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekhylwotuowb1t4l043n.png)

If it was not clear what we are doing exactly in the above gif. Here is a simple explaination. We have an image and we are moving it down at a 45 degree angle using animation.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z67cuf10f9sj4vw1rg05.gif)

## 2. Styling the image
Okay let’s make the big enough to cover the screen. Create styles.js

```
import {StyleSheet} from 'react-native'

const styles = StyleSheet.create({    
    
    background: {
        position: 'absolute',
        width: 1200,
        height: 1200,
        top: 0,
        opacity: 0.2,
        transform: [
          {
            translateX: 0,
          },
          {
            translateY: 0,
          },
        ],      
      }, 
  });

export default styles
```

Now finally lets create the component to animate background :- BackgroundAnimation

## 3. Animating the ImageBackground Component

```
import React, { useEffect,useRef } from 'react';
import { Animated, Easing, ImageBackground } from 'react-native';

import backgroundImage from '../../assets/background.png';
import styles from './styles';
import {
  INPUT_RANGE_START,
  INPUT_RANGE_END,
  OUTPUT_RANGE_START,
  OUTPUT_RANGE_END,
  ANIMATION_TO_VALUE,
  ANIMATION_DURATION,
} from '../../utils/constants';


export default function BackgroundAnimation() {
  const initialValue = 0;
  const translateValue = useRef(new Animated.Value(initialValue)).current;

  useEffect(() => {
    const translate = () => {
      translateValue.setValue(initialValue);
      Animated.timing(translateValue, {
        toValue: ANIMATION_TO_VALUE,
        duration: ANIMATION_DURATION,
        easing: Easing.linear,
        useNativeDriver: true,
      }).start(() => translate());
    };

    translate();
  }, [translateValue]);

  const translateAnimation = translateValue.interpolate({
    inputRange: [INPUT_RANGE_START, INPUT_RANGE_END],
    outputRange: [OUTPUT_RANGE_START, OUTPUT_RANGE_END],
  });

  const AnimetedImage = Animated.createAnimatedComponent(ImageBackground);

  return (
    
        <AnimetedImage 
            resizeMode="repeat" 
            style={[styles.background,{
                transform: [
                    {
                      translateX: translateAnimation,
                    },
                    {
                      translateY: translateAnimation,
                    },
                  ],
            }]}
            source={backgroundImage} />
        
  )
}
```

Now we can simply import our BackgroundAnimation in any of our screen and we will get an animated background automatically.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fb1m8cltz9g327vv1sx.gif)

Thanks for reading this article. Be sure to like/recommend as much as you can and also share with your friends. It means a lot to me.

If you want to check out the game in this blog . The game is available both for [Android](https://bit.ly/3QD7s2a) and [iOS](https://apple.co/3SC4I5o).