OutlineButton.tsx

import React, { useState } from 'react';
import { Pressable, Text } from 'react-native';
import Animated, { css } from 'react-native-reanimated';

export default function OutlineButton() {
  const [pressed, setPressed] = useState(false);

  const animation1 = {
    animationName: css.keyframes({
      '0%': {
        transform: [{ translateY: -71 }, { scale: 1 }],
        opacity: 1,
      },
      '100%': {
        transform: [{ translateY: -71 }, { scale: 1.5 }],
        opacity: 0,
      },
    }),
  };
  const animation2 = {
    animationDelay: 100,
    animationName: css.keyframes({
      '0%': {
        transform: [{ translateY: -71*2 }, { scale: 1 }],
        opacity: 1,
      },
      '100%': {
        transform: [{ translateY: -71*2 }, { scale: 1.5 }],
        opacity: 0,
      },
    }),
  };

  return (
    <Pressable onPress={() => setPressed(!pressed)}>
      <Animated.View style={styles.button}>
        <Text style={styles.text}>CSS Button</Text>
      </Animated.View>
      <Animated.View style={[styles.buttonBackground, animation1]}/>
      <Animated.View style={[styles.buttonBackground, animation2]}/>
    </Pressable>
  );
}

const styles = css.create({
  button: {
    backgroundColor: 'rgb(15, 157, 140)',
    padding: 20,
    borderRadius: 50,
  },
  buttonBackground: {
    borderRadius: 50,
    width: 220,
    height: 70,
    zIndex: -1,
    animationTimingFunction: 'easeInOut',
    animationFillMode: 'both',
    animationDuration: 300,
    borderWidth: 5,
    borderColor: 'rgb(15, 157, 140)',
    opacity: 0,
  },
  text: {
    color: 'white',
    fontSize: 30,
    textAlign: 'center',
    fontWeight: 'bold',
  },
});