React Native: Animate shrinking header with tabs

Question

Goal

Im trying to create a view with an animated shrinking header with a tabview that contains tabs with scrolling content. See Image.

Setup

I\'m us

Answer 1

You could achieve this by controlling the animated scroll actions yourself using the RN-Animated component. This isn't exactly what you asked for but it can easily be played with to get the right results and you really only need to use the renderScrollComponent method of any list view to capture this same thing... so... Here's some code:

The Code

constructor(props) {
    super(props);

    this.headerHeight = 150;

    this.state = {
        scrollY: new Animated.Value(0),
    };
}

render() {
    return (
        

            { this.renderScrollView() }
            { this.renderListHeader() }

        
    );
}


renderListHeader() {
    return (
        

            
                I am a test! 
            
        
    );
}


renderScrollView() {
    return (
        

            

                
                    Look ma! No Hands!
                
            
        
    );
}


const styles = StyleSheet.create({
    container: {
        position: 'relative',
        backgroundColor: 'transparent',
    },
    headerContainer: {
        position: 'absolute',
        top: 0, left: 0,
        overflow: 'hidden',
        backgroundColor: 'green',
   },
   innerScrollContainer: {
        position: 'relative',
        backgroundColor: 'white',
   },
   innerContainerText: { color: 'black' },
   testingText: { color: 'black' },
});

I'm sure you get the idea of what this code is trying to do... but just incase heres a breakdown.

Code Breakdown

I use the this.props.display.width / height props to send down the system level width/height of the current device screen width / height, but if you prefer flex use that instead.

You don't necessarily need a hardcoded or static header size, just a central place (i.e. class level or JS module level) to use it in your class code.

Lastly, just because I interpolated the scroll data to the height of the box, doesn't mean you have to. In the example you show it looks more like you would want to translate the box upward instead of shrinking it's height.