🐛 (transition) fix

Author: tpucci

.npmignore

@@ -16,3 +16,7 @@ jest
 
 # Doc
 .docz
+
+# TSDX Code gen
+.rts2_cache_cjs
+.rts2_cache_esm

example/__tests__/App-test.tsx renamed to example/__tests__/App.test.tsx

@@ -1,6 +1,6 @@
 import 'react-native';
 import React from 'react';
-import App from '../App';
+import {App} from '../src/App';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';

example/jest.config.js

@@ -1,5 +1,13 @@
 module.exports = {
-  preset: 'react-native',
+  moduleDirectories: ['node_modules', '../node_modules'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  moduleNameMapper: {
+    '^react-nonav$': '<rootDir>/../src/',
+    '^react-native$': '<rootDir>/node_modules/react-native/',
+    '^react-native-reanimated$':
+      '<rootDir>/node_modules/react-native-reanimated/',
+  },
+  modulePathIgnorePatterns: ['<rootDir>/../node_modules/react-native/'],
+  preset: 'react-native',
   setupFiles: ['<rootDir>/jest.setup.js'],
 };

example/metro.config.js

@@ -19,6 +19,7 @@ module.exports = {
   resolver: {
     blacklistRE: blacklist([
       new RegExp(`${rootPath}/node_modules/react-native/.*`),
+      new RegExp(`${rootPath}/node_modules/react-native-reanimated/.*`),
     ]),
     extraNodeModules: {
       'react-nonav': path.resolve(__dirname, '../src'),

example/package.json

@@ -8,6 +8,7 @@
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
+    "test:ci": "jest --runInBand",
     "lint": "eslint ."
   },
   "dependencies": {

example/src/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, StatusBar, Text} from 'react-native';
+import {StyleSheet, StatusBar} from 'react-native';
 import {FullScreenPortal, Canal, Screen, transition} from 'react-nonav';
 import {Home} from './canals/home/Home';
 import {Player} from './canals/player/Player';
@@ -16,16 +16,16 @@ const styles = StyleSheet.create({
 console.disableYellowBox = true;
 
 export const App = observer(() => (
-  <>
+  <FullScreenPortal>
     <StatusBar barStyle="light-content" />
     <Canal style={styles.appContainer}>
       <Screen name="Home" Component={Home} visible />
       <Screen
         name="Player"
-        Transitioner={transition.SlideLeft}
+        Transitioner={transition.SlideUp}
         Component={Player}
         visible={PlayerModule.isMoviePlaying}
       />
     </Canal>
-  </>
+  </FullScreenPortal>
 ));

example/src/canals/home/Home.tsx

@@ -6,7 +6,6 @@ import {TabBar} from '../../atoms/TabBar';
 
 import {HomeScreen} from './screens/HomeScreen';
 import {DownloadScreen} from './screens/DownloadScreen';
-import {FadeTransitioner} from '../../atoms/FadeTransitioner';
 
 export const Home = () => {
   const [navigationScreen, setNavigationState] = useState('Home');
@@ -18,13 +17,13 @@ export const Home = () => {
           name="Home"
           Component={HomeScreen}
           visible={navigationScreen === 'Home'}
-          Transitioner={FadeTransitioner}
+          Transitioner={transition.Fade}
         />
         <Screen
           name="Downloads"
           Component={DownloadScreen}
           visible={navigationScreen === 'Downloads'}
-          Transitioner={FadeTransitioner}
+          Transitioner={transition.Fade}
         />
       </Canal>
       <TabBar

example/src/canals/player/Player.tsx

@@ -8,17 +8,15 @@ import {PlayerModule} from '../../module/PlayerModule';
 
 export const Player = observer(() => {
   return (
-    <View
-      style={[StyleSheet.absoluteFill, {backgroundColor: 'red'}]}
-      pointerEvents="box-none">
-      {/* <Canal style={{flex: 1}}>
+    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+      <Canal style={{flex: 1}}>
         <Screen
           name="PlayerCanal"
           visible={!PlayerModule.isPlayerMinimized}
           Component={PlayerCanal}
           Transitioner={PlayerTransitioner}
         />
-      </Canal> */}
+      </Canal>
     </View>
   );
 });

example/src/canals/player/PlayerCanal.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import {Canal, Screen} from 'react-nonav';
-import {FadeTransitioner} from '../../atoms/FadeTransitioner';
+import {Canal, Screen, transition} from 'react-nonav';
 import {RemoteControlScreen} from './screens/RemoteControlScreen';
 
 export const PlayerCanal = () => {
@@ -10,7 +9,7 @@ export const PlayerCanal = () => {
         visible
         name="RemoteControl"
         Component={RemoteControlScreen}
-        Transitioner={FadeTransitioner}
+        Transitioner={transition.Fade}
       />
     </Canal>
   );

example/tsconfig.json

@@ -11,7 +11,11 @@
     "noEmit": true,
     "resolveJsonModule": true,
     "strict": true,
-    "target": "esnext"
+    "target": "esnext",
+    "baseUrl": ".",
+    "paths": {
+      "react-nonav": ["../src"]
+    }
   },
   "exclude": [
     "node_modules",