fix: add peer dep on react-navigation

.eslintrc

@@ -5,11 +5,15 @@
 
   "env": {
     "es6": true,
-    "react-native-globals/all": true,
+    "react-native-globals/all": true
+  },
+
+  "settings": {
+    "import/core-modules": ["react-native-screens"]
   },
 
   "rules": {
-    "import/no-unresolved": "off",
+    "import/named": "off",
     "react-native/no-inline-styles": "off"
   }
 }

example/App.js

@@ -1,8 +1,12 @@
 import * as React from 'react';
 // eslint-disable-next-line no-unused-vars
 import { View, TouchableOpacity, FlatList, I18nManager } from 'react-native';
-import { ThemeContext, ThemeColors } from '@react-navigation/core';
-import { Themed, createAppContainer } from '@react-navigation/native';
+import {
+  ThemeContext,
+  ThemeColors,
+  Themed,
+  createAppContainer,
+} from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { List, Divider } from 'react-native-paper';

example/metro.config.js

@@ -22,10 +22,6 @@ module.exports = {
     providesModuleNodeModules: [
       '@expo/vector-icons',
       '@babel/runtime',
-      '@react-navigation/core',
-      '@react-navigation/native',
-      'react-native-gesture-handler',
-      'react-native-reanimated',
       ...dependencies,
       ...peerDependencies,
     ],

example/package.json

@@ -10,8 +10,6 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^10.0.0",
-    "@react-navigation/core": "^3.5.0",
-    "@react-navigation/native": "^3.6.0",
     "expo": "^34.0.0",
     "expo-asset": "^6.0.0",
     "expo-constants": "~6.0.0",
@@ -22,6 +20,7 @@
     "react-native-paper": "^2.2.0",
     "react-native-reanimated": "~1.1.0",
     "react-native-webview": "~5.12.0",
+    "react-navigation": "^4.0.1",
     "react-navigation-stack": "^1.4.0"
   },
   "devDependencies": {

example/src/GestureInteraction.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button, View } from 'react-native';
-import { withNavigation } from '@react-navigation/core';
+import { withNavigation } from 'react-navigation';
 import {
   createDrawerNavigator,
   DrawerGestureContext,

example/src/ParallaxDrawer.js

@@ -7,13 +7,11 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-
+import { ThemeColors, useTheme, Themed, SafeAreaView } from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';
-import { ThemeColors, useTheme } from '@react-navigation/core';
-import { Themed, SafeAreaView } from '@react-navigation/native';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import Animated from 'react-native-reanimated';
 import { createDrawerNavigator } from 'react-navigation-drawer';
+import Animated from 'react-native-reanimated';
+import { MaterialIcons } from '@expo/vector-icons';
 
 const SampleText = ({ children }) => <Themed.Text>{children}</Themed.Text>;
 

example/src/RTLDrawer.js

@@ -7,7 +7,7 @@ import {
   TouchableOpacity,
 } from 'react-native';
 
-import { Themed } from '@react-navigation/native';
+import { Themed } from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';
 import { createDrawerNavigator } from 'react-navigation-drawer';
 

example/src/SimpleDrawer.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import { Button, ScrollView, StyleSheet, View } from 'react-native';
 import { createStackNavigator } from 'react-navigation-stack';
-import { ThemeColors, useTheme } from '@react-navigation/core';
-import { Themed, SafeAreaView } from '@react-navigation/native';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { ThemeColors, useTheme, Themed, SafeAreaView } from 'react-navigation';
 import { createDrawerNavigator } from 'react-navigation-drawer';
+import { MaterialIcons } from '@expo/vector-icons';
 
 const SampleText = ({ children }) => <Themed.Text>{children}</Themed.Text>;
 

example/src/StyledDrawer.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Button, ScrollView } from 'react-native';
 import { createStackNavigator } from 'react-navigation-stack';
-import { Themed, SafeAreaView } from '@react-navigation/native';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { Themed, SafeAreaView } from 'react-navigation';
 import { createDrawerNavigator } from 'react-navigation-drawer';
+import { MaterialIcons } from '@expo/vector-icons';
 
 const SampleText = ({ children }) => <Themed.Text>{children}</Themed.Text>;
 

example/yarn.lock

@@ -918,7 +918,7 @@
     query-string "^6.4.2"
     react-is "^16.8.6"
 
-"@react-navigation/native@^3.6.0":
+"@react-navigation/native@^3.6.2":
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-3.6.2.tgz#3634697b6350cc5189657ae4551f2d52b57fbbf0"
   integrity sha512-Cybeou6N82ZeRmgnGlu+wzlV3z5BZQR2dmYaNFV1TNLUGHqtvv8E7oNw9uYcz9Ox5LFbiX+FdNTn2d6ZPlK0kg==
