add reanimated1

Author: Henning Hall

.prettierrc.js

@@ -3,4 +3,5 @@ module.exports = {
   jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',
+  semi: false,
 };

package.json

@@ -14,6 +14,7 @@
     "react-native": "0.62.2",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-reanimated": "^2.0.0-alpha.1",
+    "react-native-reanimated-1": "npm:react-native-reanimated@^1.9.0",
     "react-native-vector-icons": "^6.6.0"
   },
   "devDependencies": {

src/HeavyLoad.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import {View} from 'react-native'
 
-const componentsToRender = 3000
+const componentsToRender = 5000
 
 export const HeavyLoad = () => {
   return (

src/libs/Reanimated1.js

@@ -1,10 +1,40 @@
-import React from 'react'
-import {Text} from '../Text'
+import React, {useRef, useState} from 'react';
+import {Transition, Transitioning} from 'react-native-reanimated';
+import {Card} from '../Card';
+import {CardContainer} from '../CardContainer';
+import {
+  animationDuration,
+  collapsedHeight,
+  expandedHeight,
+  initialHeight,
+} from '../constants';
+
+const transition = (
+  <Transition.Change interpolation="easeInOut" durationMs={animationDuration} />
+);
+
+export const Reanimated1 = ({heavyLoad}) => {
+  const ref = useRef();
+  let [height, setHeight] = useState(initialHeight);
+
+  const onPress = () => {
+    ref.current.animateNextTransition();
+    setHeight(height === expandedHeight ? collapsedHeight : expandedHeight);
+  };
 
-export const Reanimated1 = () => {
   return (
-    <Text style={{margin: 20, textAlign: 'center'}}>
-      Checkout branch "reanimated1"
-    </Text>
-  )
-}
+    <Transitioning.View ref={ref} transition={transition}>
+      <CardContainer>
+        <Card />
+      </CardContainer>
+
+      <CardContainer style={{height}} onPress={onPress}>
+        <Card expandable heavyLoad={heavyLoad} />
+      </CardContainer>
+
+      <CardContainer>
+        <Card />
+      </CardContainer>
+    </Transitioning.View>
+  );
+};

yarn.lock

@@ -5527,6 +5527,13 @@ react-native-gesture-handler@^1.6.1:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
+"react-native-reanimated-1@npm:react-native-reanimated@^1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.9.0.tgz#38676c99dd585504fdc7331efb45e5f48ec7339a"
+  integrity sha512-Aj+spgIHRiVv7ezGADxnSH1EoKrQRD2+XaSiGY0MiB/pvRNNrZPSJ+3NVpvLwWf9lZMOP7dwqqyJIzoZgBDt8w==
+  dependencies:
+    fbjs "^1.0.0"
+
 react-native-reanimated@^2.0.0-alpha.1:
   version "2.0.0-alpha.1"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.0.0-alpha.1.tgz#d8d451aeb8e31b59e36664749a2c00c736c981e9"