Merge pull request #138 from tpucci/transitions

Transitions

Author: tpucci

__mocks__/react.js

@@ -7,8 +7,10 @@ route: /roadmap
 
 If there is a real interest on `react-gondola` and its phylosophy, I might add support for the following features:
 
-- go back event listener
-- transitions
+import { StrikeThrough } from "./components/StrikeThrough";
+
+- <StrikeThrough>go back event listener</StrikeThrough> 🎉 Done !
+- <StrikeThrough>transitions</StrikeThrough> 🎉 Done !
 - navigation gestures
 
 Tweet me some encouragements 😁 and star the repo !

docs/Roadmap.mdx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+export function StrikeThrough(props: { children: string }) {
+  return (
+    <Text
+      style={{
+        textDecorationLine: 'line-through',
+        textDecorationStyle: 'solid'
+      }}
+    >
+      {props.children}
+    </Text>
+  );
+}

docs/components/StrikeThrough.tsx

@@ -0,0 +1,59 @@
+---
+name: Transitions
+menu: Guides
+route: /guides/transitions
+---
+
+# Transitions
+
+In order to use transitions between two screens, simply add the `Transitioner` key to your stops.
+
+## Basic example
+
+```ts
+import React from "react";
+import { createCanal } from "react-gondola";
+import { SildeLeft } from "react-gondola/transitions";
+import { FirstName } from "./FirstName";
+import { LastName } from "./LastName";
+
+const SignInCanal = createCanal([
+  { name: "firstName", Component: FirstName },
+  { name: "lastName", Component: LastName, Transitioner: SildeLeft }
+]);
+```
+
+## Available transitioners
+
+|                             Transitioner                              | Import                                                     |                      transition                      |
+| :-------------------------------------------------------------------: | ---------------------------------------------------------- | :--------------------------------------------------: |
+|                              `SildeLeft`                              | `import { SildeLeft } from "react-gondola/transitions";`   |   ![Slide Left transition](./assets/slideLeft.gif)   |
+|                               `SildeUp`                               | `import { SildeUp } from "react-gondola/transitions";`     |     ![Slide Up transition](./assets/slideUp.gif)     |
+| `RotateCrazy` (⚠️ experimental: this might be removed without notice) | `import { RotateCrazy } from "react-gondola/transitions";` | ![Rotate Crazy transition](./assets/rotateCrazy.gif) |
+
+## Create your own transitioner
+
+You can create your own transitioner if the one availables does not fit your needs ! Get some inspiration by looking at `SlideLeft` source code and get started !
+
+1. Your transitioner need to extend `TransitionComponent` (imported from `react-gondola/transitions`).
+2. Your transitioner will receive a `directionForward` prop. If true, your transitioner need to play the transition forward. Else, it need to play the transition backward.
+3. (Optionnal but recommended) If you use jest, you can test your component using `describeTransitioner` from `react-gondola/transitions/describeTransitioner`
+
+⚠️ If you use jest and want to test you Transitioner wihch uses `react-native-reanimated`, make sure you correctly mocked `react-native-reanimated`.
+
+```js
+// in your jest setup file, use the following
+
+jest.mock("react-native-reanimated/src/ReanimatedEventEmitter");
+jest.mock("react-native-reanimated/src/ReanimatedModule", () => ({
+  configureNativeProps: () => {},
+  connectNodes: () => {},
+  disconnectNodes: () => {},
+  createNode: () => {},
+  configureProps: () => {},
+  getValue: () => {},
+  dropNode: () => {}
+}));
+jest.mock("react-native-reanimated/src/derived/evaluateOnce");
+jest.mock("react-native-reanimated/src/core/AnimatedProps");
+```

docs/guides/Transitions.mdx

@@ -6,6 +6,7 @@ module.exports = {
   menu: [
     'Welcome',
     'Getting Started',
+    { name: 'Guides', menu: ['Transitions'] },
     'Example',
     'Contribute',
     'Roadmap',
@@ -16,6 +17,7 @@ module.exports = {
     config.resolve.alias = Object.assign({}, config.resolve.alias, {
       'react-native$': 'react-native-web',
       'react-gondola$': path.resolve(__dirname, 'src/index.ts'), // eslint-disable-line
+      'react-gondola/transitions$': path.resolve(__dirname, 'src/transitions/index.ts'), // eslint-disable-line
     });
     return config;
   },

docs/guides/assets/rotateCrazy.gif

@@ -138,6 +138,7 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-reanimated')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
     implementation "com.facebook.react:react-native:+"  // From node_modules

docs/guides/assets/slideLeft.gif

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.swmansion.reanimated.ReanimatedPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -22,7 +23,8 @@ public boolean getUseDeveloperSupport() {
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
-          new MainReactPackage()
+          new MainReactPackage(),
+          new ReanimatedPackage()
       );
     }