1import React, { useState } from 'react';
2import {
3  View,
4  Text,
5  StyleSheet,
6  ScrollView,
7  TouchableOpacity,
8  TouchableWithoutFeedback,
9} from 'react-native';
10import Animated, {
11  FadeIn,
12  FlipInXUp,
13  FlipInYLeft,
14  FlipInXDown,
15  FlipInYRight,
16  FlipInEasyX,
17  FlipInEasyY,
18  FlipOutXUp,
19  FlipOutYLeft,
20  FlipOutXDown,
21  FlipOutYRight,
22  FlipOutEasyX,
23  FlipOutEasyY,
24} from 'react-native-reanimated';
25
26interface AnimatedBlockProps {
27  name: string;
28  animatedStyle: Record<string, any>;
29  defaultShow?: boolean;
30}
31
32const AnimatedBlock = ({ name, animatedStyle, defaultShow }: AnimatedBlockProps) => {
33  const [show, setShow] = useState(defaultShow);
34  return (
35    <View style={styles.animatedBox}>
36      {show ? (
37        <TouchableWithoutFeedback onPress={() => setShow(!show)}>
38          <Animated.View style={styles.animatedBlock} {...animatedStyle}>
39            <Text style={styles.animatedText}>{name}</Text>
40          </Animated.View>
41        </TouchableWithoutFeedback>
42      ) : null}
43      {!show ? (
44        <Animated.View entering={'entering' in animatedStyle ? undefined : FadeIn.delay(350)}>
45          <TouchableOpacity style={styles.animatedBlockPlaceholder} onPress={() => setShow(!show)}>
46            <Text style={styles.animatedTextPlaceholder}>{name}</Text>
47          </TouchableOpacity>
48        </Animated.View>
49      ) : null}
50    </View>
51  );
52};
53
54export default function ReanimatedLayoutAnimation() {
55  return (
56    <ScrollView style={{ flexDirection: 'column' }}>
57      <Text style={styles.groupText}>Flip in</Text>
58      <AnimatedBlock name="FlipInYRight" animatedStyle={{ entering: FlipInYRight }} />
59      <AnimatedBlock name="FlipInYLeft" animatedStyle={{ entering: FlipInYLeft }} />
60      <AnimatedBlock name="FlipInXUp" animatedStyle={{ entering: FlipInXUp }} />
61      <AnimatedBlock name="FlipInXDown" animatedStyle={{ entering: FlipInXDown }} />
62      <AnimatedBlock name="FlipInEasyX" animatedStyle={{ entering: FlipInEasyX }} />
63      <AnimatedBlock name="FlipInEasyY" animatedStyle={{ entering: FlipInEasyY }} />
64
65      <Text style={styles.groupText}>Flip out</Text>
66      <AnimatedBlock name="FlipOutYRight" animatedStyle={{ exiting: FlipOutYRight }} />
67      <AnimatedBlock name="FlipOutYLeft" animatedStyle={{ exiting: FlipOutYLeft }} />
68      <AnimatedBlock name="FlipOutXUp" animatedStyle={{ exiting: FlipOutXUp }} />
69      <AnimatedBlock name="FlipOutXDown" animatedStyle={{ exiting: FlipOutXDown }} />
70      <AnimatedBlock name="FlipOutEasyX" animatedStyle={{ exiting: FlipOutEasyX }} />
71      <AnimatedBlock name="FlipOutEasyY" animatedStyle={{ exiting: FlipOutEasyY }} />
72    </ScrollView>
73  );
74}
75
76const styles = StyleSheet.create({
77  groupText: {
78    fontSize: 20,
79    paddingTop: 5,
80    paddingLeft: 5,
81    paddingBottom: 5,
82  },
83  animatedBlock: {
84    height: 60,
85    width: 300,
86    borderWidth: 3,
87    borderColor: '#001a72',
88    backgroundColor: '#001a72',
89    alignItems: 'center',
90    justifyContent: 'center',
91  },
92  animatedTextPlaceholder: {
93    color: '#001a72',
94    fontSize: 20,
95  },
96  animatedBlockPlaceholder: {
97    height: 60,
98    width: 300,
99    borderWidth: 3,
100    borderColor: '#001a72',
101    alignItems: 'center',
102    justifyContent: 'center',
103    borderStyle: 'dashed',
104  },
105  animatedText: {
106    color: '#ffffff',
107    fontSize: 20,
108  },
109  animatedBox: {
110    padding: 5,
111    alignItems: 'center',
112  },
113});
114