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

@@ -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';
 
 /**

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

packages/drawer/src/navigators/createDrawerNavigator.tsx

@@ -40,10 +40,10 @@ function DrawerNavigator({
 
   return (
     <DrawerView
+      {...rest}
       state={state}
       descriptors={descriptors}
       navigation={navigation}
-      {...rest}
     />
   );
 }

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
  */

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';
 
 /**

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
  */

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}
     />
   );
 }

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 => {

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';

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}
+    />
   );
 }
 

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;
 

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}

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>