React Native Background Animations

Animation Is Continuous and Have smooth Flow By DEVELOVERS

EXAMPLE Of Demo

Create Folder In Root Directory Name As :- Components

1) Name Below Given File As :- BackgroundAnimation.js And Save It in Within Components Folder

import React, { useEffect,useRef } from 'react';
import { Animated, Easing, ImageBackground } from 'react-native';
import backgroundImage from '../res/Background.jpg'
import styles from './styles';
import {
  INPUT_RANGE_START, 
  INPUT_RANGE_END,
  OUTPUT_RANGE_START,
  OUTPUT_RANGE_END,
  ANIMATION_TO_VALUE,
  ANIMATION_DURATION,
} from './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} />
  )
}

2) Name Below Given File As :- styles.js , And Save It in Within Components Folder

import {StyleSheet} from 'react-native'


const styles = StyleSheet.create({    
    
    background: {
        position: 'absolute',
        width: 1200,
        height: 1200,
        top: 0,
  // Set Fadeness  On Image Using Prop Given below
        opacity: 0.15, 
        transform: [
          {
            translateX: 0,
          },
          {
            translateY: 0,
          },
        ],      
      }, 
  });


export default styles

3) Name Below Given File As :- constants.js , And Save It in Within Components Folder

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;

Save Image To Directory Named as res Available In Root Directory

Name You Image Background.jpg

../res/Background.jpg

IMAGE SIZE :

4) When You are done With All 3 Files, Now You Just Need To Import It And Call Within That Page

Let's Have A Look on An Example

I am Gonna set It for Login Screen Background:

import React, { useCallback, useEffect, useState } from "react";
import {StatusBar, View, Text, TextInput, Image,StyleSheet, TouchableOpacity, Alert, ActivityIndicator, Keyboard } from "react-native";
import { validate } from "react-email-validator";
import auth from '@react-native-firebase/auth';


        // Import The Given Below File
import BackgroundAnimation from '../Components/BackgroundAnimation';


const Login = ({route , navigation}) => {


    return(
        // this Should Must be Flex 1 And NO Background color or background Image Props
        <View style={{flex:1}}>
            <StatusBar backgroundColor="#0a2e2c"/>
        {/* This Is the Point Where You Should Call That, As Mentioned */}
            <BackgroundAnimation/>


            <View style={styles.CentreLogo}>

If This Finds You help Full

Follow Me On GitHub As Well :