GlowButton.tsx

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

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

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

const styles = css.create({
  button: {
    backgroundColor: 'rgb(61, 67, 66)',
    padding: 20,
    borderRadius: 50,
  },
  buttonBackground: {
    borderRadius: 50,
    width: 250,
    height: 80,
    zIndex: -1,
    transform: [{ translateY: -80 }],
  },
  text: {
    color: 'white',
    fontSize: 30,
    textAlign: 'center',
    fontFamily: 'Poppins',
  },

  animationPulse: {
    animationTimingFunction: 'easeInOut',
    animationDuration: 1300,
    animationIterationCount: 'infinite',
    animationName: {
      '0%,100%': {
        boxShadow: [{
          blurRadius: 0,
          color: 'rgb(28, 178, 91)',
          offsetX: 0,
          offsetY: 0,
        }],
      },
      '50%': {
        boxShadow: [{
          blurRadius: 25,
          color: 'rgb(28, 178, 91)',
          offsetX: 0,
          offsetY: 0,
        }],
      },
    },
  },
});