From ffba0ebb07bed60363a183f1e51637cac93c86b9 Mon Sep 17 00:00:00 2001 From: WoLewicki Date: Tue, 4 Aug 2020 11:03:34 +0200 Subject: [PATCH] fix: little changes --- .../java/com/swmansion/rnscreens/Screen.java | 3 - .../com/swmansion/rnscreens/ScreenStack.java | 2 +- ios/RNSScreenStack.m | 4 +- src/index.d.ts | 437 +++++++++--------- src/native-stack/types.tsx | 60 ++- 5 files changed, 249 insertions(+), 257 deletions(-) diff --git a/android/src/main/java/com/swmansion/rnscreens/Screen.java b/android/src/main/java/com/swmansion/rnscreens/Screen.java index d9d8632afc..2ff067cf43 100644 --- a/android/src/main/java/com/swmansion/rnscreens/Screen.java +++ b/android/src/main/java/com/swmansion/rnscreens/Screen.java @@ -60,7 +60,6 @@ public void onViewDetachedFromWindow(View view) { private StackAnimation mStackAnimation = StackAnimation.DEFAULT; private boolean mGestureEnabled = true; - @Override protected void onAnimationStart() { super.onAnimationStart(); @@ -152,7 +151,6 @@ public void setTransitioning(boolean transitioning) { return; } mTransitioning = transitioning; - super.setLayerType(transitioning ? View.LAYER_TYPE_HARDWARE : View.LAYER_TYPE_NONE, null); } @@ -168,7 +166,6 @@ public void setReplaceAnimation(ReplaceAnimation replaceAnimation) { mReplaceAnimation = replaceAnimation; } - public void setGestureEnabled(boolean gestureEnabled) { mGestureEnabled = gestureEnabled; } diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStack.java b/android/src/main/java/com/swmansion/rnscreens/ScreenStack.java index b9128db350..75cf1d2f1a 100644 --- a/android/src/main/java/com/swmansion/rnscreens/ScreenStack.java +++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStack.java @@ -199,7 +199,7 @@ public void run() { int transition = FragmentTransaction.TRANSIT_FRAGMENT_OPEN; if (mStack.size() == mScreenFragments.size() && newTop.getScreen().getReplaceAnimation() == Screen.ReplaceAnimation.POP) { // new screen was not on the stack before and the stack has the same amount of screens as before, - // so the "replace" action was called + // so probably the "replace" action was called transition = FragmentTransaction.TRANSIT_FRAGMENT_CLOSE; } switch (newTop.getScreen().getStackAnimation()) { diff --git a/ios/RNSScreenStack.m b/ios/RNSScreenStack.m index 809463877f..2ff0bebe2a 100644 --- a/ios/RNSScreenStack.m +++ b/ios/RNSScreenStack.m @@ -364,9 +364,9 @@ - (void)setPushViewControllers:(NSArray *)controllers [_controller setViewControllers:controllers animated:NO]; } else if (top != lastTop) { if (![controllers containsObject:lastTop]) { - // if we have same amount of controllers as before, probably replace was called + // if we have same amount of controllers as before and the screen wasn't on the stack before probably replace was called // so we check if the new screen has "push" replace animation - if (_controller.viewControllers.count == controllers.count && ((RNSScreenView *) top.view).replaceAnimation == RNSScreenReplaceAnimationPush) { + if (_controller.viewControllers.count == controllers.count && ![_controller.viewControllers containsObject:top] && ((RNSScreenView *) top.view).replaceAnimation == RNSScreenReplaceAnimationPush) { NSMutableArray *newControllers = [NSMutableArray arrayWithArray:controllers]; [_controller pushViewController:top animated:shouldAnimate]; [_controller setViewControllers:newControllers animated:NO]; diff --git a/src/index.d.ts b/src/index.d.ts index fc3cbadbd0..e22a81f2b4 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -2,231 +2,230 @@ // TypeScript Version: 2.8 declare module 'react-native-screens' { - import { ComponentClass } from 'react'; - import { - ViewProps, - Animated, - NativeSyntheticEvent, - NativeTouchEvent, - ImageProps, - } from 'react-native'; + import { ComponentClass } from 'react'; + import { + ViewProps, + Animated, + NativeSyntheticEvent, + NativeTouchEvent, + ImageProps, + } from 'react-native'; - export function useScreens(shouldUseScreens?: boolean): void; - export function enableScreens(shouldEnableScreens?: boolean): void; - export function screensEnabled(): boolean; + export function useScreens(shouldUseScreens?: boolean): void; + export function enableScreens(shouldEnableScreens?: boolean): void; + export function screensEnabled(): boolean; - export type StackPresentationTypes = - | 'push' - | 'modal' - | 'transparentModal' - | 'containedModal' - | 'containedTransparentModal' - | 'fullScreenModal' - | 'formSheet'; - export type StackAnimationTypes = 'default' | 'fade' | 'flip' | 'none'; - export type BlurEffectTypes = - | 'extraLight' - | 'light' - | 'dark' - | 'regular' - | 'prominent' - | 'systemUltraThinMaterial' - | 'systemThinMaterial' - | 'systemMaterial' - | 'systemThickMaterial' - | 'systemChromeMaterial' - | 'systemUltraThinMaterialLight' - | 'systemThinMaterialLight' - | 'systemMaterialLight' - | 'systemThickMaterialLight' - | 'systemChromeMaterialLight' - | 'systemUltraThinMaterialDark' - | 'systemThinMaterialDark' - | 'systemMaterialDark' - | 'systemThickMaterialDark' - | 'systemChromeMaterialDark'; - export type ScreenReplaceTypes = 'push' | 'pop'; + export type StackPresentationTypes = + | 'push' + | 'modal' + | 'transparentModal' + | 'containedModal' + | 'containedTransparentModal' + | 'fullScreenModal' + | 'formSheet'; + export type StackAnimationTypes = 'default' | 'fade' | 'flip' | 'none'; + export type BlurEffectTypes = + | 'extraLight' + | 'light' + | 'dark' + | 'regular' + | 'prominent' + | 'systemUltraThinMaterial' + | 'systemThinMaterial' + | 'systemMaterial' + | 'systemThickMaterial' + | 'systemChromeMaterial' + | 'systemUltraThinMaterialLight' + | 'systemThinMaterialLight' + | 'systemMaterialLight' + | 'systemThickMaterialLight' + | 'systemChromeMaterialLight' + | 'systemUltraThinMaterialDark' + | 'systemThinMaterialDark' + | 'systemMaterialDark' + | 'systemThickMaterialDark' + | 'systemChromeMaterialDark'; + export type ScreenReplaceTypes = 'push' | 'pop'; - export interface ScreenProps extends ViewProps { - active?: 0 | 1 | Animated.AnimatedInterpolation; - onComponentRef?: (view: any) => void; - children?: React.ReactNode; + export interface ScreenProps extends ViewProps { + active?: 0 | 1 | Animated.AnimatedInterpolation; + onComponentRef?: (view: any) => void; + children?: React.ReactNode; - /** - * @description A callback that gets called when the current screen will appear. This is called as soon as the transition begins. - */ - onWillAppear?: (e: NativeSyntheticEvent) => void; - /** - * @description A callback that gets called when the current screen will disappear. This is called as soon as the transition begins. - */ - onWillDisappear?: (e: NativeSyntheticEvent) => void; - /** - * @description A callback that gets called when the current screen appears. - */ - onAppear?: (e: NativeSyntheticEvent) => void; - /** - * @description A callback that gets called when the current screen disappears. - */ - onDisappear?: (e: NativeSyntheticEvent) => void; - /** - * @description A callback that gets called when the current screen is dismissed by hardware back (on Android) or dismiss gesture (swipe back or down). The callback takes no arguments. - */ - onDismissed?: (e: NativeSyntheticEvent) => void; - /** - * @type "push" – the new screen will be pushed onto a stack which on iOS means that the default animation will be slide from the side, the animation on Android may vary depending on the OS version and theme. - * @type "modal" – the new screen will be presented modally. In addition this allow for a nested stack to be rendered inside such screens. - * @type "transparentModal" – the new screen will be presented modally but in addition the second to last screen will remain attached to the stack container such that if the top screen is non opaque the content below can still be seen. If "modal" is used instead the below screen will get unmounted as soon as the transition ends. - * @type "containedModal" – will use "UIModalPresentationCurrentContext" modal style on iOS and will fallback to "modal" on Android. - * @type "containedTransparentModal" – will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android. - * @type "fullScreenModal" – will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android. - * @type "formSheet" – will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android. - */ - stackPresentation: StackPresentationTypes; - /** - * @description Allows for the customization of how the given screen should appear/dissapear when pushed or popped at the top of the stack. The following values are currently supported: - * @type "default" – uses a platform default animation - * @type "fade" – fades screen in or out - * @type "flip" – flips the screen, requires stackPresentation: "modal" (iOS only) - * @type "none" – the screen appears/dissapears without an animation - */ - stackAnimation?: StackAnimationTypes; - /** - * @host (iOS only) - * @description Allows for the customization of the type of animation to use when this screen replaces another screen at the top of the stack. The following values are currently supported: - * @type "push" – performs push animation - * @type "pop" – performs pop animation (default) - */ - replaceAnimation?: ScreenReplaceTypes; - /** - * @description When set to false the back swipe gesture will be disabled when the parent Screen is on top of the stack. The default value is true. - */ - gestureEnabled?: boolean; - } + /** + * @description A callback that gets called when the current screen will appear. This is called as soon as the transition begins. + */ + onWillAppear?: (e: NativeSyntheticEvent) => void; + /** + * @description A callback that gets called when the current screen will disappear. This is called as soon as the transition begins. + */ + onWillDisappear?: (e: NativeSyntheticEvent) => void; + /** + * @description A callback that gets called when the current screen appears. + */ + onAppear?: (e: NativeSyntheticEvent) => void; + /** + * @description A callback that gets called when the current screen disappears. + */ + onDisappear?: (e: NativeSyntheticEvent) => void; + /** + * @description A callback that gets called when the current screen is dismissed by hardware back (on Android) or dismiss gesture (swipe back or down). The callback takes no arguments. + */ + onDismissed?: (e: NativeSyntheticEvent) => void; + /** + * @type "push" – the new screen will be pushed onto a stack which on iOS means that the default animation will be slide from the side, the animation on Android may vary depending on the OS version and theme. + * @type "modal" – the new screen will be presented modally. In addition this allow for a nested stack to be rendered inside such screens. + * @type "transparentModal" – the new screen will be presented modally but in addition the second to last screen will remain attached to the stack container such that if the top screen is non opaque the content below can still be seen. If "modal" is used instead the below screen will get unmounted as soon as the transition ends. + * @type "containedModal" – will use "UIModalPresentationCurrentContext" modal style on iOS and will fallback to "modal" on Android. + * @type "containedTransparentModal" – will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android. + * @type "fullScreenModal" – will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android. + * @type "formSheet" – will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android. + */ + stackPresentation: StackPresentationTypes; + /** + * @description Allows for the customization of how the given screen should appear/dissapear when pushed or popped at the top of the stack. The following values are currently supported: + * @type "default" – uses a platform default animation + * @type "fade" – fades screen in or out + * @type "flip" – flips the screen, requires stackPresentation: "modal" (iOS only) + * @type "none" – the screen appears/dissapears without an animation + */ + stackAnimation?: StackAnimationTypes; + /** + * @description Allows for the customization of the type of animation to use when this screen replaces another screen at the top of the stack. The following values are currently supported: + * @type "push" – performs push animation + * @type "pop" – performs pop animation (default) + */ + replaceAnimation?: ScreenReplaceTypes; + /** + * @description When set to false the back swipe gesture will be disabled when the parent Screen is on top of the stack. The default value is true. + */ + gestureEnabled?: boolean; + } - export type ScreenContainerProps = ViewProps; + export type ScreenContainerProps = ViewProps; - export interface ScreenStackProps extends ViewProps { - transitioning?: number; - progress?: number; - /** - * @description A callback that gets called when the current screen finishes its transition. - */ - onFinishTransitioning?: (e: NativeSyntheticEvent) => void; - } + export interface ScreenStackProps extends ViewProps { + transitioning?: number; + progress?: number; + /** + * @description A callback that gets called when the current screen finishes its transition. + */ + onFinishTransitioning?: (e: NativeSyntheticEvent) => void; + } - export interface ScreenStackHeaderConfigProps extends ViewProps { - /** - * @description String that representing screen title that will get rendered in the middle section of the header. On iOS the title is centered on the header while on Android it is aligned to the left and placed next to back button (if one is present). - */ - title?: string; - /** - * @description When set to true the header will be hidden while the parent Screen is on the top of the stack. The default value is false. - */ - hidden?: boolean; - /** - * @description Controls the color of items rendered on the header. This includes back icon, back text (iOS only) and title text. If you want the title to have different color use titleColor property. - */ - color?: string; - /** - * @description Customize font family to be used for the title. - */ - titleFontFamily?: string; - /** - * @description Customize the size of the font to be used for the title. - */ - titleFontSize?: number; - /** - * @description Allows for setting text color of the title. - */ - titleColor?: string; - /** - * @description Controls the color of the navigation header. - */ - backgroundColor?: string; - /** - * @description Boolean that allows for disabling drop shadow under navigation header. The default value is true. - */ - hideShadow?: boolean; - /** - * @description If set to true the back button will not be rendered as a part of navigation header. - */ - hideBackButton?: boolean; - /** - * @description Whether to show the back button with a custom left side of the header. - */ - backButtonInCustomView?: boolean; - /** - * @host (iOS only) - * @description When set to true, it makes native navigation bar on iOS semi transparent with blur effect. It is a common way of presenting navigation bar introduced in iOS 11. The default value is false - */ - translucent?: boolean; - /** - * @description A flag to that lets you opt out of insetting the header. You may want to set this to `false` if you use an opaque status bar. Defaults to `true`. - * @host (Android only) - */ - topInsetEnabled?: boolean; - /** - * @host (iOS only) - * @description Allows for controlling the string to be rendered next to back button. By default iOS uses the title of the previous screen. - */ - backTitle?: string; - /** - * @host (iOS only) - * @description Allows for customizing font family to be used for back button title on iOS. - */ - backTitleFontFamily?: string; - /** - * @host (iOS only) - * @description Allows for customizing font size to be used for back button title on iOS. - */ - backTitleFontSize?: number; - /** - * @host (iOS only) - * @description When set to true it makes the title display using the large title effect. - */ - largeTitle?: boolean; - /** - * @host (iOS only) - * @description Customize font family to be used for the large title. - */ - largeTitleFontFamily?: string; - /** - * @host (iOS only) - * @description Customize the size of the font to be used for the large title. - */ - largeTitleFontSize?: number; - /** - *@description Controls the color of the navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar. - */ - largeTitleBackgroundColor?: string; - /** - * @description Boolean that allows for disabling drop shadow under navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar. - */ - largeTitleHideShadow?: boolean; - /** - * @host (iOS only) - * @description Customize the color to be used for the large title. By default uses the titleColor property. - */ - largeTitleColor?: string; - /** - * Pass HeaderLeft, HeaderRight and HeaderTitle - */ - children?: React.ReactNode; - /** - * @host (iOS only) - * @description Blur effect to be applied to the header. Works with backgroundColor's alpha < 1. - */ - blurEffect?: BlurEffectTypes; - } + export interface ScreenStackHeaderConfigProps extends ViewProps { + /** + * @description String that representing screen title that will get rendered in the middle section of the header. On iOS the title is centered on the header while on Android it is aligned to the left and placed next to back button (if one is present). + */ + title?: string; + /** + * @description When set to true the header will be hidden while the parent Screen is on the top of the stack. The default value is false. + */ + hidden?: boolean; + /** + * @description Controls the color of items rendered on the header. This includes back icon, back text (iOS only) and title text. If you want the title to have different color use titleColor property. + */ + color?: string; + /** + * @description Customize font family to be used for the title. + */ + titleFontFamily?: string; + /** + * @description Customize the size of the font to be used for the title. + */ + titleFontSize?: number; + /** + * @description Allows for setting text color of the title. + */ + titleColor?: string; + /** + * @description Controls the color of the navigation header. + */ + backgroundColor?: string; + /** + * @description Boolean that allows for disabling drop shadow under navigation header. The default value is true. + */ + hideShadow?: boolean; + /** + * @description If set to true the back button will not be rendered as a part of navigation header. + */ + hideBackButton?: boolean; + /** + * @description Whether to show the back button with a custom left side of the header. + */ + backButtonInCustomView?: boolean; + /** + * @host (iOS only) + * @description When set to true, it makes native navigation bar on iOS semi transparent with blur effect. It is a common way of presenting navigation bar introduced in iOS 11. The default value is false + */ + translucent?: boolean; + /** + * @description A flag to that lets you opt out of insetting the header. You may want to set this to `false` if you use an opaque status bar. Defaults to `true`. + * @host (Android only) + */ + topInsetEnabled?: boolean; + /** + * @host (iOS only) + * @description Allows for controlling the string to be rendered next to back button. By default iOS uses the title of the previous screen. + */ + backTitle?: string; + /** + * @host (iOS only) + * @description Allows for customizing font family to be used for back button title on iOS. + */ + backTitleFontFamily?: string; + /** + * @host (iOS only) + * @description Allows for customizing font size to be used for back button title on iOS. + */ + backTitleFontSize?: number; + /** + * @host (iOS only) + * @description When set to true it makes the title display using the large title effect. + */ + largeTitle?: boolean; + /** + * @host (iOS only) + * @description Customize font family to be used for the large title. + */ + largeTitleFontFamily?: string; + /** + * @host (iOS only) + * @description Customize the size of the font to be used for the large title. + */ + largeTitleFontSize?: number; + /** + *@description Controls the color of the navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar. + */ + largeTitleBackgroundColor?: string; + /** + * @description Boolean that allows for disabling drop shadow under navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar. + */ + largeTitleHideShadow?: boolean; + /** + * @host (iOS only) + * @description Customize the color to be used for the large title. By default uses the titleColor property. + */ + largeTitleColor?: string; + /** + * Pass HeaderLeft, HeaderRight and HeaderTitle + */ + children?: React.ReactNode; + /* + * @host (iOS only) + * @description Blur effect to be applied to the header. Works with backgroundColor's alpha < 1. + */ + blurEffect?: BlurEffectTypes; + } - export const Screen: ComponentClass; - export const ScreenContainer: ComponentClass; - export const NativeScreen: ComponentClass; - export const NativeScreenContainer: ComponentClass; - export const ScreenStack: ComponentClass; - export const ScreenStackHeaderBackButtonImage: ComponentClass; - export const ScreenStackHeaderLeftView: ComponentClass; - export const ScreenStackHeaderRightView: ComponentClass; - export const ScreenStackHeaderCenterView: ComponentClass; - export const ScreenStackHeaderConfig: ComponentClass; + export const Screen: ComponentClass; + export const ScreenContainer: ComponentClass; + export const NativeScreen: ComponentClass; + export const NativeScreenContainer: ComponentClass; + export const ScreenStack: ComponentClass; + export const ScreenStackHeaderBackButtonImage: ComponentClass; + export const ScreenStackHeaderLeftView: ComponentClass; + export const ScreenStackHeaderRightView: ComponentClass; + export const ScreenStackHeaderCenterView: ComponentClass; + export const ScreenStackHeaderConfig: ComponentClass; } diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx index e05c790024..11b6414c82 100644 --- a/src/native-stack/types.tsx +++ b/src/native-stack/types.tsx @@ -36,35 +36,35 @@ export type NativeStackNavigationEventMap = { export type NativeStackNavigationProp< ParamList extends ParamListBase, RouteName extends keyof ParamList = string - > = NavigationProp< - ParamList, - RouteName, - StackNavigationState, - NativeStackNavigationOptions, - NativeStackNavigationEventMap - > & { - /** - * Push a new screen onto the stack. - * - * @param name Name of the route for the tab. - * @param [params] Params object for the route. - */ - push( - ...args: ParamList[RouteName] extends undefined | any - ? [RouteName] | [RouteName, ParamList[RouteName]] - : [RouteName, ParamList[RouteName]] - ): void; +> = NavigationProp< + ParamList, + RouteName, + StackNavigationState, + NativeStackNavigationOptions, + NativeStackNavigationEventMap +> & { + /** + * Push a new screen onto the stack. + * + * @param name Name of the route for the tab. + * @param [params] Params object for the route. + */ + push( + ...args: ParamList[RouteName] extends undefined | any + ? [RouteName] | [RouteName, ParamList[RouteName]] + : [RouteName, ParamList[RouteName]] + ): void; - /** - * Pop a screen from the stack. - */ - pop(count?: number): void; + /** + * Pop a screen from the stack. + */ + pop(count?: number): void; - /** - * Pop to the first route in the stack, dismissing all other screens. - */ - popToTop(): void; - }; + /** + * Pop to the first route in the stack, dismissing all other screens. + */ + popToTop(): void; +}; export type NativeStackNavigationHelpers = NavigationHelpers< ParamListBase, @@ -233,14 +233,10 @@ export type NativeStackNavigationOptions = { */ gestureEnabled?: boolean; /** - * How should the screen replacing another screen animate Defaults to `pop`. + * How should the screen replacing another screen animate. Defaults to `pop`. * The following values are currently supported: * - "push" – the new screen will perform push animation. * - "pop" – the new screen will perform pop animation. - * - * Only supported on iOS. - * - * @platform ios */ replaceAnimation?: ScreenProps['replaceAnimation']; /**