Reanimated Crossfade as Background Image

https://github.com/NischalShahi/reanimated-crossfade-images/assets/37703654/6f3b5e17-b4dc-4757-b4ce-1890a49d3a1e BgSampleVideoAndroid.webm

Reanimated Crossfade

https://github.com/NischalShahi/reanimated-crossfade-images/assets/37703654/40b8cf64-9580-417c-ad11-7e2a33a37f7d SampleVideoAndroid.webm

ReAnimatedCrossfadeImages

ReAnimatedCrossfadeImages is a React Native component that provides a visually appealing way to display and animate images with cross fading transitions. It utilizes the react-native-reanimated library for smooth animations and transitions. This library can be used as both Image or ImageBackground component.

Installation

Before installing ReAnimatedCrossfadeImages, make sure you have react-native-reanimated version 3 or higher installed in your React Native project. If not, you can install it with the following commands:

npm install react-native-reanimated@^3.0.0 reanimated-crossfade-images
# or
yarn add react-native-reanimated@^3.0.0  reanimated-crossfade-images

Props	Required	Default	Description
images	true		This should be an array of images strings.
interval	false	2000	Interval of images changes in ms.
fadeDuration	false	500	Duration of the cross fade effect between 2 images.
loop	false	true	Set if the animation happens on loop or only once.

EXAMPLE FOR REANIMATED CROSSFADE IMAGES

import React from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';

import { CrossFadeImages } from 'reanimated-crossfade-images';

const IMAGES = [] //links for images


function App(): JSX.Element {


  return (
    <View>
      <View style={{width:"100%",height:500}}>
        <CrossFadeImages images={IMAGES} />
      </View>
    </View>
  );
}

export default App;

EXAMPLE FOR REANIMATED CROSSFADE BACKGROUND IMAGES

import React from 'react';
import {
  StyleSheet,
  View,
  Text
} from 'react-native';

import { CrossFadeImages } from 'reanimated-crossfade-images';
import { RNReAnimatedTriImages } from 'rn-reanimated-tri-images';

const IMAGES = [] //links for images


function App(): JSX.Element {

  return (
   <CrossFadeImages images={IMAGES}>
      <View style={{flex:1, justifyContent:'center', alignItems:'center' }}>
        <View style={{width:"80%", backgroundColor:"white", padding: 20}}>
          <Text style={{fontSize:20, textAlign:"center"}}>This is a sample text above the fading background image</Text>
        </View>
      </View>
    </CrossFadeImages> 
  );
}

export default App;