kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-04-27 21:08:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add props from native Screen component

Browse Source
This commit is contained in:
WoLewicki
2021-03-25 15:55:55 +01:00
parent 5473982859
commit c3244009f7
10 changed files with 400 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
packages/bottom-tabs/src/types.tsx
View File

@@ -17,7 +17,10 @@ import type {
RouteProp,
} from '@react-navigation/native';
import type { EdgeInsets } from 'react-native-safe-area-context';
import type { HeaderOptions } from '@react-navigation/elements';
import type {
HeaderOptions,
NativeScreenTraitsProps,
} from '@react-navigation/elements';
export type Layout = { width: number; height: number };
@@ -80,162 +83,163 @@ export type TabBarVisibilityAnimationConfig =
| TimingKeyboardAnimationConfig
| SpringKeyboardAnimationConfig;
export type BottomTabNavigationOptions = HeaderOptions & {
/**
* Title text for the screen.
*/
title?: string;
export type BottomTabNavigationOptions = HeaderOptions &
NativeScreenTraitsProps & {
/**
* Title text for the screen.
*/
title?: string;
/**
* Whether this screens should render the first time it's accessed. Defaults to `true`.
* Set it to `false` if you want to render the screen on initial render.
*/
lazy?: boolean;
/**
* Whether this screens should render the first time it's accessed. Defaults to `true`.
* Set it to `false` if you want to render the screen on initial render.
*/
lazy?: boolean;
/**
* Function that given returns a React Element to display as a header.
*/
header?: (props: BottomTabHeaderProps) => React.ReactNode;
/**
* Function that given returns a React Element to display as a header.
*/
header?: (props: BottomTabHeaderProps) => React.ReactNode;
/**
* Whether to show the header. Setting this to `false` hides the header.
* Defaults to `true`.
*/
headerShown?: boolean;
/**
* Whether to show the header. Setting this to `false` hides the header.
* Defaults to `true`.
*/
headerShown?: boolean;
/**
* Title string of a tab displayed in the tab bar
* or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
*
* When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.
*/
tabBarLabel?:
| string
| ((props: {
focused: boolean;
color: string;
position: LabelPosition;
}) => React.ReactNode);
/**
* Title string of a tab displayed in the tab bar
* or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
*
* When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.
*/
tabBarLabel?:
| string
| ((props: {
focused: boolean;
color: string;
position: LabelPosition;
}) => React.ReactNode);
/**
* A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
*/
tabBarIcon?: (props: {
focused: boolean;
color: string;
size: number;
}) => React.ReactNode;
/**
* A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
*/
tabBarIcon?: (props: {
focused: boolean;
color: string;
size: number;
}) => React.ReactNode;
/**
* Text to show in a badge on the tab icon.
*/
tabBarBadge?: number | string;
/**
* Text to show in a badge on the tab icon.
*/
tabBarBadge?: number | string;
/**
* Custom style for the tab bar badge.
* You can specify a background color or text color here.
*/
tabBarBadgeStyle?: StyleProp<TextStyle>;
/**
* Custom style for the tab bar badge.
* You can specify a background color or text color here.
*/
tabBarBadgeStyle?: StyleProp<TextStyle>;
/**
* Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
* It's recommended to set this if you don't have a label for the tab.
*/
tabBarAccessibilityLabel?: string;
/**
* Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
* It's recommended to set this if you don't have a label for the tab.
*/
tabBarAccessibilityLabel?: string;
/**
* ID to locate this tab button in tests.
*/
tabBarTestID?: string;
/**
* ID to locate this tab button in tests.
*/
tabBarTestID?: string;
/**
* Animation config for showing and hiding the tab bar.
*/
tabBarVisibilityAnimationConfig?: {
show?: TabBarVisibilityAnimationConfig;
hide?: TabBarVisibilityAnimationConfig;
/**
* Animation config for showing and hiding the tab bar.
*/
tabBarVisibilityAnimationConfig?: {
show?: TabBarVisibilityAnimationConfig;
hide?: TabBarVisibilityAnimationConfig;
};
/**
* Function which returns a React element to render as the tab bar button.
* Renders `TouchableWithoutFeedback` by default.
*/
tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
/**
* Color for the icon and label in the active tab.
*/
tabBarActiveTintColor?: string;
/**
* Color for the icon and label in the inactive tabs.
*/
tabBarInactiveTintColor?: string;
/**
* Background color for the active tab.
*/
tabBarActiveBackgroundColor?: string;
/**
* background color for the inactive tabs.
*/
tabBarInactiveBackgroundColor?: string;
/**
* Whether label font should scale to respect Text Size accessibility settings.
*/
tabBarAllowFontScaling?: boolean;
/**
* Whether the tab label should be visible. Defaults to `true`.
*/
tabBarShowLabel?: boolean;
/**
* Style object for the tab label.
*/
tabBarLabelStyle?: StyleProp<TextStyle>;
/**
* Style object for the tab icon.
*/
tabBarIconStyle?: StyleProp<TextStyle>;
/**
* Style object for the tab item container.
*/
tabBarItemStyle?: StyleProp<ViewStyle>;
/**
* Whether the label is rendered below the icon or beside the icon.
* By default, the position is chosen automatically based on device width.
* In `below-icon` orientation (typical for iPhones), the label is rendered below and in `beside-icon` orientation, it's rendered beside (typical for iPad).
*/
tabBarLabelPosition?: LabelPosition;
/**
* Whether the label position should adapt to the orientation.
*/
tabBarAdaptive?: boolean;
/**
* Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
*/
tabBarHideOnKeyboard?: boolean;
/**
* Style object for the tab bar container.
*/
tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
/**
* Whether this screen should be unmounted when navigating away from it.
* Defaults to `false`.
*/
unmountOnBlur?: boolean;
};
/**
* Function which returns a React element to render as the tab bar button.
* Renders `TouchableWithoutFeedback` by default.
*/
tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
/**
* Color for the icon and label in the active tab.
*/
tabBarActiveTintColor?: string;
/**
* Color for the icon and label in the inactive tabs.
*/
tabBarInactiveTintColor?: string;
/**
* Background color for the active tab.
*/
tabBarActiveBackgroundColor?: string;
/**
* background color for the inactive tabs.
*/
tabBarInactiveBackgroundColor?: string;
/**
* Whether label font should scale to respect Text Size accessibility settings.
*/
tabBarAllowFontScaling?: boolean;
/**
* Whether the tab label should be visible. Defaults to `true`.
*/
tabBarShowLabel?: boolean;
/**
* Style object for the tab label.
*/
tabBarLabelStyle?: StyleProp<TextStyle>;
/**
* Style object for the tab icon.
*/
tabBarIconStyle?: StyleProp<TextStyle>;
/**
* Style object for the tab item container.
*/
tabBarItemStyle?: StyleProp<ViewStyle>;
/**
* Whether the label is rendered below the icon or beside the icon.
* By default, the position is chosen automatically based on device width.
* In `below-icon` orientation (typical for iPhones), the label is rendered below and in `beside-icon` orientation, it's rendered beside (typical for iPad).
*/
tabBarLabelPosition?: LabelPosition;
/**
* Whether the label position should adapt to the orientation.
*/
tabBarAdaptive?: boolean;
/**
* Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
*/
tabBarHideOnKeyboard?: boolean;
/**
* Style object for the tab bar container.
*/
tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
/**
* Whether this screen should be unmounted when navigating away from it.
* Defaults to `false`.
*/
unmountOnBlur?: boolean;
};
export type BottomTabDescriptor = Descriptor<
BottomTabNavigationOptions,
BottomTabNavigationProp<ParamListBase>,

15
packages/bottom-tabs/src/views/BottomTabView.tsx
View File

@@ -98,7 +98,15 @@ export default function BottomTabView(props: Props) {
>
{routes.map((route, index) => {
const descriptor = descriptors[route.key];
const { lazy = true, unmountOnBlur } = descriptor.options;
const {
lazy = true,
unmountOnBlur,
statusBarAnimation,
statusBarColor,
statusBarHidden,
statusBarStyle,
statusBarTranslucent,
} = descriptor.options;
const isFocused = state.index === index;
if (unmountOnBlur && !isFocused) {
@@ -126,6 +134,11 @@ export default function BottomTabView(props: Props) {
style={StyleSheet.absoluteFill}
visible={isFocused}
enabled={detachInactiveScreens}
statusBarAnimation={statusBarAnimation}
statusBarColor={statusBarColor}
statusBarHidden={statusBarHidden}
statusBarStyle={statusBarStyle}
statusBarTranslucent={statusBarTranslucent}
>
<BottomTabBarHeightContext.Provider value={tabBarHeight}>
<Screen

7
packages/bottom-tabs/src/views/ScreenFallback.tsx
View File

@@ -6,9 +6,12 @@ import {
// @ts-ignore
shouldUseActivityState,
} from 'react-native-screens';
import { ResourceSavingView } from '@react-navigation/elements';
import {
ResourceSavingView,
NativeScreenTraitsProps,
} from '@react-navigation/elements';
type Props = {
type Props = NativeScreenTraitsProps & {
visible: boolean;
children: React.ReactNode;
enabled: boolean;

286
packages/drawer/src/types.tsx
View File

@@ -11,7 +11,10 @@ import type {
DrawerActionHelpers,
RouteProp,
} from '@react-navigation/native';
import type { HeaderOptions } from '@react-navigation/elements';
import type {
HeaderOptions,
NativeScreenTraitsProps,
} from '@react-navigation/elements';
export type Scene = {
route: Route<string>;
@@ -35,173 +38,174 @@ export type DrawerNavigationConfig = {
detachInactiveScreens?: boolean;
};
export type DrawerNavigationOptions = HeaderOptions & {
/**
* Title text for the screen.
*/
title?: string;
export type DrawerNavigationOptions = HeaderOptions &
NativeScreenTraitsProps & {
/**
* Title text for the screen.
*/
title?: string;
/**
* Whether this screens should render the first time it's accessed. Defaults to `true`.
* Set it to `false` if you want to render the screen on initial render.
*/
lazy?: boolean;
/**
* Whether this screens should render the first time it's accessed. Defaults to `true`.
* Set it to `false` if you want to render the screen on initial render.
*/
lazy?: boolean;
/**
* Function that returns a React Element to display as a header.
*/
header?: (props: DrawerHeaderProps) => React.ReactNode;
/**
* Function that returns a React Element to display as a header.
*/
header?: (props: DrawerHeaderProps) => React.ReactNode;
/**
* Whether to show the header. Setting this to `false` hides the header.
* Defaults to `true`.
*/
headerShown?: boolean;
/**
* Whether to show the header. Setting this to `false` hides the header.
* Defaults to `true`.
*/
headerShown?: boolean;
/**
* Title string of a screen displayed in the drawer
* or a function that given { focused: boolean, color: string } returns a React.Node
* When undefined, scene title is used.
*/
drawerLabel?:
| string
| ((props: { color: string; focused: boolean }) => React.ReactNode);
/**
* Title string of a screen displayed in the drawer
* or a function that given { focused: boolean, color: string } returns a React.Node
* When undefined, scene title is used.
*/
drawerLabel?:
| string
| ((props: { color: string; focused: boolean }) => React.ReactNode);
/**
* A function that given { focused: boolean, color: string } returns a React.Node to display an icon the drawer.
*/
drawerIcon?: (props: {
color: string;
size: number;
focused: boolean;
}) => React.ReactNode;
/**
* A function that given { focused: boolean, color: string } returns a React.Node to display an icon the drawer.
*/
drawerIcon?: (props: {
color: string;
size: number;
focused: boolean;
}) => React.ReactNode;
/**
* Color for the icon and label in the active item in the drawer.
*/
drawerActiveTintColor?: string;
/**
* Color for the icon and label in the active item in the drawer.
*/
drawerActiveTintColor?: string;
/**
* Background color for the active item in the drawer.
*/
drawerActiveBackgroundColor?: string;
/**
* Background color for the active item in the drawer.
*/
drawerActiveBackgroundColor?: string;
/**
* Color for the icon and label in the inactive items in the drawer.
*/
drawerInactiveTintColor?: string;
/**
* Color for the icon and label in the inactive items in the drawer.
*/
drawerInactiveTintColor?: string;
/**
* Background color for the inactive items in the drawer.
*/
drawerInactiveBackgroundColor?: string;
/**
* Background color for the inactive items in the drawer.
*/
drawerInactiveBackgroundColor?: string;
/**
* Style object for the single item, which can contain an icon and/or a label.
*/
drawerItemStyle?: StyleProp<ViewStyle>;
/**
* Style object for the single item, which can contain an icon and/or a label.
*/
drawerItemStyle?: StyleProp<ViewStyle>;
/**
* Style object to apply to the `Text` inside content section which renders a label.
*/
drawerLabelStyle?: StyleProp<TextStyle>;
/**
* Style object to apply to the `Text` inside content section which renders a label.
*/
drawerLabelStyle?: StyleProp<TextStyle>;
/**
* Style object for the content section.
*/
drawerContentContainerStyle?: StyleProp<ViewStyle>;
/**
* Style object for the content section.
*/
drawerContentContainerStyle?: StyleProp<ViewStyle>;
/**
* Style object for the wrapper view.
*/
drawerContentStyle?: StyleProp<ViewStyle>;
/**
* Style object for the wrapper view.
*/
drawerContentStyle?: StyleProp<ViewStyle>;
/**
* Style object for the drawer component.
* You can pass a custom background color for a drawer or a custom width here.
*/
drawerStyle?: StyleProp<ViewStyle>;
/**
* Style object for the drawer component.
* You can pass a custom background color for a drawer or a custom width here.
*/
drawerStyle?: StyleProp<ViewStyle>;
/**
* Position of the drawer on the screen. Defaults to `left`.
*/
drawerPosition?: 'left' | 'right';
/**
* Position of the drawer on the screen. Defaults to `left`.
*/
drawerPosition?: 'left' | 'right';
/**
* Type of the drawer. It determines how the drawer looks and animates.
* - `front`: Traditional drawer which covers the screen with a overlay behind it.
* - `back`: The drawer is revealed behind the screen on swipe.
* - `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
* - `permanent`: A permanent drawer is shown as a sidebar.
*/
drawerType?: 'front' | 'back' | 'slide' | 'permanent';
/**
* Type of the drawer. It determines how the drawer looks and animates.
* - `front`: Traditional drawer which covers the screen with a overlay behind it.
* - `back`: The drawer is revealed behind the screen on swipe.
* - `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
* - `permanent`: A permanent drawer is shown as a sidebar.
*/
drawerType?: 'front' | 'back' | 'slide' | 'permanent';
/**
* Whether the statusbar should be hidden when the drawer is pulled or opens,
*/
drawerHideStatusBarOnOpen?: boolean;
/**
* Whether the statusbar should be hidden when the drawer is pulled or opens,
*/
drawerHideStatusBarOnOpen?: boolean;
/**
* Animation of the statusbar when hiding it. use in combination with `drawerHideStatusBarOnOpen`.
*/
drawerStatusBarAnimation?: 'slide' | 'none' | 'fade';
/**
* Animation of the statusbar when hiding it. use in combination with `drawerHideStatusBarOnOpen`.
*/
drawerStatusBarAnimation?: 'slide' | 'none' | 'fade';
/**
* Color of the overlay to be displayed on top of the content view when drawer gets open.
* The opacity is animated from `0` to `1` when the drawer opens.
*/
overlayColor?: string;
/**
* Color of the overlay to be displayed on top of the content view when drawer gets open.
* The opacity is animated from `0` to `1` when the drawer opens.
*/
overlayColor?: string;
/**
* Style object for the component wrapping the screen content.
*/
sceneContainerStyle?: StyleProp<ViewStyle>;
/**
* Style object for the component wrapping the screen content.
*/
sceneContainerStyle?: StyleProp<ViewStyle>;
/**
* Whether you can use gestures to open or close the drawer.
* Setting this to `false` disables swipe gestures as well as tap on overlay to close.
* See `swipeEnabled` to disable only the swipe gesture.
* Defaults to `true`.
* Not supported on Web.
*/
gestureEnabled?: boolean;
/**
* Whether you can use gestures to open or close the drawer.
* Setting this to `false` disables swipe gestures as well as tap on overlay to close.
* See `swipeEnabled` to disable only the swipe gesture.
* Defaults to `true`.
* Not supported on Web.
*/
gestureEnabled?: boolean;
/**
* Props to pass to the underlying pan gesture handler.
* Not supported on Web.
*/
gestureHandlerProps?: PanGestureHandlerProperties;
/**
* Props to pass to the underlying pan gesture handler.
* Not supported on Web.
*/
gestureHandlerProps?: PanGestureHandlerProperties;
/**
* Whether you can use swipe gestures to open or close the drawer.
* Defaults to `true`.
* Not supported on Web.
*/
swipeEnabled?: boolean;
/**
* Whether you can use swipe gestures to open or close the drawer.
* Defaults to `true`.
* Not supported on Web.
*/
swipeEnabled?: boolean;
/**
* How far from the edge of the screen the swipe gesture should activate.
* Not supported on Web.
*/
swipeEdgeWidth?: number;
/**
* How far from the edge of the screen the swipe gesture should activate.
* Not supported on Web.
*/
swipeEdgeWidth?: number;
/**
* Minimum swipe distance threshold that should activate opening the drawer.
*/
swipeMinDistance?: number;
/**
* Minimum swipe distance threshold that should activate opening the drawer.
*/
swipeMinDistance?: number;
/**
* Whether the keyboard should be dismissed when the swipe gesture begins.
* Defaults to `'on-drag'`. Set to `'none'` to disable keyboard handling.
*/
keyboardDismissMode?: 'on-drag' | 'none';
/**
* Whether the keyboard should be dismissed when the swipe gesture begins.
* Defaults to `'on-drag'`. Set to `'none'` to disable keyboard handling.
*/
keyboardDismissMode?: 'on-drag' | 'none';
/**
* Whether this screen should be unmounted when navigating away from it.
* Defaults to `false`.
*/
unmountOnBlur?: boolean;
};
/**
* Whether this screen should be unmounted when navigating away from it.
* Defaults to `false`.
*/
unmountOnBlur?: boolean;
};
export type DrawerContentComponentProps = {
state: DrawerNavigationState<ParamListBase>;

15
packages/drawer/src/views/DrawerView.tsx
View File

@@ -156,7 +156,15 @@ function DrawerViewBase({
<ScreenContainer enabled={detachInactiveScreens} style={styles.content}>
{state.routes.map((route, index) => {
const descriptor = descriptors[route.key];
const { lazy = true, unmountOnBlur } = descriptor.options;
const {
lazy = true,
unmountOnBlur,
statusBarAnimation,
statusBarColor,
statusBarHidden,
statusBarStyle,
statusBarTranslucent,
} = descriptor.options;
const isFocused = state.index === index;
if (unmountOnBlur && !isFocused) {
@@ -189,6 +197,11 @@ function DrawerViewBase({
style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]}
visible={isFocused}
enabled={detachInactiveScreens}
statusBarAnimation={statusBarAnimation}
statusBarColor={statusBarColor}
statusBarHidden={statusBarHidden}
statusBarStyle={statusBarStyle}
statusBarTranslucent={statusBarTranslucent}
>
<Screen
focused={isFocused}

7
packages/drawer/src/views/ScreenFallback.tsx
View File

@@ -6,9 +6,12 @@ import {
// @ts-ignore
shouldUseActivityState,
} from 'react-native-screens';
import { ResourceSavingView } from '@react-navigation/elements';
import {
ResourceSavingView,
NativeScreenTraitsProps,
} from '@react-navigation/elements';
type Props = {
type Props = NativeScreenTraitsProps & {
visible: boolean;
children: React.ReactNode;
enabled: boolean;

48
packages/elements/src/types.tsx
View File

@@ -6,6 +6,16 @@ import type {
LayoutChangeEvent,
} from 'react-native';
type ScreenOrientationTypes =
| 'default'
| 'all'
| 'portrait'
| 'portrait_up'
| 'portrait_down'
| 'landscape'
| 'landscape_left'
| 'landscape_right';
export type Layout = { width: number; height: number };
export type HeaderOptions = {
@@ -196,3 +206,41 @@ export type HeaderBackButtonProps = {
*/
style?: StyleProp<ViewStyle>;
};
export type NativeScreenTraitsProps = {
/**
* In which orientation should the screen appear. It requires having `react-native-screens` enabled.
* The following values are currently supported:
* - "default" - resolves to "all" without "portrait_down" on iOS. On Android, this lets the system decide the best orientation.
* - "all" – all orientations are permitted
* - "portrait" – portrait orientations are permitted
* - "portrait_up" – right-side portrait orientation is permitted
* - "portrait_down" – upside-down portrait orientation is permitted
* - "landscape" – landscape orientations are permitted
* - "landscape_left" – landscape-left orientation is permitted
* - "landscape_right" – landscape-right orientation is permitted
*/
screenOrientation?: ScreenOrientationTypes;
/**
* Sets the status bar animation (similar to the `StatusBar` component). Requires enabling (or deleting) `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
*/
statusBarAnimation?: 'none' | 'fade' | 'slide';
/** Sets the status bar color (similar to the `StatusBar` component). It requires having `react-native-screens` enabled.
*
* @platform android
*/
statusBarColor?: string;
/**
* Whether the status bar should be hidden on this screen. Requires enabling (or deleting) `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
*/
statusBarHidden?: boolean;
/** Sets the status bar color (similar to the `StatusBar` component). Requires enabling (or deleting) `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
*/
statusBarStyle?: 'inverted' | 'auto' | 'light' | 'dark';
/**
* Sets the translucency of the status bar. Defaults to true. It requires having `react-native-screens` enabled.
*
* @platform android
*/
statusBarTranslucent?: boolean;
};

2
packages/stack/src/types.tsx
View File

@@ -13,6 +13,7 @@ import type {
import type {
HeaderBackButton,
HeaderOptions,
NativeScreenTraitsProps,
} from '@react-navigation/elements';
export type StackNavigationEventMap = {
@@ -188,6 +189,7 @@ export type StackDescriptor = Descriptor<
export type StackDescriptorMap = Record<string, StackDescriptor>;
export type StackNavigationOptions = StackHeaderOptions &
NativeScreenTraitsProps &
Partial<TransitionPreset> & {
/**
* String that can be displayed in the header as a fallback for `headerTitle`.

13
packages/stack/src/views/Screens.tsx
View File

@@ -1,6 +1,8 @@
import * as React from 'react';
import { Animated, View, Platform, ViewProps } from 'react-native';
import type { NativeScreenTraitsProps } from '@react-navigation/elements';
let Screens: typeof import('react-native-screens') | undefined;
try {
@@ -55,11 +57,12 @@ export const MaybeScreen = ({
enabled,
active,
...rest
}: ViewProps & {
enabled: boolean;
active: 0 | 1 | Animated.AnimatedInterpolation;
children: React.ReactNode;
}) => {
}: ViewProps &
NativeScreenTraitsProps & {
enabled: boolean;
active: 0 | 1 | Animated.AnimatedInterpolation;
children: React.ReactNode;
}) => {
if (enabled && Platform.OS === 'web') {
return <AnimatedWebScreen active={active} {...rest} />;
}

10
packages/stack/src/views/Stack/CardStack.tsx
View File

@@ -535,6 +535,11 @@ export default class CardStack extends React.Component<Props, State> {
? forNoAnimationCard
: defaultTransitionPreset.cardStyleInterpolator,
headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
statusBarAnimation,
statusBarColor,
statusBarHidden,
statusBarStyle,
statusBarTranslucent,
} = scene.descriptor
? scene.descriptor.options
: ({} as StackNavigationOptions);
@@ -605,6 +610,11 @@ export default class CardStack extends React.Component<Props, State> {
enabled={detachInactiveScreens}
active={isScreenActive}
pointerEvents="box-none"
statusBarAnimation={statusBarAnimation}
statusBarColor={statusBarColor}
statusBarHidden={statusBarHidden}
statusBarStyle={statusBarStyle}
statusBarTranslucent={statusBarTranslucent}
>
<CardContainer
index={index}