Hello, Transitioner

Author: ericvicenti

.babelrc

@@ -0,0 +1,3 @@
+{
+	"presets": ["react-native"]
+}

.gitignore

@@ -0,0 +1,6 @@
+*.DS_Store
+node_modules/**/*
+.expo/*
+npm-debug.*
+
+ios/build

.watchmanconfig

@@ -0,0 +1 @@
+{}

Animators.js

@@ -0,0 +1,21 @@
+import Animated, { Easing } from 'react-native-reanimated';
+
+export const createScreenSpringAnimator = toValue => progress =>
+	new Promise(resolve => {
+		if (Platform.OS === 'ios' && supportsImprovedSpringAnimation()) {
+			Animated.spring(progress, {
+				toValue,
+				stiffness: 5000,
+				damping: 600,
+				mass: 3,
+				useNativeDriver: true,
+			}).start(resolve);
+		} else {
+			Animated.timing(progress, {
+				toValue,
+				duration,
+				easing: EaseInOut,
+				useNativeDriver: true,
+			}).start(resolve);
+		}
+	});

App.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { View, Button } from "react-native";
+import {
+  createSwitchNavigator,
+  createNavigationContainer
+} from "react-navigation";
+import ExampleA from "./ExampleA";
+import ExampleB from "./ExampleB";
+import ExampleC from "./ExampleC";
+import ExampleD from "./ExampleD";
+import ExampleE from "./ExampleE";
+import ExampleT from "./ExampleT";
+import ExampleS from "./ExampleS";
+import ExampleZ from "./ExampleZ";
+
+import { Provider as LayoutProvider } from "./LayoutContext";
+
+const Examples = ({ navigation }) => (
+  <View style={{ flex: 1, justifyContent: "center" }}>
+    {Object.keys(EXAMPLES).map(exampleName => (
+      <Button
+        key={exampleName}
+        onPress={() => navigation.navigate(exampleName)}
+        title={exampleName}
+      />
+    ))}
+  </View>
+);
+
+const EXAMPLES = {
+  ExampleA,
+  ExampleB,
+  ExampleC,
+  ExampleD,
+  ExampleE,
+  // ExampleT,
+  ExampleS
+  // ExampleZ
+};
+
+const AppNavigator = createSwitchNavigator({
+  Examples,
+  ...EXAMPLES
+});
+
+// const StatefulAppNavigator = createNavigationContainer(AppNavigator);
+
+const App = () => (
+  <LayoutProvider style={{ flex: 1 }}>
+    <AppNavigator />
+  </LayoutProvider>
+);
+
+// export default ExampleZ;
+export default App;

BasicModalTransition.js

@@ -0,0 +1,91 @@
+import React from "react";
+import { StyleSheet, View, TouchableWithoutFeedback } from "react-native";
+import Animated, { Easing } from "react-native-reanimated";
+const { interpolate, timing, Value } = Animated;
+import { Consumer } from "./LayoutContext";
+
+const BasicModalTransitionWithLayout = ({
+  transition,
+  navigation,
+  children,
+  layout
+}) => {
+  const myKey = navigation.state.key;
+  let opacity = 1;
+  let transform = [];
+  if (transition) {
+    const { fromState, toState, progress } = transition;
+    const fromKey = fromState.routes[fromState.index].key;
+    const toKey = toState.routes[toState.index].key;
+    const fromOpacity = myKey === fromKey ? 1 : 0;
+    const toOpacity = myKey === toKey ? 1 : 0;
+    console.log({ myKey, fromOpacity, toOpacity, toKey });
+    opacity = interpolate(progress, {
+      inputRange: [0, 1],
+      outputRange: [fromOpacity, toOpacity]
+    });
+    const translateDist = layout.height;
+    const fromTranslate = myKey === fromKey ? 0 : translateDist;
+    const toTranslate = myKey === toKey ? 0 : translateDist;
+    console.log("interpolating from ", { fromTranslate, toTranslate });
+    transform = [
+      {
+        translateY: interpolate(progress, {
+          inputRange: [0, 1],
+          outputRange: [fromTranslate, toTranslate]
+        })
+      }
+    ];
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <TouchableWithoutFeedback
+        onPress={() => {
+          navigation.goBack();
+        }}
+      >
+        <Animated.View
+          useNativeDriver={true}
+          style={{
+            ...StyleSheet.absoluteFillObject,
+            opacity,
+            backgroundColor: "#0009"
+          }}
+        />
+      </TouchableWithoutFeedback>
+      <Animated.View
+        useNativeDriver={true}
+        style={{
+          flex: 1,
+          transform,
+          margin: 50
+        }}
+      >
+        {children}
+      </Animated.View>
+    </View>
+  );
+};
+
+const BasicModalTransition = props => (
+  <Consumer>
+    {layout => <BasicModalTransitionWithLayout {...props} layout={layout} />}
+  </Consumer>
+);
+
+BasicModalTransition.navigationOptions = {
+  createTransition: transition => {
+    return { ...transition, progress: new Value(0) };
+  },
+  runTransition: transition =>
+    new Promise(resolve => {
+      timing(transition.progress, {
+        toValue: 1,
+        duration: 500,
+        easing: Easing.inOut(Easing.cubic)
+      }).start(resolve);
+    })
+};
+
+export default BasicModalTransition;