Lottie Animation

A polished Lottie animation block with optional title and description. Displays an animation inside a rounded container and renders an elegant heading and subheading when provided.

animationlottieherotitledescription
import React from 'react';
import { View, Text } from '@evlop/native-components';
import LottieView from 'lottie-react-native';

const AppBlock: NativeAppBlock = function (props) {
  const data = props?.data || {};
  const uri = data.lottieUrl;
  const title = data.title || '';
  const description = data.description || '';

  return (
    <View style={{ width: '100%', padding: 20, alignItems: 'center' }}>
      {/* Decorative vibrant blobs */}
      <View
        style={{
          position: 'absolute',
          top: -40,
          left: -60,
          width: 220,
          height: 220,
          borderRadius: 110,
          backgroundColor: 'rgba(255,93,93,0.18)'
        }}
      />
      <View
        style={{
          position: 'absolute',
          top: -20,
          right: -80,
          width: 260,
          height: 260,
          borderRadius: 130,
          backgroundColor: 'rgba(110,93,255,0.14)'
        }}
      />
      <View
        style={{
          position: 'absolute',
          bottom: -60,
          left: 40,
          width: 180,
          height: 180,
          borderRadius: 90,
          backgroundColor: 'rgba(255,197,66,0.12)'
        }}
      />

      {title ? (
        <Text
          style={{
            fontSize: 22,
            fontWeight: '800',
            textAlign: 'center',
            marginBottom: 8,
            color: '#ff4d6d',
            textShadowColor: 'rgba(255,77,109,0.18)',
            textShadowOffset: { width: 0, height: 6 },
            textShadowRadius: 18
          }}
        >
          {title}
        </Text>
      ) : null}

      {description ? (
        <Text
          style={{
            fontSize: 14,
            textAlign: 'center',
            color: '#5b5b5b',
            marginBottom: 14,
            lineHeight: 20,
            maxWidth: '90%',
            color: '#6b4cff',
            opacity: 0.95,
            textShadowColor: 'rgba(107,76,255,0.08)',
            textShadowOffset: { width: 0, height: 4 },
            textShadowRadius: 10
          }}
        >
          {description}
        </Text>
      ) : null}

      <View
        style={{
          width: '100%',
          aspectRatio: 1,
          borderRadius: 18,
          overflow: 'hidden',
          backgroundColor: '#ffffff',
          shadowColor: '#ff6b9a',
          shadowOffset: { width: 0, height: 8 },
          shadowOpacity: 0.12,
          shadowRadius: 24,
          elevation: 6,
          padding: 6
        }}
      >
        {uri ? (
          <LottieView
            source={{ uri }}
            autoPlay
            loop
            style={{ width: '100%', height: '100%' }}
          />
        ) : (
          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text color="gray-400">No animation</Text>
          </View>
        )}
      </View>
    </View>
  );
}

export default AppBlock;