react-native-collapsing-toolbar
react-native wrapper for CollapsingToolbarLayout, easy to integrate with Animated.Event and FlatList out the box.
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' { const HEADER_HEIGHT = 300 return <CoordinatorLayout> <AppBarLayout => <CollapsingToolbarLayout ='Collapsing Toolbar' ='#673AB7' ='#ffffff' ='BOTTOM' = = = => <CollapsingParallax => <View = => <Text>Some Custom Text Inside the Parallax</Text> </View> </CollapsingParallax> <ToolbarAndroid = /> </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.
{ return <NestedScrollView /> } { return <CoordinatorLayout> <AppBarLayout> ... </AppBarLayout> <FlatList = = = /> </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: 0; { Animatede thisstate} { const rotateZ = thisstatescrollY return <CoordinatorLayout> <AppBarLayout => <CollapsingToolbarLayout> <Animated.Image = = /> <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. |