I have previously used regular Stack navigator from @react-navigation/stack, i've decided to migrate to Native Stack from @react-navigation/native-stack, but cardStyleInterpolator doesn't exist as an option in Native Stacks, which i've used for animating background colour opacity with screen transition progress:
const forVertical = ({
current,
inverted,
layouts: { screen },
}: StackCardInterpolationProps) => {
const translateY = multiply(
current.progress.interpolate({
inputRange: [0, 1],
outputRange: [screen.height, 0],
extrapolate: 'clamp',
}),
inverted,
);
const overlayOpacity = current.progress.interpolate({
inputRange: [0, 1, 2],
outputRange: [0, 0.85, 0.85],
});
return {
cardStyle: {
transform: [
{
translateY,
},
],
},
overlayStyle: {
opacity: overlayOpacity,
},
};
};
which i've used as cardStyleInterpolator
I've found a workaround for the slide from bottom animation using
presentation: 'transparentModal',
animation: 'slide_from_bottom',
Which results in a correct behaviour for modal presenting
What's left is just animating the background opacity, that's what i'm struggling with.
Is this possible somehow using Native Stack only without using cardStyleInterpolator?
here's Snack with example of what i've had and what i'm trying to achieve: https://snack.expo.dev/@oleksii_shevchenko/calm-orange-nachos