How to animate background image in react native

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.

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 and iOS.

Blog

How to animate background image in react native

Anuj Gupta

1. Constants

2. Styling the image

3. Animating the ImageBackground Component

Join Our Newsletter. No Spam, Only the good stuff.

Related