How to achieve whats app animation where toolbar disappear when scroll down and tabs stick to top?
<p>I want to achieve something like whatsapp animation where toolbar is hidden during scroll down and show back when scroll up with the tab bar always sticking to the top so far i used Animated to set the toolbar height to 0 when scroll down and back to normal when scroll up but the problem is when the toolbar is hidden the scrollview height is changed to cover the area and that triggers the onscroll as well so i get that weird animation where toolbar keeps showing and hiding multiple times.</p>

<p><strong>Whats App Animation</strong></p>

<p><a href="https://i.stack.imgur.com/qxPLF.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qxPLF.gif" alt="enter image description here"></a></p>

<p>This is what I've tried so far</p>

<p><strong>Toolbar</strong></p>

<pre><code>&lt;Animated.View style={{height: this.state._showHeaderTitle}}&gt;
    &lt;ToolbarAndroid
        titleColor={'#FFF'}
        title={this.props.title}
        navIcon={images.arrowBack}
        onIconClicked={() =&gt; this._goBack()}
        onActionSelected={() =&gt; {}}
        actions={[{title: 'Search', icon: images.search, show: 'always'}]}
        style={[{backgroundColor: '#528eff', width: this.windowWidth, height: 48}]}/&gt;
&lt;/Animated.View&gt;
</code></pre>

<p><strong>ScrollView</strong></p>

<pre><code>&lt;ScrollView scrollEventThrottle={16}
    onScroll={(event) =&gt; this.detectScrollPosition(event)}
    style={{height: this.windowHeight - this.state.headerTitleCurrentHeight, flexDirection: 'column'}}&gt;
        &lt;View
            style={[styles.highNormalLowDocListBody]}&gt;
                &lt;ListView
                    dataSource={this.state.documents}
                    enableEmptySections={true}
                    renderRow={(rowData) =&gt; this._renderRow(rowData)}
                /&gt;
        &lt;/View&gt;
&lt;/ScrollView&gt;
</code></pre>

<p><strong>onScroll</strong></p>

<pre><code>detectScrollPosition(event) {
    var currentOffset = event.nativeEvent.contentOffset.y;
    var direction = currentOffset &gt; this.state.offset ? 'down' : 'up';

    this.setState({offset: currentOffset});

    console.log('Begin Scroll');

    if (direction === 'up') {
        Animated.spring(this.state._showHeaderTitle, {
            toValue: 48,
            velocity: 6
        }).start();
        this.setState({headerTitleCurrentHeight: 48});
    } else {
        Animated.spring(this.state._showHeaderTitle, {
            toValue: 0,
            velocity: 6
        }).start();
        this.setState({headerTitleCurrentHeight: 0});
    }
};
</code></pre>