moti-images-1656466184177.jsx

import React, {useState, useEffect} from 'react';
import {
  SafeAreaView,
  Image,
  ScrollView,
  StatusBar,
  ActivityIndicator,
} from 'react-native';
import {MotiView} from 'moti';

const images = [
  {
    uri: 'image-uri',
  },
];
const MotiPhotos = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [isToggled, setIsToggled] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
      setIsToggled(true);
    }, 2000);
  }, []);

  if (isLoading) {
    return (
      <SafeAreaView
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          padding: 20,
          backgroundColor: '#404040',
        }}>
        <StatusBar barStyle={'light-content'} />
        <ActivityIndicator size={'large'} color="white" />
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={{flex: 1}}>
      <ScrollView
        style={{padding: 10, flex: 1}}
        contentContainerStyle={{
          flexWrap: 'wrap',
          flexDirection: 'row',
          alignItems: 'flex-start',
        }}>
        {images.map((image, index) => {
          return (
            <MotiView
              key={index}
              style={{height: 200, width: '50%', padding: 5}}
              animate={{
                opacity: isToggled ? 1 : 0,
                transform: isToggled ? [{translateY: 0}] : [{translateY: 10}],
              }}
              transition={{
                type: 'timing',
                delay: index * 100,
                duration: 300,
              }}>
              <Image
                style={{height: '100%', width: '100%'}}
                source={{uri: image.uri}}
              />
            </MotiView>
          );
        })}
      </ScrollView>
    </SafeAreaView>
  );
};

export default MotiPhotos;

MotiPhotos.mov