react-navigation-transitions - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

package.json

 {
   "name": "react-navigation-transitions",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Custom transitions for react-navigation",
@@ -5,0 +5,0 @@ "author": "Phil Mok",

README.md

@@ -19,2 +19,7 @@ # react-navigation-transitions
 
+`flipY`
+
+`flipX`
+
+
 More will be added in future versions.
@@ -39,3 +44,3 @@
     initialRouteName: 'ScreenA',
-    transitionConfig: fromLeft,
+    transitionConfig: () => fromLeft(),
   },
@@ -42,0 +47,0 @@ );

src/index.js

@@ -119,1 +119,43 @@ import { Animated, Easing } from 'react-native';
 }
+
+export function flipY(duration = 300) {
+  return {
+    transitionSpec: {
+      duration,
+      easing: Easing.out(Easing.poly(4)),
+      timing: Animated.timing,
+      useNativeDriver: true,
+    },
+    screenInterpolator: ({ position, scene }) => {
+      const { index } = scene;
+
+      const rotateY = position.interpolate({
+        inputRange: [index - 1, index],
+        outputRange: ['180deg', '0deg'],
+      });
+
+      return { transform: [{ rotateY }], backfaceVisibility: 'hidden' };
+    },
+  };
+}
+
+export function flipX(duration = 300) {
+  return {
+    transitionSpec: {
+      duration,
+      easing: Easing.out(Easing.poly(4)),
+      timing: Animated.timing,
+      useNativeDriver: true,
+    },
+    screenInterpolator: ({ position, scene }) => {
+      const { index } = scene;
+
+      const rotateX = position.interpolate({
+        inputRange: [index - 1, index],
+        outputRange: ['180deg', '0deg'],
+      });
+
+      return { transform: [{ rotateX }], backfaceVisibility: 'hidden' };
+    },
+  };
+}

No alert changes

Improved metrics

Total package byte prevSize

6692

increased by18.38%

Lines of code

137

increased by35.64%

Number of lines in readme file

55

increased by10%

No dependency changes