React Native Background Animations
by DEVELOVERS Updated: Jan 19, 2023
Guide Kit
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}>