Ball.tsx

import React from 'react';
import { View } from 'react-native';
import Animated, { css } from 'react-native-reanimated';

export default function Ball() {

  return (
    <View style={styles.container}>
      <Animated.View style={styles.blob} />
      <Animated.View style={styles.shadow} />
    </View>
  );
}

const styles = css.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  blob: {
    backgroundColor: 'rgb(20, 201, 171)',
    width: 100,
    height: 100,
    borderRadius: '100%',
    marginTop: 200,

    animationDuration: 1200,
    animationTimingFunction: 'easeIn',
    animationIterationCount: 'infinite',
    transformOrigin: 'bottom',
    animationName: {
      '0%,100%': {
        transform: [{ scaleX: 1.5 }, { scaleY: 0.5 }],
      },
      '20%': {
        transform: [{ scaleY: 1.2 }],
      },
      '40%,80%': {
        transform: [{ translateY: -210 }],
      },
      '70%': {
        transform: [{ translateY: -220 }],
      },
      '90%': {
        transform: [{ translateY: 0 }],
      }
    },
  },
  shadow: {
    zIndex: -1,
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
    width: 80,
    height: 80,
    borderRadius: '100%',
    marginTop: -70,
    animationDuration: 1200,
    animationTimingFunction: 'easeIn',
    animationIterationCount: 'infinite',
    transformOrigin: 'bottom',
    animationName: {
      '0%,100%': {
        transform: [{ scaleX: 2 }, { scaleY: 0.8 }, { rotateX: '80deg' }],
      },
      '20%': {
        transform: [{ scaleX: 1.2 }, { scaleY: 0.8 }, { rotateX: '80deg' }],
      },
      '40%,80%': {
        transform: [{ scaleX: 0.5 }, { scaleY: 0.2 }, { rotateX: '80deg' }],
      },
      '70%': {
        transform: [{ scaleX: 0.5 }, { scaleY: 0.15 }, { rotateX: '80deg' }],
      },
      '90%': {
        transform: [{ scaleX: 1.5 }, { scaleY: 0.6 }, { rotateX: '80deg' }],
      },
    },
  }
});