diff --git a/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx b/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx index b4f39b86..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], }) @@ -156,27 +158,28 @@ export function forFadeFromBottomAndroid({ } /** - * Standard Android-style wipe from the bottom for Android Pie. + * 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 ac8dac23..c8ff6745 100644 --- a/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx +++ b/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx @@ -4,8 +4,12 @@ import { HeaderInterpolationProps, HeaderInterpolatedStyle } from '../types'; 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; @@ -27,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: { @@ -85,10 +89,14 @@ 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], @@ -102,11 +110,15 @@ 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 1792c714..08e58bae 100644 --- a/packages/stack/src/types.tsx +++ b/packages/stack/src/types.tsx @@ -181,11 +181,13 @@ export type TransitionSpec = | { animation: 'timing'; config: TimingConfig }; export type CardInterpolationProps = { - index: number; - progress: { - current: Animated.Node; - next?: Animated.Node; + current: { + progress: Animated.Node; }; + next?: { + progress: Animated.Node; + }; + index: number; closing: Animated.Node<0 | 1>; layouts: { screen: Layout; @@ -204,9 +206,11 @@ export type CardStyleInterpolator = ( ) => CardInterpolatedStyle; export type HeaderInterpolationProps = { - progress: { - current: Animated.Node; - next?: Animated.Node; + current: { + progress: Animated.Node; + }; + next?: { + progress: Animated.Node; }; layouts: { screen: Layout; diff --git a/packages/stack/src/views/Header/HeaderSegment.tsx b/packages/stack/src/views/Header/HeaderSegment.tsx index 66203952..bb18cf70 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 8424d9c2..e300c4b0 100755 --- a/packages/stack/src/views/Stack/Card.tsx +++ b/packages/stack/src/views/Stack/Card.tsx @@ -529,10 +529,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,