CODEWITHSUNDEEP
react-native
Ibrahim Ahmed
Ibrahim Ahmed

Reputation: 2345

How to achieve whats app animation where toolbar disappear when scroll down and tabs stick to top?

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.

Whats App Animation

enter image description here

This is what I've tried so far

Toolbar

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

ScrollView

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

onScroll

detectScrollPosition(event) {
    var currentOffset = event.nativeEvent.contentOffset.y;
    var direction = currentOffset > 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});
    }
};

Upvotes: 4

Views: 2994

Answers (4)

giovanni
giovanni

Reputation: 388

I think react-native-animated-screen should do exactly what you need

Check it out

https://www.npmjs.com/package/react-native-animated-screen

enter image description here

Upvotes: 0

Ibrahim Ahmed
Ibrahim Ahmed

Reputation: 2345

Thanks all for your contribution your comments lead me to search for CoordinatorLayout and eventually i found this GitHub Repo which totally made my day it's in Chinese though for those who don't know Chinese like me google translate will be enough to get you going

GitHub: https://github.com/maolion/mao-rn-android-kit

Upvotes: 0

Nikhil Gupta
Nikhil Gupta

Reputation: 881

You can use CoordinatorLayout and CollapsingToolbarLayout for this purpose.

Below are some links you can refer :

https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html

http://antonioleiva.com/collapsing-toolbar-layout/

Upvotes: 1

quantum apps
quantum apps

Reputation: 938

that is a new android xml block from the design and support library.

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/tb_app_bar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:elevation="4dip"
                    app:layout_collapseMode="pin">

                </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

to use this you need to have the CoordinatorLayout and a NestedScrollView or recyclerview with a layout behavior

app:layout_behavior="@string/appbar_scrolling_view_behavior"

in the CollapsingToolbarLayout there is given how it must behave. now it is set to collapse and reappear when scrolled down.

Upvotes: 0

Related Questions