react-native wrapper for CollapsingToolbarLayout, easy to integrate with Animated.Event and FlatList out the box.
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
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')
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>
)
}
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>
)
}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>
)
}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. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent