From d618ab382ecc5eccbcd5faa89e76f9ed2d75f405 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Wed, 4 Dec 2019 00:22:53 +0100
Subject: [PATCH] feat: export underlying views used to build navigators (#191)

Exporting the underlying views makes it easy to build custom navigators on top of our views. Libraries such as react-native-router-flux rely on such exports to build custom routing solutions while being able to take advantage of our work.

This can also be the solution to adding custom behaviour without us needing to add separate config to override the router.
---
 packages/bottom-tabs/src/index.tsx            |  1 +
 packages/drawer/src/index.tsx                 |  2 +-
 .../src/navigators/createDrawerNavigator.tsx  |  2 +-
 packages/material-bottom-tabs/src/index.tsx   |  5 ++
 packages/material-top-tabs/src/index.tsx      |  1 +
 packages/native-stack/src/index.tsx           |  5 ++
 .../navigators/createNativeStackNavigator.tsx |  6 +-
 .../{StackView.tsx => NativeStackView.tsx}    |  6 +-
 packages/stack/src/index.tsx                  |  1 +
 .../src/navigators/createStackNavigator.tsx   | 19 ++-----
 .../{StackItem.tsx => CardContainer.tsx}      |  2 +-
 .../views/Stack/{Stack.tsx => CardStack.tsx}  |  6 +-
 packages/stack/src/views/Stack/StackView.tsx  | 56 +++++++++----------
 13 files changed, 60 insertions(+), 52 deletions(-)
 rename packages/native-stack/src/views/{StackView.tsx => NativeStackView.tsx} (95%)
 rename packages/stack/src/views/Stack/{StackItem.tsx => CardContainer.tsx} (98%)
 rename packages/stack/src/views/Stack/{Stack.tsx => CardStack.tsx} (99%)

diff --git a/packages/bottom-tabs/src/index.tsx b/packages/bottom-tabs/src/index.tsx
index 26957cd2..58a8b47f 100644
--- a/packages/bottom-tabs/src/index.tsx
+++ b/packages/bottom-tabs/src/index.tsx
@@ -6,6 +6,7 @@ export { default as createBottomTabNavigator } from './navigators/createBottomTa
 /**
  * Views
  */
+export { default as BottomTabView } from './views/BottomTabView';
 export { default as BottomTabBar } from './views/BottomTabBar';
 
 /**
diff --git a/packages/drawer/src/index.tsx b/packages/drawer/src/index.tsx
index 17db04e3..e8be5a7e 100644
--- a/packages/drawer/src/index.tsx
+++ b/packages/drawer/src/index.tsx
@@ -6,10 +6,10 @@ export { default as createDrawerNavigator } from './navigators/createDrawerNavig
 /**
  * Views
  */
+export { default as DrawerView } from './views/DrawerView';
 export { default as DrawerItem } from './views/DrawerItem';
 export { default as DrawerItemList } from './views/DrawerItemList';
 export { default as DrawerContent } from './views/DrawerContent';
-export { default as DrawerView } from './views/DrawerView';
 
 /**
  * Utilities
diff --git a/packages/drawer/src/navigators/createDrawerNavigator.tsx b/packages/drawer/src/navigators/createDrawerNavigator.tsx
index 1f60d7a8..7ff9bba7 100644
--- a/packages/drawer/src/navigators/createDrawerNavigator.tsx
+++ b/packages/drawer/src/navigators/createDrawerNavigator.tsx
@@ -40,10 +40,10 @@ function DrawerNavigator({
 
   return (
     <DrawerView
+      {...rest}
       state={state}
       descriptors={descriptors}
       navigation={navigation}
-      {...rest}
     />
   );
 }
diff --git a/packages/material-bottom-tabs/src/index.tsx b/packages/material-bottom-tabs/src/index.tsx
index 50dcf059..80240d8d 100644
--- a/packages/material-bottom-tabs/src/index.tsx
+++ b/packages/material-bottom-tabs/src/index.tsx
@@ -3,6 +3,11 @@
  */
 export { default as createMaterialBottomTabNavigator } from './navigators/createMaterialBottomTabNavigator';
 
+/**
+ * Views
+ */
+export { default as MaterialBottomTabView } from './views/MaterialBottomTabView';
+
 /**
  * Types
  */
diff --git a/packages/material-top-tabs/src/index.tsx b/packages/material-top-tabs/src/index.tsx
index 3df97026..8e91ba70 100644
--- a/packages/material-top-tabs/src/index.tsx
+++ b/packages/material-top-tabs/src/index.tsx
@@ -6,6 +6,7 @@ export { default as createMaterialTopTabNavigator } from './navigators/createMat
 /**
  * Views
  */
+export { default as MaterialTopTabView } from './views/MaterialTopTabView';
 export { default as MaterialTopTabBar } from './views/MaterialTopTabBar';
 
 /**
diff --git a/packages/native-stack/src/index.tsx b/packages/native-stack/src/index.tsx
index d148a06e..eff584ff 100644
--- a/packages/native-stack/src/index.tsx
+++ b/packages/native-stack/src/index.tsx
@@ -3,6 +3,11 @@
  */
 export { default as createNativeStackNavigator } from './navigators/createNativeStackNavigator';
 
+/**
+ * Views
+ */
+export { default as NativeStackView } from './views/NativeStackView';
+
 /**
  * Types
  */
diff --git a/packages/native-stack/src/navigators/createNativeStackNavigator.tsx b/packages/native-stack/src/navigators/createNativeStackNavigator.tsx
index 25ea993d..0161a570 100644
--- a/packages/native-stack/src/navigators/createNativeStackNavigator.tsx
+++ b/packages/native-stack/src/navigators/createNativeStackNavigator.tsx
@@ -16,7 +16,7 @@ import {
   screensEnabled,
   // eslint-disable-next-line import/no-unresolved
 } from 'react-native-screens';
-import StackView from '../views/StackView';
+import NativeStackView from '../views/NativeStackView';
 import {
   NativeStackNavigatorProps,
   NativeStackNavigationOptions,
@@ -64,11 +64,11 @@ function NativeStackNavigator(props: NativeStackNavigatorProps) {
   );
 
   return (
-    <StackView
+    <NativeStackView
+      {...rest}
       state={state}
       navigation={navigation}
       descriptors={descriptors}
-      {...rest}
     />
   );
 }
diff --git a/packages/native-stack/src/views/StackView.tsx b/packages/native-stack/src/views/NativeStackView.tsx
similarity index 95%
rename from packages/native-stack/src/views/StackView.tsx
rename to packages/native-stack/src/views/NativeStackView.tsx
index e027de9d..8cf2c759 100644
--- a/packages/native-stack/src/views/StackView.tsx
+++ b/packages/native-stack/src/views/NativeStackView.tsx
@@ -29,7 +29,11 @@ type Props = {
   descriptors: NativeStackDescriptorMap;
 };
 
-export default function StackView({ state, navigation, descriptors }: Props) {
+export default function NativeStackView({
+  state,
+  navigation,
+  descriptors,
+}: Props) {
   return (
     <ScreenStack style={styles.scenes}>
       {state.routes.map(route => {
diff --git a/packages/stack/src/index.tsx b/packages/stack/src/index.tsx
index a01078b9..e517bb82 100644
--- a/packages/stack/src/index.tsx
+++ b/packages/stack/src/index.tsx
@@ -16,6 +16,7 @@ export const Assets = [
 /**
  * Views
  */
+export { default as StackView } from './views/Stack/StackView';
 export { default as Header } from './views/Header/Header';
 export { default as HeaderTitle } from './views/Header/HeaderTitle';
 export { default as HeaderBackButton } from './views/Header/HeaderBackButton';
diff --git a/packages/stack/src/navigators/createStackNavigator.tsx b/packages/stack/src/navigators/createStackNavigator.tsx
index 353a1a44..8e06df1f 100644
--- a/packages/stack/src/navigators/createStackNavigator.tsx
+++ b/packages/stack/src/navigators/createStackNavigator.tsx
@@ -11,7 +11,6 @@ import {
   StackNavigationState,
   StackActions,
 } from '@react-navigation/routers';
-import KeyboardManager from '../views/KeyboardManager';
 import StackView from '../views/Stack/StackView';
 import {
   StackNavigationConfig,
@@ -24,7 +23,6 @@ type Props = DefaultNavigatorOptions<StackNavigationOptions> &
   StackNavigationConfig;
 
 function StackNavigator({
-  keyboardHandlingEnabled,
   initialRouteName,
   children,
   screenOptions,
@@ -64,17 +62,12 @@ function StackNavigator({
   );
 
   return (
-    <KeyboardManager enabled={keyboardHandlingEnabled !== false}>
-      {props => (
-        <StackView
-          state={state}
-          descriptors={descriptors}
-          navigation={navigation}
-          {...rest}
-          {...props}
-        />
-      )}
-    </KeyboardManager>
+    <StackView
+      {...rest}
+      state={state}
+      descriptors={descriptors}
+      navigation={navigation}
+    />
   );
 }
 
diff --git a/packages/stack/src/views/Stack/StackItem.tsx b/packages/stack/src/views/Stack/CardContainer.tsx
similarity index 98%
rename from packages/stack/src/views/Stack/StackItem.tsx
rename to packages/stack/src/views/Stack/CardContainer.tsx
index 31dd36ce..e572d5ce 100644
--- a/packages/stack/src/views/Stack/StackItem.tsx
+++ b/packages/stack/src/views/Stack/CardContainer.tsx
@@ -60,7 +60,7 @@ type Props = TransitionPreset & {
   floatingHeaderHeight: number;
 };
 
-export default class StackItem extends React.PureComponent<Props> {
+export default class CardContainer extends React.PureComponent<Props> {
   private handleOpen = () => {
     const { scene, onTransitionEnd, onOpenRoute } = this.props;
 
diff --git a/packages/stack/src/views/Stack/Stack.tsx b/packages/stack/src/views/Stack/CardStack.tsx
similarity index 99%
rename from packages/stack/src/views/Stack/Stack.tsx
rename to packages/stack/src/views/Stack/CardStack.tsx
index 4ee9caf9..f5a4ea19 100755
--- a/packages/stack/src/views/Stack/Stack.tsx
+++ b/packages/stack/src/views/Stack/CardStack.tsx
@@ -16,7 +16,7 @@ import { StackNavigationState } from '@react-navigation/routers';
 
 import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
-import StackItem from './StackItem';
+import CardContainer from './CardContainer';
 import {
   DefaultTransition,
   ModalTransition,
@@ -139,7 +139,7 @@ const getFloatingHeaderHeights = (
   }, {});
 };
 
-export default class Stack extends React.Component<Props, State> {
+export default class CardStack extends React.Component<Props, State> {
   static getDerivedStateFromProps(props: Props, state: State) {
     if (
       props.routes === state.routes &&
@@ -431,7 +431,7 @@ export default class Stack extends React.Component<Props, State> {
                 active={isScreenActive}
                 pointerEvents="box-none"
               >
-                <StackItem
+                <CardContainer
                   index={index}
                   active={index === self.length - 1}
                   focused={focused}
diff --git a/packages/stack/src/views/Stack/StackView.tsx b/packages/stack/src/views/Stack/StackView.tsx
index 497636fa..1321f649 100644
--- a/packages/stack/src/views/Stack/StackView.tsx
+++ b/packages/stack/src/views/Stack/StackView.tsx
@@ -4,7 +4,8 @@ import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
 import { Route } from '@react-navigation/core';
 import { StackActions, StackNavigationState } from '@react-navigation/routers';
 
-import Stack from './Stack';
+import CardStack from './CardStack';
+import KeyboardManager from '../KeyboardManager';
 import HeaderContainer, {
   Props as HeaderContainerProps,
 } from '../Header/HeaderContainer';
@@ -19,9 +20,6 @@ type Props = StackNavigationConfig & {
   state: StackNavigationState;
   navigation: StackNavigationHelpers;
   descriptors: StackDescriptorMap;
-  onPageChangeStart?: () => void;
-  onPageChangeConfirm?: () => void;
-  onPageChangeCancel?: () => void;
 };
 
 type State = {
@@ -307,9 +305,7 @@ class StackView extends React.Component<Props, State> {
     const {
       state,
       navigation,
-      onPageChangeStart,
-      onPageChangeConfirm,
-      onPageChangeCancel,
+      keyboardHandlingEnabled,
       mode = 'card',
       ...rest
     } = this.props;
@@ -328,28 +324,30 @@ class StackView extends React.Component<Props, State> {
       <SafeAreaProviderCompat>
         <SafeAreaConsumer>
           {insets => (
-            <Stack
-              mode={mode}
-              insets={insets as EdgeInsets}
-              getPreviousRoute={this.getPreviousRoute}
-              getGesturesEnabled={this.getGesturesEnabled}
-              routes={routes}
-              openingRouteKeys={openingRouteKeys}
-              closingRouteKeys={closingRouteKeys}
-              onGoBack={this.handleGoBack}
-              onOpenRoute={this.handleOpenRoute}
-              onCloseRoute={this.handleCloseRoute}
-              onPageChangeStart={onPageChangeStart}
-              onPageChangeConfirm={onPageChangeConfirm}
-              onPageChangeCancel={onPageChangeCancel}
-              renderHeader={this.renderHeader}
-              renderScene={this.renderScene}
-              headerMode={headerMode}
-              state={state}
-              navigation={navigation}
-              descriptors={descriptors}
-              {...rest}
-            />
+            <KeyboardManager enabled={keyboardHandlingEnabled !== false}>
+              {props => (
+                <CardStack
+                  mode={mode}
+                  insets={insets as EdgeInsets}
+                  getPreviousRoute={this.getPreviousRoute}
+                  getGesturesEnabled={this.getGesturesEnabled}
+                  routes={routes}
+                  openingRouteKeys={openingRouteKeys}
+                  closingRouteKeys={closingRouteKeys}
+                  onGoBack={this.handleGoBack}
+                  onOpenRoute={this.handleOpenRoute}
+                  onCloseRoute={this.handleCloseRoute}
+                  renderHeader={this.renderHeader}
+                  renderScene={this.renderScene}
+                  headerMode={headerMode}
+                  state={state}
+                  navigation={navigation}
+                  descriptors={descriptors}
+                  {...rest}
+                  {...props}
+                />
+              )}
+            </KeyboardManager>
           )}
         </SafeAreaConsumer>
       </SafeAreaProviderCompat>