feat: allow specifying style interpolators in navigationOptions (#155)

Author: tchayen

example/src/HeaderBackgrounds.js

@@ -94,14 +94,18 @@ function createHeaderBackgroundExample(options = {}) {
   );
 }
 export const HeaderBackgroundDefault = createHeaderBackgroundExample({
-  ...TransitionPresets.SlideFromRightIOS,
-  headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+  defaultNavigationOptions: {
+    ...TransitionPresets.SlideFromRightIOS,
+    headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+  },
   headerMode: 'float',
 });
 
 export const HeaderBackgroundFade = createHeaderBackgroundExample({
-  ...TransitionPresets.SlideFromRightIOS,
-  headerStyleInterpolator: HeaderStyleInterpolators.forFade,
+  defaultNavigationOptions: {
+    ...TransitionPresets.SlideFromRightIOS,
+    headerStyleInterpolator: HeaderStyleInterpolators.forFade,
+  },
   headerMode: 'float',
 });
 

example/src/HeaderPreset.js

@@ -105,10 +105,10 @@ const StackWithHeaderPreset = createStackNavigator(
     ScreenWithLongTitle: ScreenWithLongTitle,
   },
   {
-    ...TransitionPresets.SlideFromRightIOS,
-    headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
     headerMode: 'float',
     defaultNavigationOptions: {
+      ...TransitionPresets.SlideFromRightIOS,
+      headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
       gesturesEnabled: true,
     },
   }

example/src/ModalPresentation.js

@@ -64,9 +64,9 @@ export default createStackNavigator(
     Details: DetailsScreen,
   },
   {
-    ...TransitionPresets.ModalPresentationIOS,
     mode: 'modal',
     defaultNavigationOptions: {
+      ...TransitionPresets.ModalPresentationIOS,
       cardOverlayEnabled: true,
       gesturesEnabled: true,
     },

example/src/WipeStack.js

@@ -153,8 +153,8 @@ export default createStackNavigator(
     initialRouteName: 'List',
     headerMode: 'screen',
     defaultNavigationOptions: {
+      ...TransitionPresets.WipeFromBottomAndroid,
       cardOverlayEnabled: true,
     },
-    ...TransitionPresets.WipeFromBottomAndroid,
   }
 );

src/types.tsx

@@ -93,23 +93,24 @@ export type HeaderProps = {
   styleInterpolator: HeaderStyleInterpolator;
 };
 
