DEV Community

Anuj Gupta
Anuj Gupta

Posted on

How to animate background image in react native

Image description

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;


Enter fullscreen mode Exit fullscreen mode

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.

Image description

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

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


Enter fullscreen mode Exit fullscreen mode

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} />

  )
}


Enter fullscreen mode Exit fullscreen mode

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

Image description

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.

Top comments (0)