feat: add cardX options in navigationOptions

Author: satya164

example/src/TransparentStack.js

@@ -73,11 +73,11 @@ export default createStackNavigator(
   },
   {
     initialRouteName: 'List',
-    transparentCard: true,
     mode: 'modal',
     headerMode: 'none',
-    navigationOptions: {
+    defaultNavigationOptions: {
       gesturesEnabled: false,
+      cardTransparent: true,
     },
     cardStyleInterpolator: ({ progress: { current } }) => {
       const opacity = Animated.interpolate(current, {

src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap

@@ -172,6 +172,7 @@ Array [
                     Object {
                       "backgroundColor": "#eee",
                     },
+                    undefined,
                   ]
                 }
               >
@@ -345,6 +346,7 @@ Array [
                                   Object {
                                     "backgroundColor": "#eee",
                                   },
+                                  undefined,
                                 ]
                               }
                             />

src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap

@@ -172,6 +172,7 @@ Array [
                     Object {
                       "backgroundColor": "#eee",
                     },
+                    undefined,
                   ]
                 }
               />
@@ -507,6 +508,7 @@ Array [
                     Object {
                       "backgroundColor": "#eee",
                     },
+                    undefined,
                   ]
                 }
               />

src/types.tsx

@@ -96,6 +96,10 @@ export type HeaderProps = {
 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?: {
@@ -108,9 +112,6 @@ export type NavigationStackOptions = HeaderOptions & {
 export type NavigationConfig = TransitionPreset & {
   mode: 'card' | 'modal';
   headerMode: HeaderMode;
-  cardShadowEnabled?: boolean;
-  cardOverlayEnabled?: boolean;
-  transparentCard?: boolean;
 };
 
 export type SceneDescriptor = {

src/views/Stack/Card.tsx

@@ -45,6 +45,7 @@ type Props = ViewProps & {
   };
   styleInterpolator: CardStyleInterpolator;
   containerStyle?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
 };
 
 type Binary = 0 | 1;
@@ -470,6 +471,7 @@ export default class Card extends React.Component<Props> {
       children,
       styleInterpolator,
       containerStyle: customContainerStyle,
+      contentStyle,
       ...rest
     } = this.props;
 
@@ -519,6 +521,7 @@ export default class Card extends React.Component<Props> {
                   style={[
                     styles.container,
                     transparent ? styles.transparent : styles.opaque,
+                    contentStyle,
                   ]}
                 >
                   {children}

src/views/Stack/Stack.tsx

@@ -41,11 +41,8 @@ type Props = {
   getGesturesEnabled: (props: { route: Route }) => boolean;
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
   renderScene: (props: { route: Route }) => React.ReactNode;
-  transparentCard?: boolean;
   headerMode: HeaderMode;
   direction: GestureDirection;
-  cardOverlayEnabled?: boolean;
-  cardShadowEnabled?: boolean;
   onTransitionStart?: (
     curr: { index: number },
     prev: { index: number }
@@ -185,8 +182,6 @@ export default class Stack extends React.Component<Props, State> {
     const {
       descriptors,
       navigation,
-      cardOverlayEnabled,
-      cardShadowEnabled,
       routes,
       closingRoutes,
       onOpenRoute,
@@ -196,7 +191,6 @@ export default class Stack extends React.Component<Props, State> {
       getGesturesEnabled,
       renderHeader,
       renderScene,
-      transparentCard,
       headerMode,
       direction,
       onTransitionStart,
@@ -233,6 +227,15 @@ export default class Stack extends React.Component<Props, State> {
                 ? 1
                 : 0;
 
+            const {
+              header,
+              cardTransparent,
+              cardShadowEnabled,
+              cardOverlayEnabled,
+              cardStyle,
+              gestureResponseDistance,
+            } = descriptor.options;
+
             return (
               <AnimatedScreen
                 key={route.key}
@@ -251,21 +254,20 @@ export default class Stack extends React.Component<Props, State> {
                   previousScene={scenes[index - 1]}
                   navigation={navigation}
                   direction={direction}
-                  transparentCard={transparentCard}
+                  cardTransparent={cardTransparent}
                   cardOverlayEnabled={cardOverlayEnabled}
                   cardShadowEnabled={cardShadowEnabled}
+                  cardStyle={cardStyle}
                   gesturesEnabled={index !== 0 && getGesturesEnabled({ route })}
                   onGestureBegin={onGestureBegin}
                   onGestureCanceled={onGestureCanceled}
                   onGestureEnd={onGestureEnd}
-                  gestureResponseDistance={
-                    descriptor.options.gestureResponseDistance
-                  }
+                  gestureResponseDistance={gestureResponseDistance}
                   transitionSpec={transitionSpec}
                   headerStyleInterpolator={headerStyleInterpolator}
                   cardStyleInterpolator={cardStyleInterpolator}
                   floaingHeaderHeight={floaingHeaderHeight}
-                  hasCustomHeader={descriptor.options.header === null}
+                  hasCustomHeader={header === null}
                   getPreviousRoute={getPreviousRoute}
                   headerMode={headerMode}
                   renderHeader={renderHeader}

src/views/Stack/StackItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, Platform } from 'react-native';
+import { StyleSheet, Platform, StyleProp, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import Card from './Card';
@@ -25,9 +25,10 @@ type Props = {
   previousScene?: HeaderScene<Route>;
   scene: HeaderScene<Route>;
   navigation: NavigationProp;
-  transparentCard?: boolean;
+  cardTransparent?: boolean;
   cardOverlayEnabled?: boolean;
   cardShadowEnabled?: boolean;
+  cardStyle?: StyleProp<ViewStyle>;
   gesturesEnabled?: boolean;
   direction: GestureDirection;
   getPreviousRoute: (props: { route: Route }) => Route | undefined;
@@ -85,9 +86,10 @@ export default class StackItem extends React.PureComponent<Props> {
       scene,
       previousScene,
       direction,
-      transparentCard,
+      cardTransparent,
       cardOverlayEnabled,
       cardShadowEnabled,
+      cardStyle,
       gesturesEnabled,
       onGestureBegin,
       onGestureCanceled,
@@ -107,7 +109,7 @@ export default class StackItem extends React.PureComponent<Props> {
     return (
       <Card
         active={active}
-        transparent={transparentCard}
+        transparent={cardTransparent}
         direction={direction}
         layout={layout}
         current={current}
@@ -133,6 +135,7 @@ export default class StackItem extends React.PureComponent<Props> {
             ? { marginTop: floaingHeaderHeight }
             : null
         }
+        contentStyle={cardStyle}
         style={StyleSheet.absoluteFill}
       >
         {headerMode === 'screen'