@@ -4352,9 +4352,9 @@ react-native-safe-area-view@^0.12.0:
     hoist-non-react-statics "^2.3.1"
 
 react-native-safe-area-view@^0.14.1:
-  version "0.14.7"
-  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.14.7.tgz#e1dd1c4d25a90677df2c15347fdddb2306ba5971"
-  integrity sha512-fmuBYpvKDJK33bimo4JXrK2BN2CGw7nof1y1LDRgzqv+FZ3eADSDGshprN8WeQqSZjQ20hJx1CiWk28Edg/v4Q==
+  version "0.14.8"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.14.8.tgz#ef33c46ff8164ae77acad48c3039ec9c34873e5b"
+  integrity sha512-MtRSIcZNstxv87Jet+UsPhEd1tpGe8cVskDXlP657x6rHpSrbrc+y13ZNXrwAgGNNhqQNX7UJT68ZIq//ZRmvw==
   dependencies:
     hoist-non-react-statics "^2.3.1"
 
@@ -4440,6 +4440,14 @@ react-navigation-stack@^1.4.0:
   dependencies:
     prop-types "^15.7.2"
 
+react-navigation@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.1.tgz#96c17ac90afcf0a5bc957358152326211a79d183"
+  integrity sha512-6XzuqvhOnY6FA6tCErD6+vfZdnP+O/7hCQper9qDulxxW2ZVkCF4xWdzoVcv3DDR6P5CK6l1tcbJ1ku256AdFQ==
+  dependencies:
+    "@react-navigation/core" "^3.5.0"
+    "@react-navigation/native" "^3.6.2"
+
 react-proxy@^1.1.7:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"

jest-setup.js

@@ -1,5 +1,6 @@
 /* eslint-env jest */
 
+// eslint-disable-next-line import/no-unresolved
 import NativeModules from 'NativeModules';
 
 Object.assign(NativeModules, {

package.json

@@ -46,8 +46,6 @@
     "@commitlint/config-conventional": "^7.5.0",
     "@expo/vector-icons": "^10.0.1",
     "@react-native-community/bob": "^0.3.4",
-    "@react-navigation/core": "^3.5.0",
-    "@react-navigation/native": "^3.6.2",
     "@release-it/conventional-changelog": "^1.1.0",
     "@types/jest": "^24.0.11",
     "@types/react": "^16.8.13",
@@ -70,19 +68,19 @@
     "react-native-reanimated": "^1.2.0",
     "react-native-screens": "^1.0.0-alpha.23",
     "react-native-testing-library": "^1.7.0",
+    "react-navigation": "^4.0.1",
     "react-test-renderer": "16.8.6",
     "release-it": "^12.3.6",
     "typescript": "^3.4.5"
   },
   "dependencies": {},
   "peerDependencies": {
-    "@react-navigation/core": "^3.5.0",
-    "@react-navigation/native": "^3.6.2",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "^1.0.12",
     "react-native-reanimated": "^1.0.0",
-    "react-native-screens": "^1.0.0 || ^1.0.0-alpha"
+    "react-native-screens": "^1.0.0 || ^1.0.0-alpha",
+    "react-navigation": "^4.0.1"
   },
   "jest": {
     "preset": "react-native",
@@ -96,7 +94,7 @@
       "<rootDir>/example/"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|@react-navigation/core|@react-navigation/native)"
+      "node_modules/(?!(jest-)?react-native|react-navigation|@react-navigation/core|@react-navigation/native)"
     ],
     "testPathIgnorePatterns": [
       "/node_modules/",

src/navigators/__tests__/createDrawerNavigator.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { render } from 'react-native-testing-library';
-import { createAppContainer } from '@react-navigation/native';
+import { createAppContainer } from 'react-navigation';
 
 import createDrawerNavigator from '../createDrawerNavigator';
 

src/navigators/createDrawerNavigator.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Dimensions, Platform, ScrollView, I18nManager } from 'react-native';
-import { createNavigator, ThemeColors } from '@react-navigation/core';
-import { SafeAreaView } from '@react-navigation/native';
+import { createNavigator, ThemeColors, SafeAreaView } from 'react-navigation';
 import DrawerRouter from '../routers/DrawerRouter';
 import DrawerView from '../views/DrawerView';
 import DrawerItems, { Props } from '../views/DrawerNavigatorItems';
