react-navigation header collapse animation with Expo

user_1870873 0
Viewed 984

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.

react-navigation-collapsible react-navigation expo react-native
2 Answers

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.

user_120624760

I made a gif of the repo you linked to, and the associated snack.

I had a similar need a while ago, and stumbled upon this: https://www.youtube.com/watch?v=xutPT1oZL2M

This video show a lot more complicated transition, but is similar to the way it's done in your Coinbase example:

  • Use your own Views to create this effect
  • Use (or not) an animation library to interpolate opacities of elements & positioning based on the Scrollview's current scroll position

All documentation I found at that time on ReactNavigation is about transitioning views / title or else while navigation is occurring. I understand that you don't want to avoid ReactNavigation on a particular screen just to make an animation.

Now, based on this, you might try to animate a custom component, passed in your Screen's navigationOptions, which would apply a transition (opacity or whatever) to its child component, based on a props passed with ReactNavigation state mechanism and its dispatch method.

Not tested pseudo code, to show the idea:

class ScreenWithAnimatedNavBar extends Component {

  static navigationOptions = ({navigation}) => ({
    headerTitle: <CustomNavbar shouldDisplayTitle={navigation.state.params.shouldDisplayTitle} title="Your title" />,
  })
  ...
  render() {
     <ScrollView onScroll={this.handleScroll}>
       ...
  }
  
  handleScroll (event) => {
    //Decide whether you should trigger the animation, based on event.nativeEvent.contentOffset.y and your threshold
    //Dispatch the animation in ReactNavigation's state if needed
    // https://reactnavigation.org/docs/navigation-actions/#setparams
    navigation.dispatch(CommonActions.setParams({ shouldDisplayTitle: true | false }));

  }

With a CustomNavbar triggering an animation based on shouldDisplayTitle props (not illustrated, as not relevant - see how it's done in the video or in Coinbase example).

If the animation doesn't rely on the scroll position value - I mean it'll trigger back and forth only at a certain threshold, not directly following user finger - you won't dispatch to often, and it shouldn't be to laggy. If it somehow is, then you should rely on non-blocking code for animation (see the linked video for an example), and / or shift on custom views to have total control.

user_14370160
Related