Merge pull request #35 from productbrew/rn-reanimated-2

Update React Native Reanimated v2.2.

Author: dkmiecik

example/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

examples/.gitignore example/.gitignoreexamples/.gitignore renamed to example/.gitignore

@@ -1,5 +1,6 @@
-node_modules/**/*
-.expo/*
+node_modules/
+.expo/
+dist/
 npm-debug.*
 *.jks
 *.p8
@@ -8,4 +9,6 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
-web-report/
+
+# macOS
+.DS_Store

example/App.tsx

@@ -0,0 +1,53 @@
+import {StatusBar} from 'expo-status-bar';
+import React from 'react';
+import {StyleSheet, View, Button} from 'react-native';
+
+import FlipCard, { FlipSide, RotateAxis } from 'react-native-flip';
+import Side from "./Side";
+
+export default function App() {
+    const [side, setSide] = React.useState<FlipSide>(FlipSide.FRONT)
+    const [rotate, setRotate] = React.useState<RotateAxis>(RotateAxis.Y)
+
+    return (
+        <View style={styles.container}>
+            <Button
+                title={`Flip the card. The side of the card is: ${side}`}
+                onPress={() => {
+                    setSide((side: FlipSide) => (side === FlipSide.FRONT ? FlipSide.BACK : FlipSide.FRONT))
+                }}
+            />
+
+            <Button
+                title={`Change rotation. The card rotation is: ${rotate}`}
+                onPress={() => {
+                    setRotate((rotation: RotateAxis) => (rotation === RotateAxis.X ? RotateAxis.Y : RotateAxis.Y))
+                }}
+            />
+
+            <FlipCard
+                side={side}
+                rotate={rotate}
+                style={styles.flipContainer}
+                front={<Side title="FRONT" color="blue"/>}
+                back={<Side title="BACK" color="green"/>}
+            />
+            <StatusBar style="auto"/>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    flipContainer: {
+        height: 300,
+        width: 300,
+        borderWidth: 1,
+        borderColor: "red",
+    },
+});

example/Side.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import {Text, View, StyleSheet} from "react-native"
+
+type Props = {
+    title: string
+    color: string
+}
+
+const CardSide = ({title, color}: Props) => {
+    const [count, setCount] = React.useState(0)
+
+    React.useEffect(() => {
+        setInterval(() => {
+            setCount(count => count + Math.floor(Math.random() * 20))
+        }, 1000)
+    }, [])
+
+    return (
+        <View style={[styles.container, {backgroundColor: color}]}>
+            <Text style={styles.text}>{title}</Text>
+            <Text style={styles.text}>{count}</Text>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: "center",
+        width: 200,
+        height: 200,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: "gray",
+        margin: 'auto',
+    },
+    text: {
+        textAlign: "center",
+        color: "#fff",
+        fontSize: 20,
+    },
+})
+
+export default CardSide

examples/app.json example/app.jsonexamples/app.json renamed to example/app.json

@@ -1,14 +1,7 @@
 {
   "expo": {
-    "name": "react-native-flip-example",
-    "slug": "examples",
-    "privacy": "public",
-    "sdkVersion": "35.0.0",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
+    "name": "example",
+    "slug": "example",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -25,6 +18,15 @@
     ],
     "ios": {
       "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
     }
   }
-}
+}

example/assets/adaptive-icon.png

@@ -0,0 +1,21 @@
+const pak = require("../package.json");
+const path = require("path");
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          extensions: ['.tsx', '.ts', '.js', '.json'],
+          alias: {
+            // For development, we want to alias the library to the source
+            [pak.name]: path.join(__dirname, '..', pak.source),
+          },
+        },
+      ],
+      'react-native-reanimated/plugin',
+    ],
+  };
+};