Animations.tsx

import React, { useRef, useState } from 'react'
import {
  StyleSheet,
  Text,
  View,
  ViewStyle,
  Animated,
  Button,
  Easing,
  Alert,
} from 'react-native'
import {
  PanGestureHandler,
  PanGestureHandlerGestureEvent,
} from 'react-native-gesture-handler'

export interface IAnimationsProps {
  name: string
}

export const Animations: React.SFC<IAnimationsProps> = ({ name }) => {
  const myValue = useRef(new Animated.Value(0)).current
  const myValue2 = useRef(new Animated.Value(0)).current

  const handlePress = () => {
    Animated.parallel([
      Animated.timing(myValue, {
        toValue: 1,
        duration: 1000,
        easing: Easing.linear,
        // useNativeDriver: true,
      }),
      Animated.timing(myValue2, {
        toValue: 1,
        duration: 100,
        easing: Easing.exp,
        useNativeDriver: true,
      }),
    ]).start()
  }

  const touchY = useRef(new Animated.Value(0)).current

  const scale = myValue.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 3],
    // extrapolate: 'clamp',
  })

  const opacity = myValue.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 0.5],
  })

  const _onPanGestureEvent = Animated.event(
    [{ nativeEvent: { translationY: touchY } }]
    // { useNativeDriver: true }
  )

  const rotateY = touchY.interpolate({
    inputRange: [0, 100],
    outputRange: ['0deg', '360deg'],
  })

  const [toggle, setToggle] = useState(false)

  return (
    <View style={styles.wrapper}>
      {/* <View
        style={[
          StyleSheet.absoluteFill,
          {
            backgroundColor: '#000',
          },
        ]}
      /> */}
      <PanGestureHandler onGestureEvent={_onPanGestureEvent}>
        <Animated.View
          style={{
            width: 100,
            height: 100,
            opacity: opacity,
            backgroundColor: 'red',
            transform: [
              {
                scale,
              },
            ],
          }}
        />
      </PanGestureHandler>

      <Animated.View
        style={{
          width: 100,
          height: 100,
          backgroundColor: 'blue',
          transform: [
            {
              rotateZ: rotateY,
            },
          ],
        }}
      ></Animated.View>
      <Button title="START" onPress={handlePress} />
      <Button
        title="MA OE"
        onPress={() => {
          touchY.setValue(0)
          Animated.spring(touchY, {
            tension: 0.5,
            toValue: 100,
            // useNativeDriver: true,
          }).start()
          // setToggle(t => !t)
        }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  } as ViewStyle,
})