{"id":4084,"url":"https://github.com/cesardeazevedo/react-native-collapsing-toolbar","last_synced_at":"2025-04-05T15:10:13.560Z","repository":{"id":21894111,"uuid":"92913992","full_name":"cesardeazevedo/react-native-collapsing-toolbar","owner":"cesardeazevedo","description":"react-native wrapper for android CollapsingToolbarLayout","archived":false,"fork":false,"pushed_at":"2022-12-08T18:52:21.000Z","size":2135,"stargazers_count":296,"open_issues_count":30,"forks_count":33,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-29T14:11:23.032Z","etag":null,"topics":["android","appbar","collapsing","collapsingtoolbarlayout","coordinatorlayout","parallax","react-native"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cesardeazevedo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-31T06:46:48.000Z","updated_at":"2025-01-01T13:04:46.000Z","dependencies_parsed_at":"2022-09-11T05:54:16.719Z","dependency_job_id":null,"html_url":"https://github.com/cesardeazevedo/react-native-collapsing-toolbar","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesardeazevedo%2Freact-native-collapsing-toolbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesardeazevedo%2Freact-native-collapsing-toolbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesardeazevedo%2Freact-native-collapsing-toolbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesardeazevedo%2Freact-native-collapsing-toolbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cesardeazevedo","download_url":"https://codeload.github.com/cesardeazevedo/react-native-collapsing-toolbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353749,"owners_count":20925329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","appbar","collapsing","collapsingtoolbarlayout","coordinatorlayout","parallax","react-native"],"created_at":"2024-01-05T20:17:00.578Z","updated_at":"2025-04-05T15:10:13.535Z","avatar_url":"https://github.com/cesardeazevedo.png","language":"Java","funding_links":[],"categories":["Components","\u003ca name=\"UI:-Native-Modules\"\u003eUI: Native Modules\u003c/a\u003e","Java","Others"],"sub_categories":["UI"],"readme":"# react-native-collapsing-toolbar\n\nreact-native wrapper for [CollapsingToolbarLayout](https://developer.android.com/reference/android/support/design/widget/CollapsingToolbarLayout.html),\neasy to integrate with Animated.Event and FlatList out the box.\n\n![collapsing-github](https://cloud.githubusercontent.com/assets/5366959/26673566/b68a1a1e-4693-11e7-9a7b-41227dde0ff3.gif)\n\n[See the example](https://github.com/cesardeazevedo/react-native-collapsing-toolbar/blob/master/example/index.android.js)\n\n## Getting started\n\nMake sure to install both `react-native-collapsing-toolbar` and `react-native-nested-scroll-view`.\n\n`$ npm install react-native-nested-scroll-view --save`\n`$ npm install react-native-collapsing-toolbar --save`\n\n### Installation\n\nMainActivity.java\n\n```diff\n\n+   import com.rnnestedscrollview.RNNestedScrollViewPackage;\n+   import com.rncollapsingtoolbar.RNCollapsingToolbarPackage;\n\n    public class MainApplication extends Application implements ReactApplication {\n\n      @Override\n      protected List\u003cReactPackage\u003e getPackages() {\n        return Arrays.\u003cReactPackage\u003easList(\n            new MainReactPackage(),\n+           new RNCollapsingToolbarPackage(),\n+           new RNNestedScrollViewPackage()\n        );\n      }\n    }\n\n```\n\nandroid/app/build.gradle\n\n\n```diff\n    dependencies {\n        implementation fileTree(dir: \"libs\", include: [\"*.jar\"])\n        implementation \"com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}\"\n        implementation \"com.facebook.react:react-native:+\"  // From node_modules\n+       implementation project(':react-native-collapsing-toolbar')\n+       implementation project(':react-native-nested-scroll-view')\n    }\n\n```\n\nandroid/settings.gradle\n\n```diff\n\ninclude ':app'\n\n+   include ':react-native-nested-scroll-view'\n+   project(':react-native-nested-scroll-view').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-nested-scroll-view/android')\n\n+   include ':react-native-collapsing-toolbar'\n+   project(':react-native-collapsing-toolbar').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-collapsing-toolbar/android')\n\n\n```\n\n# Usage\n\nThis package depends of [react-native-nested-scroll-view](https://github.com/cesardeazevedo/react-native-nested-scroll-view).\n\n**Note** This component is very easy to break, you should follows this exact component order to make it work.\n\n```jsx\n\nimport {\n  AppBarLayout,\n  CoordinatorLayout,\n  CollapsingToolbarLayout,\n  CollapsingParallax,\n} from 'react-native-collapsing-toolbar'\n\nimport NestedScrollView from 'react-native-nested-scroll-view'\n\n\nrender() {\n  const HEADER_HEIGHT = 300\n  return (\n    \u003cCoordinatorLayout\u003e\n      \u003cAppBarLayout style={{height: HEADER_HEIGHT, backgroundColor: '#000'}}\u003e\n        \u003cCollapsingToolbarLayout\n          title='Collapsing Toolbar'\n          contentScrimColor='#673AB7'\n          expandedTitleColor='#ffffff'\n          expandedTitleGravity='BOTTOM'\n          scrimAnimationDuration={500}\n          expandedTitleMarginStart={22}\n          expandedTitleMarginBottom={22}\n          scrollFlags={\n              AppBarLayout.SCROLL_FLAG_SCROLL\n            | AppBarLayout.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED\n            | AppBarLayout.SCROLL_FLAG_SNAP\n          }\u003e\n          \u003cCollapsingParallax parallaxMultiplier={0.6}\u003e\n            \u003cView collapsable={false} style={{height: HEADER_HEIGHT, justifyContent: 'center' }}\u003e\n              \u003cText\u003eSome Custom Text Inside the Parallax\u003c/Text\u003e\n            \u003c/View\u003e\n          \u003c/CollapsingParallax\u003e\n          \u003cToolbarAndroid actions={[{title: 'Settings'}]} /\u003e\n        \u003c/CollapsingToolbarLayout\u003e\n      \u003c/AppBarLayout\u003e\n      \u003cNestedScrollView\u003e\n      // Main Content\n      \u003c/NestedScrollView\u003e\n    \u003c/CoordinatorLayout\u003e\n  )\n}\n\n\n```\n\n## Usage with FlatList\n\nTo work with FlatList, you should just pass the `renderScrollComponent` props and render a NestedScrollView instead of the ScrollView.\n\n**NOTE:** RefreshControl is **NOT** supported yet.\n\n```jsx\nrenderScroll(props) {\n  return (\n    \u003cNestedScrollView {...props} /\u003e\n  )\n}\n\nrender() {\n  return (\n    \u003cCoordinatorLayout\u003e\n      \u003cAppBarLayout\u003e\n      ....\n      \u003c/AppBarLayout\u003e\n      \u003cFlatList\n        data={data}\n        renderItem={this.renderItem}\n        renderScrollComponent={this.renderScroll}\n      /\u003e\n    \u003c/CoordinatorLayout\u003e\n  )\n}\n```\n\n## Usage with Animated.Events\n\nIn 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.\n\n```jsx\n\nstate = {\n  scrollY: new Animated.Value(0),\n};\n\nhandleOffsetChanged = (e) =\u003e {\n  Animated.event(\n    [{ nativeEvent: { offset: this.state.scrollY }}]\n  )(e, this.state)\n}\n\nrender() {\n  const rotateZ = this.state.scrollY.interpolate({\n    inputRange:  [0, 100],\n    outputRange: [\"0deg\", \"-50deg\"],\n  })\n  return (\n    \u003cCoordinatorLayout\u003e\n      \u003cAppBarLayout onOffsetChanged={this.handleOffsetChanged}\u003e\n        \u003cCollapsingToolbarLayout\u003e\n          \u003cAnimated.Image\n            source={require('./image.png')}\n            style={{ transform: [{ rotateZ }] }}\n          /\u003e\n          \u003cToolbarAndroid /\u003e\n        \u003c/CollapsingToolbarLayout\u003e\n      \u003c/AppBarLayout\u003e\n      \u003cNestedScrollView\u003e\n      \u003c/NestedScrollView\u003e\n    \u003c/CoordinatorLayout\u003e\n  )\n}\n\n```\n\n# API\n\nAppBarLayout properties\n\n| Prop                      | Description\n|---------------------------|------------\n| onOffsetChanged           | The actual scroll event when de toolbar is collasping\n\nAppBarLayout Methods\n\n| Method  | Description\n|---------|------------\n| show    | Expands the toolbar\n| hide    | Collapses the toolbar\n| redraw  | Redraw the toolbar (invokes requestLayout)\n\nCollapsingToolbarLayout properties\n\n| Prop                      | Description\n|---------------------------|------------\n| title                     | Title of the Toolbar\n| titleEnable               | If false, it will show the title of the ToolbarAndroid Component\n| height                    | Height when the component is expanded, could be set on the style prop\n| scrimVisibleHeightTrigger | The trigger value when the animation transition should started\n| scrimAnimationDuration    | The duration of the animation transition\n| contentScrimColor         | The color of the Toolbar to show when the view is collapsing\n| collapsedTitleTextColor   | The color of the title when the view is collapsed.\n| collapsedTitleGravity     | The alignment of the title when collpased, can be \"CENTER\", \"CENTER_VERTICAL\", \"TOP\", \"LEFT\", \"RIGHT\", \"BOTTOM\", \"START\" or \"END\"\n| collapsedTitleTypeface    | Name of the font when the title is collapsed.\n| statusBarScrimColor       | The color to use for the status bar scrim, Only works on Lollipop with the correct setup\n| expandedTitleColor        | The color of the title when the view is expanded\n| expandedTitleMargin       | Object with start, top, end, bottom margins\n| expandedTitleMarginStart  | The left margin when title is expanded\n| expandedTitleMarginTop    | The top margin when title is expanded\n| expandedTitleMarginEnd    | The right margin when title is expanded\n| expandedTitleMarginBottom | The bottom margin when title is expanded\n| expandedTitleGravity      | The alignment of the title when expanded, can be \"CENTER\", \"CENTER_VERTICAL\", \"TOP\", \"LEFT\", \"RIGHT\", \"BOTTOM\", \"START\" or \"END\"\n| expandedTitleTypeface     | Name of the font when the title is expanded\n| 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\n\nCollapsingParallax props\n\n| Prop               | Description\n|--------------------|------------\n| parallaxMultiplier | The multiplier amount of parallax, a value higher than 1, the content will move against the scroll.\n\n# License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcesardeazevedo%2Freact-native-collapsing-toolbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcesardeazevedo%2Freact-native-collapsing-toolbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcesardeazevedo%2Freact-native-collapsing-toolbar/lists"}