Posted on Nov 21, 2022

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.