Import from @react-navigation/core instead of react-navigation to maintain web compatibility

Author: Ashoat

flow-typed/npm/react-navigation_v4.x.x.js …ped/npm/@react-navigation/core_v3.x.x.jsflow-typed/npm/react-navigation_v4.x.x.js renamed to flow-typed/npm/@react-navigation/core_v3.x.x.js flow-typed/npm/react-navigation_v4.x.x.js renamed to flow-typed/npm/@react-navigation/core_v3.x.x.js

@@ -1,6 +1,9 @@
+// flow-typed signature: 2cf86c1d5289a8ee234774a4d54dca33
+// flow-typed version: 536c492332/@react-navigation/core_v3.x.x/flow_>=v0.104.x
+
 // @flow
 
-declare module 'react-navigation' {
+declare module '@react-navigation/core' {
 
   //---------------------------------------------------------------------------
   // SECTION 1: IDENTICAL TYPE DEFINITIONS
@@ -216,7 +219,7 @@ declare module 'react-navigation' {
 
   declare export type NavigationScreenOptionsGetter<Options: {...}> = (
     navigation: NavigationScreenProp<NavigationRoute>,
-    ncreenProps: ?NavigationScreenProps,
+    screenProps: ?NavigationScreenProps,
     theme: SupportedThemes,
   ) => Options;
 
@@ -606,16 +609,39 @@ declare module 'react-navigation' {
         ...
       };
 
+  declare type _HeaderBackButtonProps = {|
+    disabled?: boolean,
+    onPress: () => void,
+    pressColorAndroid?: string,
+    tintColor?: ?string,
+    backImage?: React$ComponentType<{
+      tintColor: string,
+      title?: ?string,
+      ...
+    }>,
+    title?: ?string,
+    truncatedTitle?: ?string,
+    backTitleVisible?: boolean,
+    allowFontScaling?: boolean,
+    titleStyle?: ?TextStyleProp,
+    headerLayoutPreset: 'left' | 'center',
+    width?: ?number,
+    scene: NavigationStackScene,
+  |};
+
   declare export type NavigationStackScreenOptions = NavigationScreenOptions & {
     header?: ?(React$Node | (HeaderProps => React$Node)),
     headerTransparent?: boolean,
-    headerTitle?: string | React$Node | React$ElementType,
+    headerTitle?: (props: { children: ?string, ... }) => React$Node | React$Node,
     headerTitleStyle?: AnimatedTextStyleProp,
     headerTitleAllowFontScaling?: boolean,
     headerTintColor?: string,
-    headerLeft?: React$Node | React$ElementType,
+    headerLeft?: ((props: _HeaderBackButtonProps) => React$Node) | React$Node,
     headerBackTitle?: string,
-    headerBackImage?: React$Node | React$ElementType,
+    headerBackImage?: (props: {|
+      tintColor?: string,
+      title?: ?string,
+    |}) => React$Node,
     headerTruncatedBackTitle?: string,
     headerBackTitleStyle?: TextStyleProp,
     headerPressColorAndroid?: string,
@@ -918,37 +944,4 @@ declare module 'react-navigation' {
     Component: ComponentType
   ): React$ComponentType<$Diff<React$ElementConfig<ComponentType>, {| isFocused: ?boolean |}>>;
 
-  declare export function createAppContainer<S: NavigationState, O: {...}>(
-    Component: NavigationNavigator<S, O, *>
-  ): NavigationContainer<S, O, *>;
-
-  declare export function createKeyboardAwareNavigator<Props: {...}>(
-    Comp: React$ComponentType<Props>,
-    stackConfig: {...}
-  ): React$ComponentType<Props>;
-
-  declare export function withOrientation<Props: {...}, ComponentType: React$ComponentType<Props>>(
-    Component: ComponentType
-  ): React$ComponentType<$Diff<React$ElementConfig<ComponentType>, {| isLandscape: boolean |}>>;
-
-  declare type _SafeAreaViewProps = {
-    forceInset?: _SafeAreaViewInsets,
-    children?: React$Node,
-    style?: AnimatedViewStyleProp,
-    ...
-  };
-  declare export var SafeAreaView: React$ComponentType<_SafeAreaViewProps>;
-
-  // These components take the same props that their React Native primitives do
-  // Typing them correctly would be extremely brittle
-  // We await the day we can import types from libraries in flow-typed libdefs
-  declare export var ScrollView: React$ComponentType<{...}>;
-  declare export var FlatList: React$ComponentType<{...}>;
-  declare export var SectionList: React$ComponentType<{...}>;
-  declare export var Themed: {|
-    StatusBar: React$ComponentType<{...}>,
-    Text: React$ComponentType<{...}>,
-    TextInput: React$ComponentType<{...}>,
-  |};
-
 }

package.json

@@ -6,7 +6,7 @@
   "author": "Ashoat Tevosyan (https://github.com/ashoat)",
   "license": "BSD-2-Clause",
   "repository": {
-    "url": "[email protected]:react-navigation/react-navigation-redux-helpers.git",
+    "url": "[email protected]:react-navigation/redux-helpers.git",
     "type": "git"
   },
   "dependencies": {
@@ -22,7 +22,7 @@
   ],
   "peerDependencies": {
     "react": "*",
-    "react-navigation": "*",
+    "@react-navigation/core": "*",
     "redux": "*"
   }
 }

src/create-redux-container.js

@@ -7,10 +7,10 @@ import type {
   NavigationScreenProp,
   NavigationNavigatorProps,
   SupportedThemes,
-} from 'react-navigation';
+} from '@react-navigation/core';
 
 import * as React from 'react';
-import { ThemeContext, NavigationProvider } from 'react-navigation';
+import { ThemeProvider, NavigationProvider } from '@react-navigation/core';
 
 import {
   initializeListeners,
@@ -88,14 +88,14 @@ function createReduxContainer<
         this.getCurrentNavigation,
       );
       return (
-        <ThemeContext.Provider value={this.theme}>
+        <ThemeProvider value={this.theme}>
           <NavigationProvider value={this.currentNavProp}>
             <Navigator
               {...props}
               navigation={this.currentNavProp}
             />
           </NavigationProvider>
-        </ThemeContext.Provider>
+        </ThemeProvider>
       );
     }
 

src/middleware.js

@@ -7,11 +7,11 @@ import type {
   NavigationDispatch,
   NavigationScreenProp,
   NavigationRouter,
-} from 'react-navigation';
+} from '@react-navigation/core';
 import type { Middleware } from 'redux';
 
 import invariant from 'invariant';
-import { getNavigation } from 'react-navigation';
+import { getNavigation } from '@react-navigation/core';
 
 import { initAction } from './reducer';
 

src/reducer.js

@@ -1,10 +1,10 @@
 // @flow
 
-import type { NavigationAction, NavigationState } from 'react-navigation';
+import type { NavigationAction, NavigationState } from '@react-navigation/core';
 import type { Reducer } from 'redux';
 import type { Navigator, ReducerState } from './types'
 
-import { NavigationActions } from 'react-navigation';
+import { NavigationActions } from '@react-navigation/core';
 
 const initAction = NavigationActions.init();
 

src/types.js

@@ -1,6 +1,9 @@
 // @flow
 
-import type { NavigationContainer, NavigationState } from 'react-navigation';
+import type {
+  NavigationContainer,
+  NavigationState,
+} from '@react-navigation/core';
 
 export type Navigator = NavigationContainer<*, *, *>;
 export type ReducerState = ?NavigationState;