@@ -53,6 +52,9 @@ const DefaultDrawerConfig = {
 const DrawerNavigator = (routeConfigs: object, config: any = {}) => {
   const mergedConfig = { ...DefaultDrawerConfig, ...config };
   const drawerRouter = DrawerRouter(routeConfigs, mergedConfig);
+
+  // TODO: don't have time to fix it right now
+  // @ts-ignore
   const navigator = createNavigator(DrawerView, drawerRouter, mergedConfig);
   return navigator;
 };

src/routers/DrawerRouter.tsx

@@ -1,19 +1,12 @@
-import { SwitchRouter, NavigationActions } from '@react-navigation/core';
+import {
+  SwitchRouter,
+  NavigationActions,
+  NavigationAction,
+  NavigationRoute,
+} from 'react-navigation';
 import * as DrawerActions from './DrawerActions';
 
-type Route = {
-  key: string;
-  index?: number;
-  routes?: Route[];
-};
-
-type Action = {
-  key: null;
-  type: string;
-  willShow: any;
-};
-
-type State = Route & {
+type State = NavigationRoute & {
   isDrawerOpen?: any;
 };
 
@@ -28,7 +21,7 @@ function withDefaultValue(obj: object, key: string, defaultValue: any): any {
   return obj;
 }
 
-const getActiveRouteKey = (route: Route): string => {
+const getActiveRouteKey = (route: NavigationRoute): string => {
   if (
     route.routes &&
     typeof route.index === 'number' &&
@@ -61,7 +54,7 @@ export default (
   return {
     ...switchRouter,
 
-    getActionCreators(route: Route, navStateKey: string) {
+    getActionCreators(route: NavigationRoute, navStateKey: string) {
       return {
         openDrawer: () => DrawerActions.openDrawer({ key: navStateKey }),
         closeDrawer: () => DrawerActions.closeDrawer({ key: navStateKey }),
@@ -70,7 +63,7 @@ export default (
       };
     },
 
-    getStateForAction(action: Action, state: State) {
+    getStateForAction(action: NavigationAction, state?: State) {
       // Set up the initial state if needed
       if (!state) {
         return {

src/routers/__tests__/DrawerRouter.test.tsx

@@ -3,11 +3,7 @@
 import * as React from 'react';
 import DrawerRouter from '../DrawerRouter';
 
-import {
-  NavigationActions,
-  SwitchRouter,
-  StackRouter,
-} from '@react-navigation/core';
+import { NavigationActions, SwitchRouter, StackRouter } from 'react-navigation';
 import * as DrawerActions from '../../routers/DrawerActions';
 
 const INIT_ACTION = { type: NavigationActions.INIT };

src/types.tsx

@@ -1,4 +1,4 @@
-import { DrawerActionType } from './routers/DrawerActions';
+import { NavigationAction } from 'react-navigation';
 
 export type Route = {
   key: string;
@@ -21,9 +21,5 @@ export type Navigation = {
   };
   openDrawer: () => void;
   closeDrawer: () => void;
-  dispatch: (action: {
-    type: DrawerActionType;
-    key: string;
-    willShow?: boolean;
-  }) => void;
+  dispatch: (action: NavigationAction) => boolean;
 };

src/views/DrawerNavigatorItems.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { SafeAreaView } from '@react-navigation/native';
-import { ThemeContext } from '@react-navigation/core';
+import { SafeAreaView, ThemeContext } from 'react-navigation';
 import TouchableItem from './TouchableItem';
 import { Scene, Route } from '../types';
 

src/views/DrawerSidebar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, View, Animated, ViewStyle } from 'react-native';
-import { NavigationActions } from '@react-navigation/core';
+import { NavigationActions } from 'react-navigation';
 
 import { Props as DrawerNavigatorItemsProps } from './DrawerNavigatorItems';
 import { Navigation, Scene, Route } from '../types';

src/views/DrawerView.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { Dimensions, StyleSheet, ViewStyle } from 'react-native';
-import { SceneView, ThemeColors, ThemeContext } from '@react-navigation/core';
+import {
+  SceneView,
+  ThemeColors,
+  ThemeContext,
+  NavigationProp,
+} from 'react-navigation';
 import { ScreenContainer } from 'react-native-screens';
 
 import * as DrawerActions from '../routers/DrawerActions';
@@ -35,7 +40,7 @@ type Props = {
   navigation: Navigation;
   descriptors: {
     [key: string]: {
-      navigation: {};
+      navigation: NavigationProp<any>;
       getComponent: () => React.ComponentType<{}>;
       options: DrawerOptions;
     };

src/views/ResourceSavingScene.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
-
 import { Screen, screensEnabled } from 'react-native-screens';
 
 type Props = {

tsconfig.json

@@ -18,7 +18,6 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "resolveJsonModule": true,
-    "skipLibCheck": true,
     "strict": true,
     "target": "esnext",
     "plugins": [{ "name": "typescript-tslint-plugin" }]