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