zinopro / rn-img-animated

Image Sequence Animation

Code Overview ImageSequence Component

The following ReactNative Component fetches images from Firestore and animates them using the Animated API:

import React, { useEffect, useRef, useState } from 'react'; import { View, Animated, Dimensions, ActivityIndicator } from 'react-native'; import { db } from './firebaseConfig';

const { width, height } = Dimensions.get('window');

// Reduced dimensions (70% of the original size) const imagedWidth = width * 0.7; const imageHeight = height * 0.7;

const fetchImagesFromFirestore = async () => { try { const images = []; const snapshot = await db.collection('images').orderBy('index').get(); snapshot.forEach(doc => { images.push(doc.data().url); }); return images; } catch (error) { console.error('Error fetching images:', error); return []; } };

const ImageSequence = ({ duration }) => { const [images, setImages] = useState([]); const animatedValue = useRef(new Animated.Value(0)).current;

useEffect(() => { const getImages = async () => { const fetchedImages = await fetchImagesFromFirestore(); setImages(fetchedImages); }; getImages(); }, []);

useEffect(() => { if (images.length > 0) { Animated.loop( Animated.timing(animatedValue, { toValue: images.length - 1, duration: duration * images.length, useNativeDriver: false }) ).start(); }

// Cleanup function to stop the animation when component unmounts
return () => animatedValue.stopAnimation();

}, [animatedValue, images.length, duration]);

const interpolatedIndex = animatedValue.interpolate({ inputRange: Array.from({ length: images.length }, (_, i) => i), outputRange: images, });

if (images.length === 0) { return ; }

return ( <Animated.Image source={{ uri: interpolatedIndex }} style={{ width: imagedWidth, height: imageHeight }} /> ); };

const App = () => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> ); };

export default App;

Explanation

Firebase Configuration: The firebaseConfig.js file initializes Firebase with your project's credentials and exports the Firestore instance (db).

Fetching and Sorting Images: The fetchImagesFromFirestore function fetches the images from Firestore, ensuring they are ordered by the index field.

State Management and Animation Setup:
    The useState hook manages the images array.
    The useEffect hook fetches the images and sets the images state.
    The second useEffect hook starts the animation only after the images are fetched and available.
    Animated.loop and Animated.timing create the animation.

Image Interpolation:
    The interpolatedIndex interpolates the animatedValue to map to the URLs of the images.

Loading Indicator:
    An ActivityIndicator is displayed while the images are being fetched, providing visual feedback to the user.

License This project is licensed under the MIT License - see the LICENSE file for details.