feat: add native container

Author: osdnk

packages/core/src/NavigationContainer.tsx

@@ -12,16 +12,11 @@ import {
   PartialState,
   NavigationAction,
   NavigationContainerRef,
+  NavigationContainerProps,
 } from './types';
 
 type State = NavigationState | PartialState<NavigationState> | undefined;
 
-type Props = {
-  initialState?: InitialState;
-  onStateChange?: (state: State) => void;
-  children: React.ReactNode;
-};
-
 const MISSING_CONTEXT_ERROR =
   "We couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?";
 
@@ -84,7 +79,7 @@ const getPartialState = (
  * @param props.ref Ref object which refers to the navigation object containing helper methods.
  */
 const Container = React.forwardRef(function NavigationContainer(
-  { initialState, onStateChange, children }: Props,
+  { initialState, onStateChange, children }: NavigationContainerProps,
   ref: React.Ref<NavigationContainerRef>
 ) {
   const [state, setNavigationState] = React.useState<State>(() =>

packages/core/src/types.tsx

@@ -1,4 +1,5 @@
 import * as BaseActions from './BaseActions';
+import * as React from 'react';
 
 export type CommonAction = BaseActions.Action;
 
@@ -344,6 +345,14 @@ export type NavigationHelpers<
     ): void;
   };
 
+export type NavigationContainerProps = {
+  initialState?: InitialState;
+  onStateChange?: (
+    state: NavigationState | PartialState<NavigationState> | undefined
+  ) => void;
+  children: React.ReactNode;
+};
+
 export type NavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string,

packages/example/src/index.tsx

@@ -4,12 +4,11 @@ import { Linking } from 'expo';
 import { Appbar, List } from 'react-native-paper';
 import { Asset } from 'expo-asset';
 import {
-  NavigationContainer,
   InitialState,
   getStateFromPath,
   NavigationContainerRef,
 } from '@react-navigation/core';
-import { useBackButton, useLinking } from '@react-navigation/native';
+import { useLinking, NativeContainer } from '@react-navigation/native';
 import {
   createDrawerNavigator,
   DrawerNavigationProp,
@@ -60,8 +59,6 @@ Asset.loadAsync(StackAssets);
 export default function App() {
   const containerRef = React.useRef<NavigationContainerRef>();
 
-  useBackButton(containerRef);
-
   // To test deep linking on, run the following in the Terminal:
   // Android: adb shell am start -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/simple-stack"
   // iOS: xcrun simctl openurl booted exp://127.0.0.1:19000/--/simple-stack
@@ -116,7 +113,7 @@ export default function App() {
   }
 
   return (
-    <NavigationContainer
+    <NativeContainer
       ref={containerRef}
       initialState={initialState}
       onStateChange={state =>
@@ -175,6 +172,6 @@ export default function App() {
           )}
         </Drawer.Screen>
       </Drawer.Navigator>
-    </NavigationContainer>
+    </NativeContainer>
   );
 }

packages/native/src/NativeContainer.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import {
+  NavigationContainer,
+  NavigationContainerProps,
+  NavigationContainerRef,
+} from '@react-navigation/core';
+import useBackButton from './useBackButton';
+
+/**
+ * Container component which holds the navigation state
+ * designed for mobile apps.
+ * This should be rendered at the root wrapping the whole app.
+ *
+ * @param props.initialState Initial state object for the navigation tree.
+ * @param props.onStateChange Callback which is called with the latest navigation state when it changes.
+ * @param props.children Child elements to render the content.
+ * @param props.ref Ref object which refers to the navigation object containing helper methods.
+ */
+
+const NativeContainer = React.forwardRef(function NativeContainer(
+  props: NavigationContainerProps,
+  ref: React.Ref<NavigationContainerRef>
+) {
+  const refContainer = React.useRef<NavigationContainerRef>(null);
+
+  useBackButton(refContainer);
+  React.useImperativeHandle(ref, () => refContainer.current);
+
+  return (
+    <NavigationContainer
+      {...props}
+      ref={refContainer}
+      children={props.children}
+    />
+  );
+});
+
+export default NativeContainer;

packages/native/src/index.tsx

@@ -1,2 +1,3 @@
 export { default as useBackButton } from './useBackButton';
 export { default as useLinking } from './useLinking';
+export { default as NativeContainer } from './NativeContainer';