📝 (transitions) add guides/transitions

Author: tpucci

docs/Roadmap.mdx

@@ -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/components/StrikeThrough.tsx

@@ -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/guides/Transitions.mdx

@@ -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/assets/rotateCrazy.gif

@@ -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/slideLeft.gif

@@ -3,22 +3,6 @@ name: Example
 route: /example
 ---
 
-# Example
-
-The following example runs with `react-native-web` 🎉
-
-import { Playground } from "docz";
-import { View } from "react-native";
-import App from "./App";
-
-<Playground>
-  <View style={{ alignItems: "center" }}>
-    <View style={{ width: 320, height: 568 }}>
-      <App />
-    </View>
-  </View>
-</Playground>
-
 ## Run the example project
 
 - Clone this repository.

docs/guides/assets/slideUp.gif

@@ -33,7 +33,7 @@ export class SignIn extends Component {
     },
     {
       Component: LastName,
-      Transitioner: SlideLeft,
+      Transitioner: RotateCrazy,
       name: 'lastName',
       onBack: this.goBackward,
       props: { onNext: this.goForward }

doczrc.js

@@ -1,6 +1,6 @@
 import React, { ComponentType } from 'react';
 
-import { TransitionComponentType } from './transitions/Transition.d';
+import { TransitionComponentType } from './transitions/Transition';
 
 export interface IStop<T extends string> {
   name: T;