-export type NavigationStackOptions = HeaderOptions & {
-  title?: string;
-  header?: null | ((props: HeaderProps) => React.ReactNode);
-  cardShadowEnabled?: boolean;
-  cardOverlayEnabled?: boolean;
-  cardTransparent?: boolean;
-  cardStyle?: StyleProp<ViewStyle>;
-  animationEnabled?: boolean;
-  gesturesEnabled?: boolean;
-  gestureResponseDistance?: {
-    vertical?: number;
-    horizontal?: number;
+export type NavigationStackOptions = HeaderOptions &
+  Partial<TransitionPreset> & {
+    title?: string;
+    header?: null | ((props: HeaderProps) => React.ReactNode);
+    cardShadowEnabled?: boolean;
+    cardOverlayEnabled?: boolean;
+    cardTransparent?: boolean;
+    cardStyle?: StyleProp<ViewStyle>;
+    animationEnabled?: boolean;
+    gesturesEnabled?: boolean;
+    gestureResponseDistance?: {
+      vertical?: number;
+      horizontal?: number;
+    };
+    disableKeyboardHandling?: boolean;
   };
-  disableKeyboardHandling?: boolean;
-};
 
-export type NavigationConfig = TransitionPreset & {
+export type NavigationConfig = {
   mode: 'card' | 'modal';
   headerMode: HeaderMode;
 };

src/views/Stack/Stack.tsx

@@ -11,14 +11,15 @@ import { ScreenContainer, NativeScreen } from 'react-native-screens';
 import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import StackItem from './StackItem';
+import {
+  DefaultTransition,
+  ModalSlideFromBottomIOS,
+} from '../../TransitionConfigs/TransitionPresets';
+import { forNoAnimation } from '../../TransitionConfigs/HeaderStyleInterpolators';
 import {
   Route,
   Layout,
-  TransitionSpec,
-  CardStyleInterpolator,
-  HeaderStyleInterpolator,
   HeaderMode,
-  GestureDirection,
   SceneDescriptor,
   NavigationProp,
   HeaderScene,
@@ -29,6 +30,7 @@ type ProgressValues = {
 };
 
 type Props = {
+  mode: 'card' | 'modal';
   navigation: NavigationProp;
   descriptors: { [key: string]: SceneDescriptor };
   routes: Route[];
@@ -42,20 +44,13 @@ type Props = {
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
   renderScene: (props: { route: Route }) => React.ReactNode;
   headerMode: HeaderMode;
-  direction: GestureDirection;
   onTransitionStart?: (
     curr: { index: number },
     prev: { index: number }
   ) => void;
   onGestureBegin?: () => void;
   onGestureCanceled?: () => void;
   onGestureEnd?: () => void;
-  transitionSpec: {
-    open: TransitionSpec;
-    close: TransitionSpec;
-  };
-  cardStyleInterpolator: CardStyleInterpolator;
-  headerStyleInterpolator: HeaderStyleInterpolator;
 };
 
 type State = {
@@ -187,6 +182,7 @@ export default class Stack extends React.Component<Props, State> {
 
   render() {
     const {
+      mode,
       descriptors,
       navigation,
       routes,
@@ -199,18 +195,28 @@ export default class Stack extends React.Component<Props, State> {
       renderHeader,
       renderScene,
       headerMode,
-      direction,
       onTransitionStart,
       onGestureBegin,
       onGestureCanceled,
       onGestureEnd,
-      transitionSpec,
-      cardStyleInterpolator,
-      headerStyleInterpolator,
     } = this.props;
 
     const { scenes, layout, progress, floaingHeaderHeight } = this.state;
+
     const focusedRoute = navigation.state.routes[navigation.state.index];
+    const focusedOptions = descriptors[focusedRoute.key].options;
+
+    let defaultTransitionPreset =
+      mode === 'modal' && Platform.OS === 'ios'
+        ? ModalSlideFromBottomIOS
+        : DefaultTransition;
+
+    if (headerMode === 'screen') {
+      defaultTransitionPreset = {
+        ...defaultTransitionPreset,
+        headerStyleInterpolator: forNoAnimation,
+      };
+    }
 
     return (
       <React.Fragment>
@@ -242,6 +248,10 @@ export default class Stack extends React.Component<Props, State> {
               cardOverlayEnabled,
               cardStyle,
               gestureResponseDistance,
+              direction = defaultTransitionPreset.direction,
+              transitionSpec = defaultTransitionPreset.transitionSpec,
+              cardStyleInterpolator = defaultTransitionPreset.cardStyleInterpolator,
+              headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
             } = descriptor.options;
 
             return (
@@ -261,7 +271,6 @@ export default class Stack extends React.Component<Props, State> {
                   scene={scene}
                   previousScene={scenes[index - 1]}
                   navigation={navigation}
-                  direction={direction}
                   cardTransparent={cardTransparent}
                   cardOverlayEnabled={cardOverlayEnabled}
                   cardShadowEnabled={cardShadowEnabled}
@@ -271,9 +280,6 @@ export default class Stack extends React.Component<Props, State> {
                   onGestureCanceled={onGestureCanceled}
                   onGestureEnd={onGestureEnd}
                   gestureResponseDistance={gestureResponseDistance}
-                  transitionSpec={transitionSpec}
-                  headerStyleInterpolator={headerStyleInterpolator}
-                  cardStyleInterpolator={cardStyleInterpolator}
                   floaingHeaderHeight={floaingHeaderHeight}
                   hasCustomHeader={header === null}
                   getPreviousRoute={getPreviousRoute}
@@ -285,6 +291,10 @@ export default class Stack extends React.Component<Props, State> {
                   onCloseRoute={onCloseRoute}
                   onTransitionStart={onTransitionStart}
                   onGoBack={onGoBack}
+                  direction={direction}
+                  transitionSpec={transitionSpec}
+                  cardStyleInterpolator={cardStyleInterpolator}
+                  headerStyleInterpolator={headerStyleInterpolator}
                 />
               </AnimatedScreen>
             );
@@ -298,7 +308,10 @@ export default class Stack extends React.Component<Props, State> {
               navigation,
               getPreviousRoute,
               onLayout: this.handleFloatingHeaderLayout,
-              styleInterpolator: headerStyleInterpolator,
+              styleInterpolator:
+                focusedOptions.headerStyleInterpolator !== undefined
+                  ? focusedOptions.headerStyleInterpolator
+                  : defaultTransitionPreset.headerStyleInterpolator,
               style: [styles.header, styles.floating],
             })
           : null}

src/views/Stack/StackItem.tsx

@@ -6,16 +6,13 @@ import Card from './Card';
 import {
   Route,
   HeaderScene,
-  GestureDirection,
   Layout,
-  TransitionSpec,
-  CardStyleInterpolator,
   HeaderMode,
   NavigationProp,
-  HeaderStyleInterpolator,
+  TransitionPreset,
 } from '../../types';
 
-type Props = {
+type Props = TransitionPreset & {
   index: number;
   active: boolean;
   focused: boolean;
@@ -30,7 +27,6 @@ type Props = {
   cardShadowEnabled?: boolean;
   cardStyle?: StyleProp<ViewStyle>;
   gesturesEnabled?: boolean;
-  direction: GestureDirection;
   getPreviousRoute: (props: { route: Route }) => Route | undefined;
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
   renderScene: (props: { route: Route }) => React.ReactNode;
@@ -48,12 +44,6 @@ type Props = {
     vertical?: number;
     horizontal?: number;
   };
-  transitionSpec: {
-    open: TransitionSpec;
-    close: TransitionSpec;
-  };
-  headerStyleInterpolator: HeaderStyleInterpolator;
-  cardStyleInterpolator: CardStyleInterpolator;
   headerMode: HeaderMode;
   headerTransparent?: boolean;
   floaingHeaderHeight: number;
@@ -87,7 +77,6 @@ export default class StackItem extends React.PureComponent<Props> {
       navigation,
       scene,
       previousScene,
-      direction,
       cardTransparent,
       cardOverlayEnabled,
       cardShadowEnabled,
@@ -97,16 +86,17 @@ export default class StackItem extends React.PureComponent<Props> {
       onGestureCanceled,
       onGestureEnd,
       gestureResponseDistance,
-      transitionSpec,
-      headerStyleInterpolator,
-      cardStyleInterpolator,
       floaingHeaderHeight,
       hasCustomHeader,
       getPreviousRoute,
       headerMode,
       headerTransparent,
       renderHeader,
       renderScene,
+      direction,
+      transitionSpec,
+      cardStyleInterpolator,
+      headerStyleInterpolator,
     } = this.props;
 
     return (

src/views/Stack/StackView.tsx

@@ -5,11 +5,6 @@ import Stack from './Stack';
 import HeaderContainer, {
   Props as HeaderContainerProps,
 } from '../Header/HeaderContainer';
-import {
-  DefaultTransition,
-  ModalSlideFromBottomIOS,
-} from '../../TransitionConfigs/TransitionPresets';
-import { forNoAnimation } from '../../TransitionConfigs/HeaderStyleInterpolators';
 import {
   NavigationProp,
   SceneDescriptor,
@@ -283,20 +278,9 @@ class StackView extends React.Component<Props, State> {
     const headerMode =
       mode !== 'modal' && Platform.OS === 'ios' ? 'float' : 'screen';
 
-    let transitionPreset =
-      mode === 'modal' && Platform.OS === 'ios'
-        ? ModalSlideFromBottomIOS
-        : DefaultTransition;
-
-    if (headerMode === 'screen') {
-      transitionPreset = {
-        ...transitionPreset,
-        headerStyleInterpolator: forNoAnimation,
-      };
-    }
-
     return (
       <Stack
+        mode={mode}
         getPreviousRoute={this.getPreviousRoute}
         getGesturesEnabled={this.getGesturesEnabled}
         routes={routes}
@@ -314,7 +298,6 @@ class StackView extends React.Component<Props, State> {
         headerMode={headerMode}
         navigation={navigation}
         descriptors={descriptors}
-        {...transitionPreset}
         {...config}
       />
     );