CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Eran Abir
Eran Abir

Reputation: 1097

React Navigation - Custom Header Animation

I am using React Navigation inside React Native App and i created a Custom Header Component for my routes

like this : 

const Router = StackNavigator({
 Main: {
     screen: Main,
     navigationOptions: ({navigation}) => ({
         header:<Header title="Main"/>
     })
   },
})

when using a custom header component the native animation not working i would like to know how can i achieve the animation in the header the same as here https://reactnavigation.org/

Upvotes: 4

Views: 10960

Answers (1)

user4064113
user4064113

Reputation:

TL:DR; found solution to share the animated.Value / interpolation over screens code below.

Animated Custom Header React-native + React navigation

This post was taunting me for some time - I was faced with the same issue. Hopefully this will reach you even if it's couple of months later :D

So first my issue was this, I made a component for custom header like in your example, my target was having one of the StackNavigator pages, have a scrollView which would in turn manipulate the color of the header.

Similar issue, the information exchange between header and page should help you too, here it goes.

Header.js 

export class HeaderBar extends Component {
componentWillMount(){
    // might be a bit, ehm but worked so if you have tips how to make the code nice feel free to share 
    let valueToManipulate= new Animated.Value(0);
    this.props.navigation.setParams({
        valueToManipulate,
        customkey: valueToManipulate.interpolate({
            inputRange: [0, 150],
            outputRange: ['rgba(0,0,0,0)', 'rgba(0,0,0,1)'],
            extrapolate: 'clamp',
        })
    })
}

render () {   

    ... bit of code ...
    // important bit for data binding ! 
    if( ! (this.props.navigation.state.params &&  this.props.navigation.state.params.customkey) ){
        return null;
    }
    /* unless that variable on params exists we do not ! render */ 

    ... bit more of code ... 

    <View style={ floating }>
            <Animated.View style={{backgroundColor: this.props.navigation.state.params.customkey  }}> /// <<--- typical bind 
                <View style={{flexDirection: 'row', justifyContent: "space-between"}}>

     ... and rest of render ...

So this is the header bit, now for the other "fun" part:

HomePage.js 

export default class HomePage extends Component<{}> {

     ... stufff..... :D 

     render() {

     /* this here, again data binding !, do not let render before we have this var in state params ! */ 
     if( !( this.props.navigation.state.params && this.props.navigation.state.params.valueToManipulate ) )
          return null;

     return (

        <ScrollView
            style={styles.container}
            onScroll={ Animated.event(
                [{ nativeEvent: { contentOffset: { y: this.props.navigation.state.params.valueToManipulate } } }], // <-- tadaaa
            )}
            bounces={false}
            scrollEventThrottle={1}
            showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false}
        >
      ... moar stuff ... 
    } 
}

And here ! Finally ! A Demo ! Animated Custom Header React-native + React navigation

Upvotes: 5

Related Questions