How to animate modal overlay (background opacity) in React native navigation using Native Stack?

66 Views Asked by At

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

0

There are 0 best solutions below