How to animate background image in react native

#programming #learning #coding

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

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

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.

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.