med-3eeff767d397_moti-pulse-placeholder.jsx

import React from 'react';
import {View, SafeAreaView, ScrollView} from 'react-native';
import {MotiView} from 'moti';

const MotiPlaceholders = () => {
  const gray = '#505050';
  const lightGray = '#a0a0a0';
  const animationDuration = 700;

  return (
    <SafeAreaView style={{flex: 1, backgroundColor: '#17021A'}}>
      <ScrollView style={{flex: 1, flexDirection: 'column'}}>
        {Array.from({length: 5}).map((_, index) => (
          <View key={index} style={{flex: 1, margin: 10, marginBottom: 20}}>
            <View
              style={{
                flexDirection: 'row',
                marginBottom: 10,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              {/* Circle */}
              <MotiView
                style={{
                  height: 100,
                  overflow: 'hidden',
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <MotiView
                  style={{
                    height: 100,
                    width: 100,
                    overflow: 'hidden',
                    borderRadius: 50,
                  }}
                  from={{
                    backgroundColor: gray,
                  }}
                  animate={{
                    backgroundColor: lightGray,
                  }}
                  transition={{
                    loop: true,
                    type: 'timing',
                    duration: animationDuration,
                  }}
                />
              </MotiView>
              {/* Small "text" blocks */}
              <View style={{flex: 2}}>
                {Array.from({length: 3}).map((_, index) => (
                  <MotiView
                    key={index}
                    style={{
                      height: index === 0 ? 10 : 25,
                      width: index === 0 ? 100 : undefined,
                      overflow: 'hidden',
                      marginBottom: 10,
                    }}
                    from={{
                      backgroundColor: gray,
                    }}
                    animate={{
                      backgroundColor: lightGray,
                    }}
                    transition={{
                      loop: true,
                      type: 'timing',
                      duration: animationDuration,
                    }}
                  />
                ))}
              </View>
            </View>
            {/* Big "text" blocks */}
            {Array.from({length: 3}).map((_, index) => (
              <View key={index}>
                <MotiView
                  style={{
                    height: 50,
                    marginBottom: 10,
                    overflow: 'hidden',
                  }}
                  from={{
                    backgroundColor: gray,
                  }}
                  animate={{
                    backgroundColor: lightGray,
                  }}
                  transition={{
                    loop: true,
                    type: 'timing',
                    duration: animationDuration,
                  }}
                />
              </View>
            ))}
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
};

export default MotiPlaceholders;