Moti useDynamicAnimation

gistfile1.tsx

import { MotiView, useDynamicAnimation } from 'moti';
import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { Text, TouchableOpacity, View } from 'react-native';

const Buttons = ({ toggleRefresh, toggleAnimate }) => {
  return (
    <View style={styles.buttons}>
      <TouchableOpacity
        onPress={toggleRefresh}
        style={[styles.button, { backgroundColor: 'green' }]}
      >
        <Text>Refresh Screen</Text>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={toggleAnimate}
        style={[styles.button, { backgroundColor: 'blue' }]}
      >
        <Text>Animate</Text>
      </TouchableOpacity>
    </View>
  );
};

const App = () => {
  const [forceUpdate, setForceUpdate] = useState(false);

  const redCirclAnimation = useDynamicAnimation(() => {
    return {
      scale: 0,
      opacity: 0,
    };
  });

  const greenCirclAnimation = useDynamicAnimation(() => {
    return {
      scale: 1,
      opacity: 1,
    };
  });

  function onAnimate() {
    redCirclAnimation.animateTo({
      scale: [1, { value: 0, delay: 2000 }],
      opacity: [1, { value: 0, delay: 2000 }],
    });

    greenCirclAnimation.animateTo({
      scale: [0, { value: 1, delay: 2000 }],
      opacity: [0, { value: 1, delay: 2000 }],
    });
  }

  function onForceUpdate() {
    setForceUpdate(true);
    setTimeout(() => setForceUpdate(false), 2000);
  }

  if (forceUpdate) {
    return (
      <View style={styles.container}>
        <View style={styles.content}>
          <Text>Loading..</Text>
        </View>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <MotiView state={greenCirclAnimation} style={styles.goal} />
        <MotiView state={redCirclAnimation} style={styles.rule} />
      </View>

      <Buttons toggleRefresh={onForceUpdate} toggleAnimate={onAnimate} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  notch: {
    position: 'absolute',
    left: 0,
    right: 0,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 1,
  },
  background: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttons: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    paddingTop: 100,
    position: 'absolute',
    bottom: 40,
  },
  button: {
    padding: 16,
    borderRadius: 8,
  },
  goal: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: 'green',
  },
  rule: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: 'red',
  },
  content: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  center: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

Can you please change .txt to .tsx so the file has syntax highlighting?