Add opacity to back side

Author: czystyl

examples/App.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { View, StyleSheet, Button } from "react-native"
 
-import FlipCard from "../index"
+import FlipCard from "../src/index"
 import Side from "./Side"
 
 const App = () => {

examples/babel.config.js

@@ -2,15 +2,5 @@ module.exports = function(api) {
   api.cache(true)
   return {
     presets: ["babel-preset-expo"],
-    plugins: [
-      [
-        "module-resolver",
-        {
-          alias: {
-            "react-native-flip": "../index",
-          },
-        },
-      ],
-    ],
   }
 }

src/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { StyleSheet } from "react-native"
 import Animated from "react-native-reanimated"
-import { bInterpolate, spring } from "react-native-redash"
+import { spring } from "react-native-redash"
 
 const {
   Value,
@@ -44,22 +44,32 @@ const ReanimatedFlip = ({ perspective = 350, side, front, back }: Props) => {
     [side]
   )
 
-  const rotateY = concat(bInterpolate(flipPosition, 0, 180), "deg")
+  const rotatePosition = interpolate(flipPosition, {
+    inputRange: [0, 1],
+    outputRange: [0, 180],
+  })
+  const rotateY = concat(rotatePosition, "deg")
 
-  const opacity = interpolate(flipPosition, {
+  const opacityFront = interpolate(flipPosition, {
     inputRange: [0.5, 0.51],
     outputRange: [1, 0],
     extrapolate: Animated.Extrapolate.CLAMP,
   })
 
+  const opacityBack = interpolate(flipPosition, {
+    inputRange: [0.5, 0.51],
+    outputRange: [0, 1],
+    extrapolate: Animated.Extrapolate.CLAMP,
+  })
+
   return (
     <Animated.View style={styles.container}>
       <Animated.View
         style={[
           styles.side,
           styles.front,
           {
-            opacity,
+            opacity: opacityFront,
             transform: [{ perspective }, { rotateY }],
           },
         ]}
@@ -71,6 +81,7 @@ const ReanimatedFlip = ({ perspective = 350, side, front, back }: Props) => {
           styles.side,
           styles.back,
           {
+            opacity: opacityBack,
             transform: [{ perspective }, { rotateY: "180deg" }, { rotateY }],
           },
         ]}