How does one implement expanding card animation/transition using react navigation (react-native)?

Question

What I want to achieve is an effect similar to react-native-card-modal But I also want to change the route. The react native card modal uses the same component in which you have grow() and shrink() functions. The problem and the reason I want to avoid this way of implementing this is that I will have two levels of going inside the card and I will also have deep linking and I need to use a good navigation like react navigation for that.

I will also need to go back. Looking for an elegant solution but feel free to share any tutorials to related transitions. Thanks!

Answer 1

You can achieve this with a custom transitioner in react-navigation. This blog post series has a great detailed explanation, with a few examples.

Edit: July 2022

The Transitioner has been removed in the latest react-navigation in favor of using Animated configurations directly in the navigator options under a property called cardStyleInterpolator.

Stolen shamelessly from the docs - to create a fade transition you would create an interpolator:

const forFade = ({ current }) => ({
  cardStyle: {
    opacity: current.progress,
  },
});

And then use it in the navigator's properties:

<Stack.Screen
  name="Profile"
  component={Profile}
  options={{ cardStyleInterpolator: forFade }}
/>

For more examples see the docs.