Skip to content

cesardeazevedo/react-native-collapsing-toolbar

Repository files navigation

react-native-collapsing-toolbar

react-native wrapper for CollapsingToolbarLayout, easy to integrate with Animated.Event and FlatList out the box.

collapsing-github

See the example

Getting started

Make sure to install both react-native-collapsing-toolbar and react-native-nested-scroll-view.

$ npm install react-native-nested-scroll-view --save $ npm install react-native-collapsing-toolbar --save

Installation

MainActivity.java

+   import com.rnnestedscrollview.RNNestedScrollViewPackage;
+   import com.rncollapsingtoolbar.RNCollapsingToolbarPackage;

    public class MainApplication extends Application implements ReactApplication {

      @Override
      protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
+           new RNCollapsingToolbarPackage(),
+           new RNNestedScrollViewPackage()
        );
      }
    }

android/app/build.gradle

    dependencies {
        implementation fileTree(dir: "libs", include: ["*.jar"])
        implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
        implementation "com.facebook.react:react-native:+"  // From node_modules
+       implementation project(':react-native-collapsing-toolbar')
+       implementation project(':react-native-nested-scroll-view')
    }

android/settings.gradle

include ':app'

+   include ':react-native-nested-scroll-view'
+   project(':react-native-nested-scroll-view').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-nested-scroll-view/android')

+   include ':react-native-collapsing-toolbar'
+   project(':react-native-collapsing-toolbar').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-collapsing-toolbar/android')

Usage

This package depends of react-native-nested-scroll-view.

Note This component is very easy to break, you should follows this exact component order to make it work.

import {
  AppBarLayout,
  CoordinatorLayout,
  CollapsingToolbarLayout,
  CollapsingParallax,
} from 'react-native-collapsing-toolbar'

import NestedScrollView from 'react-native-nested-scroll-view'


render() {
  const HEADER_HEIGHT = 300
  return (
    <CoordinatorLayout>
      <AppBarLayout style={{height: HEADER_HEIGHT, backgroundColor: '#000'}}>
        <CollapsingToolbarLayout
          title='Collapsing Toolbar'
          contentScrimColor='#673AB7'
          expandedTitleColor='#ffffff'
          expandedTitleGravity='BOTTOM'
          scrimAnimationDuration={500}
          expandedTitleMarginStart={22}
          expandedTitleMarginBottom={22}
          scrollFlags={
              AppBarLayout.SCROLL_FLAG_SCROLL
            | AppBarLayout.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
            | AppBarLayout.SCROLL_FLAG_SNAP
          }>
          <CollapsingParallax parallaxMultiplier={0.6}>
            <View collapsable={false} style={{height: HEADER_HEIGHT, justifyContent: 'center' }}>
              <Text>Some Custom Text Inside the Parallax</Text>
            </View>
          </CollapsingParallax>
          <ToolbarAndroid actions={[{title: 'Settings'}]} />
        </CollapsingToolbarLayout>
      </AppBarLayout>
      <NestedScrollView>
      // Main Content
      </NestedScrollView>
    </CoordinatorLayout>
  )
}

Usage with FlatList

To work with FlatList, you should just pass the renderScrollComponent props and render a NestedScrollView instead of the ScrollView.

NOTE: RefreshControl is NOT supported yet.

renderScroll(props) {
  return (
    <NestedScrollView {...props} />
  )
}

render() {
  return (
    <CoordinatorLayout>
      <AppBarLayout>
      ....
      </AppBarLayout>
      <FlatList
        data={data}
        renderItem={this.renderItem}
        renderScrollComponent={this.renderScroll}
      />
    </CoordinatorLayout>
  )
}

Usage with Animated.Events

In order to do custom animations when collapsing, you should use onOffsetChanged prop on the AppBarLayout and not onScroll from the NestedScrollView, the onScroll won't fire until the CollapsingToolbarLayout is entire collapsed.

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

handleOffsetChanged = (e) => {
  Animated.event(
    [{ nativeEvent: { offset: this.state.scrollY }}]
  )(e, this.state)
}

render() {
  const rotateZ = this.state.scrollY.interpolate({
    inputRange:  [0, 100],
    outputRange: ["0deg", "-50deg"],
  })
  return (
    <CoordinatorLayout>
      <AppBarLayout onOffsetChanged={this.handleOffsetChanged}>
        <CollapsingToolbarLayout>
          <Animated.Image
            source={require('./image.png')}
            style={{ transform: [{ rotateZ }] }}
          />
          <ToolbarAndroid />
        </CollapsingToolbarLayout>
      </AppBarLayout>
      <NestedScrollView>
      </NestedScrollView>
    </CoordinatorLayout>
  )
}

API

AppBarLayout properties

Prop Description
onOffsetChanged The actual scroll event when de toolbar is collasping

AppBarLayout Methods

Method Description
show Expands the toolbar
hide Collapses the toolbar
redraw Redraw the toolbar (invokes requestLayout)

CollapsingToolbarLayout properties

Prop Description
title Title of the Toolbar
titleEnable If false, it will show the title of the ToolbarAndroid Component
height Height when the component is expanded, could be set on the style prop
scrimVisibleHeightTrigger The trigger value when the animation transition should started
scrimAnimationDuration The duration of the animation transition
contentScrimColor The color of the Toolbar to show when the view is collapsing
collapsedTitleTextColor The color of the title when the view is collapsed.
collapsedTitleGravity The alignment of the title when collpased, can be "CENTER", "CENTER_VERTICAL", "TOP", "LEFT", "RIGHT", "BOTTOM", "START" or "END"
collapsedTitleTypeface Name of the font when the title is collapsed.
statusBarScrimColor The color to use for the status bar scrim, Only works on Lollipop with the correct setup
expandedTitleColor The color of the title when the view is expanded
expandedTitleMargin Object with start, top, end, bottom margins
expandedTitleMarginStart The left margin when title is expanded
expandedTitleMarginTop The top margin when title is expanded
expandedTitleMarginEnd The right margin when title is expanded
expandedTitleMarginBottom The bottom margin when title is expanded
expandedTitleGravity The alignment of the title when expanded, can be "CENTER", "CENTER_VERTICAL", "TOP", "LEFT", "RIGHT", "BOTTOM", "START" or "END"
expandedTitleTypeface Name of the font when the title is expanded
scrollFlags Defines the scroll behavior, the values are defined statically on the AppBarLayout, can be SCROLL_FLAG_SNAP, SCROLL_FLAG_SCROLL, SCROLL_FLAG_ENTER_ALWAYS, SCROLL_FLAG_ENTER_ALWAYS, SCROLL_FLAG_EXIT_UNTIL_COLLAPSED, SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED

CollapsingParallax props

Prop Description
parallaxMultiplier The multiplier amount of parallax, a value higher than 1, the content will move against the scroll.

License

MIT