friday-2023.09.29-transforms.tsx

import React from "react";
import { SafeAreaView, View, StyleSheet } from "react-native";
import Slider from "@react-native-community/slider";
import Animated, {
  interpolate,
  useAnimatedStyle,
  useDerivedValue,
  useSharedValue,
  useAnimatedProps,
} from "react-native-reanimated";
import { TextInput } from "react-native-gesture-handler";
const TransformsScreen = () => {
  const sliderValue = useSharedValue(0);

  const degrees = useDerivedValue(() => {
    return interpolate(sliderValue.value, [0, 1], [0, 90]);
  });
  const translate = useDerivedValue(() => {
    return interpolate(sliderValue.value, [0, 1], [0, 100]);
  });
  const scale = useDerivedValue(() => {
    return interpolate(sliderValue.value, [0, 1], [0.5, 2]);
  });

  const scaleAnimatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: scale.value }],
    };
  });
  const rotateAnimatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          rotate: `${degrees.value}deg`,
        },
      ],
    };
  });
  const skewXAnimatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          skewX: `${degrees.value}deg`,
        },
      ],
    };
  });
  const skewYAnimatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          skewY: `${degrees.value}deg`,
        },
      ],
    };
  });
  const translateXAnimatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateX: translate.value,
        },
      ],
    };
  });
  const translateYAnimatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: translate.value,
        },
      ],
    };
  });

  const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

  const animatedTextPropsScale = useAnimatedProps(() => {
    return {
      text: "Scale " + scale.value.toPrecision(2).toString(),
      multiline: true,
    };
  });
  const animatedTextPropsRotate = useAnimatedProps(() => {
    return {
      text: "Rotate " + degrees.value.toPrecision(2).toString() + " degrees",
      multiline: true,
    };
  });

  const animatedTextPropsSkewX = useAnimatedProps(() => {
    return {
      text: "Skew X " + degrees.value.toPrecision(2).toString() + " degrees",
      multiline: true,
    };
  });
  const animatedTextPropsSkewY = useAnimatedProps(() => {
    return {
      text: "Skew Y " + degrees.value.toPrecision(2).toString() + " degrees",
      multiline: true,
    };
  });
  const animatedTextPropsTranslateX = useAnimatedProps(() => {
    return {
      text: "TranslateX " + translate.value.toPrecision(3).toString(),
      multiline: true,
    };
  });
  const animatedTextPropsTranslateY = useAnimatedProps(() => {
    return {
      text: "TranslateY " + translate.value.toPrecision(3).toString(),
      multiline: true,
    };
  });
  const AnimatedText = ({
    aProps,
  }: {
    aProps: { text?: string; multiline?: boolean };
  }) => {
    return (
      <AnimatedTextInput
        style={styles.animatedText}
        animatedProps={aProps}
      ></AnimatedTextInput>
    );
  };

  return (
    <SafeAreaView
      style={{
        flex: 1,
        justifyContent: "space-around",
        backgroundColor: "#202020",
      }}
    >
      <View
        style={{
          justifyContent: "space-around",
          flexDirection: "column",
          margin: 15,
        }}
      >
        <View style={styles.row}>
          <Animated.View style={[scaleAnimatedStyle, styles.block]}>
            <AnimatedText aProps={animatedTextPropsScale} />
          </Animated.View>
          <Animated.View style={[rotateAnimatedStyle, styles.block]}>
            <AnimatedText aProps={animatedTextPropsRotate} />
          </Animated.View>
        </View>

        <View style={styles.row}>
          <Animated.View style={[skewXAnimatedStyle, styles.block]}>
            <AnimatedText aProps={animatedTextPropsSkewX} />
          </Animated.View>
          <Animated.View style={[skewYAnimatedStyle, styles.block]}>
            <AnimatedText aProps={animatedTextPropsSkewY} />
          </Animated.View>
        </View>

        <View style={styles.row}>
          <Animated.View style={[translateXAnimatedStyle, styles.block]}>
            <AnimatedText aProps={animatedTextPropsTranslateX} />
          </Animated.View>
          <Animated.View style={[translateYAnimatedStyle, styles.block]}>
            <AnimatedText aProps={animatedTextPropsTranslateY} />
          </Animated.View>
        </View>
      </View>

      <Slider
        style={{ marginHorizontal: 15 }}
        onValueChange={(value) => (sliderValue.value = value)}
        minimumValue={0}
        maximumValue={1}
        step={0.01}
      />
    </SafeAreaView>
  );
};

export default TransformsScreen;

const styles = StyleSheet.create({
  block: {
    backgroundColor: "#7293A0",
    height: 120,
    width: 120,
    margin: 5,
    padding: 5,
    justifyContent: "center",
    alignItems: "center",
  },
  row: { flexDirection: "row", justifyContent: "space-around" },
  animatedText: { fontSize: 20, textAlign: "center", color: "white" },
});