diff --git a/packages/material-top-tabs/src/types.tsx b/packages/material-top-tabs/src/types.tsx index 25e622c5..1504c373 100644 --- a/packages/material-top-tabs/src/types.tsx +++ b/packages/material-top-tabs/src/types.tsx @@ -125,7 +125,7 @@ export type MaterialTopTabNavigationConfig = Partial< * * This view is usually only shown for a split second. Keep it lightweight. * - * By default, this renders null.. + * By default, this renders null. */ lazyPlaceholderComponent?: React.ComponentType<{ route: Route }>; /** diff --git a/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx b/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx index c84ccc5f..ea3fdb7a 100644 --- a/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx +++ b/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx @@ -9,15 +9,16 @@ const { cond, add, multiply, interpolate } = Animated; * Standard iOS-style slide in from the right. */ export function forHorizontalIOS({ - progress: { current, next }, + current, + next, layouts: { screen }, }: CardInterpolationProps): CardInterpolatedStyle { - const translateFocused = interpolate(current, { + const translateFocused = interpolate(current.progress, { inputRange: [0, 1], outputRange: [I18nManager.isRTL ? -screen.width : screen.width, 0], }); const translateUnfocused = next - ? interpolate(next, { + ? interpolate(next.progress, { inputRange: [0, 1], outputRange: [ 0, @@ -26,12 +27,12 @@ export function forHorizontalIOS({ }) : 0; - const overlayOpacity = interpolate(current, { + const overlayOpacity = interpolate(current.progress, { inputRange: [0, 1], outputRange: [0, 0.07], }); - const shadowOpacity = interpolate(current, { + const shadowOpacity = interpolate(current.progress, { inputRange: [0, 1], outputRange: [0, 0.3], }); @@ -54,10 +55,10 @@ export function forHorizontalIOS({ * Standard iOS-style slide in from the bottom (used for modals). */ export function forVerticalIOS({ - progress: { current }, + current, layouts: { screen }, }: CardInterpolationProps): CardInterpolatedStyle { - const translateY = interpolate(current, { + const translateY = interpolate(current.progress, { inputRange: [0, 1], outputRange: [screen.height, 0], }); @@ -77,14 +78,15 @@ export function forVerticalIOS({ */ export function forModalPresentationIOS({ index, - progress: { current, next }, + current, + next, layouts: { screen }, }: CardInterpolationProps): CardInterpolatedStyle { const topOffset = 10; const statusBarHeight = getStatusBarHeight(screen.width > screen.height); const aspectRatio = screen.height / screen.width; - const progress = add(current, next ? next : 0); + const progress = add(current.progress, next ? next.progress : 0); const translateY = interpolate(progress, { inputRange: [0, 1, 2], @@ -129,19 +131,19 @@ export function forModalPresentationIOS({ * Standard Android-style fade in from the bottom for Android Oreo. */ export function forFadeFromBottomAndroid({ - progress: { current }, + current, layouts: { screen }, closing, }: CardInterpolationProps): CardInterpolatedStyle { - const translateY = interpolate(current, { + const translateY = interpolate(current.progress, { inputRange: [0, 1], outputRange: [multiply(screen.height, 0.08), 0], }); const opacity = cond( closing, - current, - interpolate(current, { + current.progress, + interpolate(current.progress, { inputRange: [0, 0.5, 0.9, 1], outputRange: [0, 0.25, 0.7, 1], }) @@ -159,24 +161,25 @@ export function forFadeFromBottomAndroid({ * Standard Android-style reveal from the bottom for Android Pie. */ export function forRevealFromBottomAndroid({ - progress: { current, next }, + current, + next, layouts: { screen }, }: CardInterpolationProps): CardInterpolatedStyle { - const containerTranslateY = interpolate(current, { + const containerTranslateY = interpolate(current.progress, { inputRange: [0, 1], outputRange: [screen.height, 0], }); - const cardTranslateYFocused = interpolate(current, { + const cardTranslateYFocused = interpolate(current.progress, { inputRange: [0, 1], outputRange: [multiply(screen.height, 95.9 / 100, -1), 0], }); const cardTranslateYUnfocused = next - ? interpolate(next, { + ? interpolate(next.progress, { inputRange: [0, 1], outputRange: [0, multiply(screen.height, 2 / 100, -1)], }) : 0; - const overlayOpacity = interpolate(current, { + const overlayOpacity = interpolate(current.progress, { inputRange: [0, 0.36, 1], outputRange: [0, 0.1, 0.1], }); diff --git a/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx b/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx index bf980994..c8ff6745 100644 --- a/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx +++ b/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx @@ -8,7 +8,8 @@ const { interpolate, add } = Animated; * Standard UIKit style animation for the header where the title fades into the back button label. */ export function forUIKit({ - progress: { current, next }, + current, + next, layouts, }: HeaderInterpolationProps): HeaderInterpolatedStyle { const defaultOffset = 100; @@ -30,7 +31,7 @@ export function forUIKit({ // The back title also animates in from this position const rightOffset = layouts.screen.width / 4; - const progress = add(current, next ? next : 0); + const progress = add(current.progress, next ? next.progress : 0); return { leftButtonStyle: { @@ -92,9 +93,10 @@ export function forUIKit({ * Simple fade animation for the header elements. */ export function forFade({ - progress: { current, next }, + current, + next, }: HeaderInterpolationProps): HeaderInterpolatedStyle { - const progress = add(current, next ? next : 0); + const progress = add(current.progress, next ? next.progress : 0); const opacity = interpolate(progress, { inputRange: [0, 1, 2], outputRange: [0, 1, 0], @@ -112,10 +114,11 @@ export function forFade({ * Simple translate animation to translate the header along with the sliding screen. */ export function forStatic({ - progress: { current, next }, + current, + next, layouts: { screen }, }: HeaderInterpolationProps): HeaderInterpolatedStyle { - const progress = add(current, next ? next : 0); + const progress = add(current.progress, next ? next.progress : 0); const translateX = interpolate(progress, { inputRange: [0, 1, 2], outputRange: I18nManager.isRTL diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx index e0564e22..cf670f16 100644 --- a/packages/stack/src/types.tsx +++ b/packages/stack/src/types.tsx @@ -409,24 +409,29 @@ export type TransitionSpec = | { animation: 'timing'; config: TimingConfig }; export type CardInterpolationProps = { + /** + * Values for the current screen. + */ + current: { + /** + * Animated node representing the progress value of the current screen. + */ + progress: Animated.Node; + }; + /** + * Values for the current screen the screen after this one in the stack. + * This can be `undefined` in case the screen animating is the last one. + */ + next?: { + /** + * Animated node representing the progress value of the next screen. + */ + progress: Animated.Node; + }; /** * The index of the card in the stack. */ index: number; - /** - * Animated nodes representing the progress of the animation. - */ - progress: { - /** - * Progress value of the current screen. - */ - current: Animated.Node; - /** - * Progress value for the screen after this one in the stack. - * This can be `undefined` in case the screen animating is the last one. - */ - next?: Animated.Node; - }; /** * Animated node representing whether the card is closing. */ @@ -467,18 +472,23 @@ export type CardStyleInterpolator = ( export type HeaderInterpolationProps = { /** - * Animated nodes representing the progress of the animation. + * Values for the current screen (the screen which owns this header). */ - progress: { + current: { /** - * Progress value of the current screen (the screen which owns this header). + * Animated node representing the progress value of the current screen. */ - current: Animated.Node; + progress: Animated.Node; + }; + /** + * Values for the current screen the screen after this one in the stack. + * This can be `undefined` in case the screen animating is the last one. + */ + next?: { /** - * Progress value for the screen after this one in the stack. - * This can be `undefined` in case the screen animating is the last one. + * Animated node representing the progress value of the next screen. */ - next?: Animated.Node; + progress: Animated.Node; }; /** * Layout measurements for various items we use for animation. diff --git a/packages/stack/src/views/Header/HeaderSegment.tsx b/packages/stack/src/views/Header/HeaderSegment.tsx index 02df692e..676c30a4 100644 --- a/packages/stack/src/views/Header/HeaderSegment.tsx +++ b/packages/stack/src/views/Header/HeaderSegment.tsx @@ -121,10 +121,8 @@ export default class HeaderSegment extends React.Component { leftLabelLayout: Layout | undefined ) => styleInterpolator({ - progress: { - current, - next, - }, + current: { progress: current }, + next: next && { progress: next }, layouts: { screen: layout, title: titleLayout, diff --git a/packages/stack/src/views/Stack/Card.tsx b/packages/stack/src/views/Stack/Card.tsx index 4970cb90..82594e8b 100755 --- a/packages/stack/src/views/Stack/Card.tsx +++ b/packages/stack/src/views/Stack/Card.tsx @@ -517,10 +517,8 @@ export default class Card extends React.Component { ) => styleInterpolator({ index, - progress: { - current, - next, - }, + current: { progress: current }, + next: next && { progress: next }, closing: this.isClosing, layouts: { screen: layout,