react-navigation header collapse animation with Expo

Question

I am investigating if the header in react-navigation can be animated similar to the most widely used social applications like Twitter, etc.

For this purpose recently, I encountered coinbase's example which is given here.

My questions are:

• In general, how the react-navigation header can be animated?
• Specifically, how to blend the Coinbase example with the react-navigation?

Similarly, I could not find any clean example for react-navigation usage with react-navigation-collapsible either.

So any atomic example code is appreciated.

Answer 1

https://reactnavigation.org/docs/stack-navigator/

const progress = Animated.add(scene.progress.current, scene.progress.next || 0);

const opacity = progress.interpolate({
  inputRange: [0, 1, 2],
  outputRange: [0, 1, 0],
});

return (
  <Animated.View style={{ opacity }}>{/* Header content */}</Animated.View>
);

From react-navigation documentation above code snippet should give a clue.