✨ (transitions) support slide transitions

Author: tpucci

__mocks__/react.js

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
+    "postinstall": "patch-package",
     "start": "node ../node_modules/react-native/local-cli/cli.js start",
     "test:lint": "cd .. && yarn tslint example/src/**/*.ts{,x} && cd example",
     "test:unit": "cd .. && yarn jest --config=example/jest.config.js && cd example",

example/package.json

@@ -8,7 +8,7 @@ export class FirstName extends Component<IProps> {
   render() {
     return (
       <View style={styles.container}>
-        <Text>Waht is your first name ?</Text>
+        <Text>What is your first name ?</Text>
         <TextInput placeholder="Type here" />
         <Button title="Next" onPress={this.props.onNext} />
       </View>

example/src/canals/SignIn/FirstName.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { createCanal } from 'react-gondola';
+import { SlideLeft, SlideUp, RotateCrazy } from 'react-gondola/transitions';
 import { FirstName } from './FirstName';
 import { LastName } from './LastName';
 import { Confirm } from './Confirm';
@@ -32,11 +33,17 @@ export class SignIn extends Component {
     },
     {
       Component: LastName,
+      Transitioner: SlideLeft,
       name: 'lastName',
       onBack: this.goBackward,
       props: { onNext: this.goForward }
     },
-    { name: 'confirm', Component: Confirm, onBack: this.goBackward }
+    {
+      Component: Confirm,
+      Transitioner: RotateCrazy,
+      name: 'confirm',
+      onBack: this.goBackward
+    }
   ]);
 
   render() {

example/src/canals/SignIn/SignIn.tsx

@@ -29,6 +29,7 @@
     "moduleResolution": "node",
     "paths": {
       "react-gondola": ["../../src"],
+      "react-gondola/*": ["../../src/*"],
       "mobx": ["../node_modules/mobx"],
       "mobx-react": ["../node_modules/mobx-react"],
       "react": ["../node_modules/react"],

example/tsconfig.json

@@ -4,4 +4,17 @@ configure({
   enforceActions: 'observed',
 });
 
-Date.now = jest.fn(() => 0);
+Date.now = jest.fn(() => 0);
+
+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');

jest/setup.js

@@ -55,6 +55,8 @@
     "mobx": "^5.9.4",
     "mobx-react": "^5.4.3",
     "mobx-utils": "^5.4.0",
+    "patch-package": "^6.1.2",
+    "postinstall-postinstall": "^2.0.0",
     "prettier": "^1.16.4",
     "react": "16.8.6",
     "react-dom": "16.8.6",

package.json

@@ -0,0 +1,55 @@
+diff --git a/node_modules/react-native-reanimated/react-native-reanimated.d.ts b/node_modules/react-native-reanimated/react-native-reanimated.d.ts
+index 7a30d62..506a2a7 100644
+--- a/node_modules/react-native-reanimated/react-native-reanimated.d.ts
++++ b/node_modules/react-native-reanimated/react-native-reanimated.d.ts
+@@ -12,6 +12,7 @@ declare module 'react-native-reanimated' {
+     ViewStyle,
+     TextStyle,
+     ImageStyle,
++    TransformsStyle
+   } from 'react-native';
+   namespace Animated {
+     class AnimatedNode<T> {
+@@ -64,11 +65,11 @@ declare module 'react-native-reanimated' {
+       right: Adaptable<number>
+     ) => AnimatedNode<T>;
+     type UnaryOperator = (value: Adaptable<number>) => AnimatedNode<number>;
+-    type MultiOperator = (
++    type MultiOperator<T = number> = (
+       a: Adaptable<number>,
+       b: Adaptable<number>,
+       ...others: Adaptable<number>[]
+-    ) => AnimatedNode<number>;
++    ) => AnimatedNode<T>;
+ 
+     export interface DecayState {
+       finished: AnimatedValue<number>;
+@@ -141,8 +142,10 @@ declare module 'react-native-reanimated' {
+ 
+     export const SpringUtils: SpringUtils
+ 
++    type AnimatedTransform = { [P in keyof TransformsStyle["transform"]]: Animated.Adaptable<TransformsStyle["transform"][P]> };
++
+     type AnimateStyle<S extends object> = {
+-      [K in keyof S]: S[K] extends ReadonlyArray<any>
++      [K in keyof S]: K extends 'transform' ? AnimatedTransform : (S[K] extends ReadonlyArray<any>
+         ? ReadonlyArray<AnimateStyle<S[K][0]>>
+         : S[K] extends object
+           ? AnimateStyle<S[K]>
+@@ -151,7 +154,7 @@ declare module 'react-native-reanimated' {
+               | AnimatedNode<
+                   // allow `number` where `string` normally is to support colors
+                   S[K] extends string ? S[K] | number : S[K]
+-                >
++                >)
+     };
+ 
+     type AnimateProps<
+@@ -195,6 +198,7 @@ declare module 'react-native-reanimated' {
+     export const pow: MultiOperator;
+     export const modulo: MultiOperator;
+     export const sqrt: UnaryOperator;
++    export const log: UnaryOperator;
+     export const sin: UnaryOperator;
+     export const cos: UnaryOperator;
+     export const tan: UnaryOperator;

patches/react-native-reanimated+1.1.0.patch

@@ -18,11 +18,11 @@ export class FullScreenPortal extends ReactComponent {
             if (this.fullScreenStack.current) {
               return (
                 this.fullScreenStack.current &&
-                this.fullScreenStack.current.map(({ Component, name }) => (
-                  <View style={StyleSheet.absoluteFill} key={name}>
-                    <Component />
-                  </View>
-                ))
+                this.fullScreenStack.current.map(
+                  ({ Component, name, isAuthorized }) => (
+                    <Component isAuthorized={isAuthorized} key={name} />
+                  )
+                )
               );
             }
             return null;

src/FullScreenPortal.tsx

@@ -1,7 +1,12 @@
 import { ComponentType } from 'react';
 
 export interface IStop {
-  Component: ComponentType;
+  Component: ComponentType<IStopComponentProps>;
   isFullScreen?: boolean;
   name: string;
+  isAuthorized: boolean;
+}
+
+export interface IStopComponentProps {
+  isAuthorized: boolean;
 }