{"id":3987,"url":"https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior","last_synced_at":"2025-05-15T15:06:08.479Z","repository":{"id":10458256,"uuid":"65538086","full_name":"cesardeazevedo/react-native-bottom-sheet-behavior","owner":"cesardeazevedo","description":"react-native wrapper for android BottomSheetBehavior","archived":false,"fork":false,"pushed_at":"2023-01-03T18:21:35.000Z","size":3721,"stargazers_count":1157,"open_issues_count":32,"forks_count":114,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-04-07T22:03:39.494Z","etag":null,"topics":["android","bottomsheet","bottomsheetbehavior","floatingactionbutton","google-maps","nestedscrollview","react-native"],"latest_commit_sha":null,"homepage":null,"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":"2016-08-12T08:43:45.000Z","updated_at":"2025-02-13T12:10:32.000Z","dependencies_parsed_at":"2023-01-13T16:24:28.652Z","dependency_job_id":null,"html_url":"https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesardeazevedo%2Freact-native-bottom-sheet-behavior","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesardeazevedo%2Freact-native-bottom-sheet-behavior/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesardeazevedo%2Freact-native-bottom-sheet-behavior/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesardeazevedo%2Freact-native-bottom-sheet-behavior/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cesardeazevedo","download_url":"https://codeload.github.com/cesardeazevedo/react-native-bottom-sheet-behavior/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253441607,"owners_count":21909191,"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","bottomsheet","bottomsheetbehavior","floatingactionbutton","google-maps","nestedscrollview","react-native"],"created_at":"2024-01-05T20:16:57.724Z","updated_at":"2025-05-15T15:06:08.434Z","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-bottom-sheet-behavior\nreact-native wrapper for android [BottomSheetBehavior](https://developer.android.com/reference/android/support/design/widget/BottomSheetBehavior.html), supports [FloatingActionButton](https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html).\n\n[![npm version](https://badge.fury.io/js/react-native-bottom-sheet-behavior.svg)](https://badge.fury.io/js/react-native-bottom-sheet-behavior)\n\n## Demo\n\n![react-native-bottom-sheet-behavior](https://cloud.githubusercontent.com/assets/5366959/24594266/c59667bc-1801-11e7-840c-97588658a8ae.gif)\n\n[See the Google Maps gif implementation](https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/views/GoogleMapsView.js)\n\n## v1.0.0\n\nThis major release v1.0.0 supports anchor state, which means that you can have a middle state between collapsed and expanded.\n\nThis version now uses a custom BottomSheetBehavior implementation from\n[miguelhincapie/CustomBottomSheetBehavior](https://github.com/miguelhincapie/CustomBottomSheetBehavior)\nwhich is basically a fork from the original design-support, but with anchor state support and colors management,\neven though is custom implementation, old version should work as before, and you can also disable the\nanchor state with `anchorEnabled` prop which is disabled by default.\n\n## Components\n\nThe following components are included in this package:\n\n* CoordinatorLayout\n* BottomSheetBehavior\n* FloatingActionButton\n* MergedAppBarLayout\n* ScrollingAppBarLayout\n* BackdropBottomSheet\n* BottomSheetHeader\n\n**NOTE** We expose some android core components such as `CoordinatorLayout`, `AppBarLayout`, `FloatingActionButton`,\nbut they are NOT meant to be general purposed, and it may not work out of the context of this library,\nso use at your own risk.\n\n### iOS Alternative\n\nIf you are wondering some iOS alternative, i highly recommend [react-native-interactable](https://github.com/wix/react-native-interactable) by [wix](https://github.com/wix),\nyou can see their google maps approach [here](https://github.com/wix/react-native-interactable/blob/master/playground/src/real-life-examples/MapPanel.js),\nwhich is very easy to get started.\n\n## Install\n\n`$ npm install react-native-bottom-sheet-behavior`\n\n### Install with RNPM\n\n`$ react-native link react-native-bottom-sheet-behavior`\n\n### Install Manually\n\nEdit the current files as follows.\n\nandroid/settings.gradle\n\n```diff\n\ninclude ':app'\n\n+   include ':react-native-bottom-sheet-behavior'\n+   project(':react-native-bottom-sheet-behavior').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-bottom-sheet-behavior/android')\n\n```\n\nandroid/app/build.gradle\n\n\n```diff\n\n    dependencies {\n        implementation fileTree(dir: \"libs\", include: [\"*.jar\"])\n        implementation \"com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}\"\n+       implementation \"com.android.support:design:${rootProject.ext.supportLibVersion}\"\n        implementation \"com.facebook.react:react-native:+\"  // From node_modules\n+       implementation project(':react-native-bottom-sheet-behavior')\n    }\n\n```\n\n\nMainApplication.java\n\n```diff\n\n+   import com.bottomsheetbehavior.BottomSheetBehaviorPackage;\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 BottomSheetBehaviorPackage()\n        );\n      }\n    }\n\n```\n\n## Usage\n\nYou will need to wrap your view into a `CoordinatorLayout` to make it work.\n\n```jsx\n\n    render() {\n      return (\n          \u003cCoordinatorLayout style={{flex: 1}}\u003e\n            \u003cView style={{ flex: 1, backgroundColor: 'transparent' }}\u003e\u003c/View\u003e\n            \u003cBottomSheetBehavior\n              ref='bottomSheet'\n              peekHeight={70}\n              hideable={false}\n              state={BottomSheetBehavior.STATE_COLLAPSED}\u003e\n              \u003cView style={{backgroundColor: '#4389f2'}}\u003e\n                \u003cView style={{padding: 26}}\u003e\n                  \u003cText\u003eBottomSheetBehavior!\u003c/Text\u003e\n                \u003c/View\u003e\n                \u003cView style={{height: 200, backgroundColor: '#fff'}} /\u003e\n              \u003c/View\u003e\n            \u003c/BottomSheetBehavior\u003e\n            \u003cFloatingActionButton autoAnchor ref=\"fab\" /\u003e\n          \u003c/CoordinatorLayout\u003e\n      )\n    }\n\n```\n\n\u003e *NOTE*\n\u003e Make sure that your view has a `backgroundColor` style to prevent some \"bugs\" when rendering the container.\n\n### Components Order\n\nYou should follow this component order.\n\n```jsx\n\nrender() {\n  return (\n    \u003cCoordinatorLayout\u003e\n      \u003cScrollingAppBarLayout\u003e\n        \u003cToolbarAndroid /\u003e\n      \u003c/ScrollingAppBarLayout\u003e\n      \u003cView\u003eMain Content\u003c/View\u003e\n      \u003cBackdropBottomSheet /\u003e\n      \u003cBottomSheetBehavior /\u003e\n      \u003cMergedAppBarLayout\n        \u003cToolbarAndroid /\u003e\n      \u003c/MergedAppBarLayout\u003e\n      \u003cFloatingActionButton /\u003e\n    \u003c/CoordinatorLayout\u003e\n  )\n}\n\n```\n\n### Events\n\nIn order to get the current bottom sheet state or offset, you can listen to `onStateChange` or `onSlide` respectively.\n\n```jsx\n  \u003cBottomSheetBehavior\n    onSlide={(e) =\u003e console.log(e.nativeEvent.offset)}\n    onStateChange={(e) =\u003e console.log(e.nativeEvent.state)}\n  /\u003e\n```\n\n## AppBarLayouts\n\nWe provide some custom AppBars that has custom behaviors, they automatically connects with BottomSheetBehavior\nin order to connects with `ToolbarAndroid` and toggle visibility, both AppBars can also manager StatusBar backgrounds.\n\nCurrently, AppBars only supports `ToolbarAndroid` as a child, you may have some troubles trying to render a custom View.\n\n#### ScrollingAppBarLayout\n\nThis behavior hides and sets the StatusBar background to transparent when you starting dragging the BottomSheet,\nand reappears when the BottomSheet backs to the collapsed state, setting back the StatusBar background color\nwith `statusBarColor` prop.\n\n![scrollingappbar](https://cloud.githubusercontent.com/assets/5366959/24859715/2360e3f6-1dc8-11e7-9bb4-090d7dfb25f4.gif)\n\n#### MergedAppBarLayout\n\nThe MergedAppBarLayout behavior appears when the BottomSheet reaches the anchor state (or expanded state if you're not using anchorEnabled).\nWhen the BottomSheet is getting over the MergedAppBar, it will partially sets the height of ToolbarAndroid revealing the\n`mergedColor` prop, and when the BottomSheet is fully expanded, it sets the ToolbarAndroid with the `toolbarColor` prop.\n\n```jsx\n\u003cMergedAppBarLayout\n  translucent={true}\n  barStyle='light-content'\n  barStyleTransparent='dark-content'\n  mergedColor='#1abc9c'\n  toolbarColor='#34495e'\n  statusBarColor='#2c3e50'\u003e\n  \u003cToolbarAndroid\n    navIconName=\"md-arrow-back\"\n    overflowIconName='md-more'\n    title='React Native Bar!'\n    titleColor='#fff'\n  /\u003e\n\u003c/MergedAppBarLayout\u003e\n```\n\n![mergedappbar](https://cloud.githubusercontent.com/assets/5366959/24858662/9dad8eac-1dc3-11e7-92c9-c36ce673d6f8.gif)\n\n![merged_color](https://cloud.githubusercontent.com/assets/5366959/24860941/41381750-1dcd-11e7-8128-a6dd422e9a19.jpg)\n\n### Translucent App Bars\n\nBoth AppBars supports translucent status bar, you can enable with `translucent` prop, which will basically adds top margins and **NOT** change the translucent itself, you should handle the translucent directely on the react-native StatusBar component.\n\n## FloatingActionButton\n\nIf you are using FloatingActionButton, the `autoAnchor` prop will automatically connect to BottomSheetBehavior,\nin order to follow when it's dragging.\n\n```jsx\n\u003cFloatingActionButton autoAnchor /\u003e\n```\n\nYou still can do it manually though, by doing this.\n\n```js\n  componentDidMount() {\n    this.refs.fab.setAnchorId(this.refs.bottomSheet)\n  }\n```\n\nFloatingActionButton's has a custom behavior that hides when closely reaches MergedAppBarLayout.\n\n### Support for react-native-vector-icons\n\nYou can also use [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)\non FloatingActionButton, which will automatically load the icon for you.\n\n```jsx\n  import Icon from 'react-native-vector-icons/Ionicons'\n\n  ...\n\n  render() {\n    return (\n      \u003cFloatingActionButton icon={\"directions\"} iconProvider={Icon} /\u003e\n    )\n  }\n```\n\nYou can check [GoogleMapsView.js](https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/views/GoogleMapsView.js) example.\n\n## BackdropBottomSheet\n\nThis component is rendered behind the BottomSheetBehavior, and behave like a parallax when BottomSheet is dragging.\nyou should pass a fixed `height` prop that may match with `anchorPoint` prop from BottomSheet, in order to achieve a full screen view\nwhen reaches the anchor state.\n\n## BottomSheetHeader\n\nThis component abstracts color management between BottomSheet states on the native side,\nit will find all \u003cText /\u003e and \u003cIcon /\u003e components recursively and handles everything out the box.\n\n## NestedScrollView\n\nIf you are not using the anchor point, and want to add some nested scroll, you will need to install the [react-native-nested-scroll-view](https://github.com/cesardeazevedo/react-native-nested-scroll-view)\nto allows you to scroll inside bottom sheet continuously.\n\n**Note** the `react-native-nested-scroll-view` is only useful when you are **NOT** using the anchorPoint.\n\n![react-native](http://i.imgur.com/EaXBCa0.gif)\n\n[NestedScrollView.js](https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/views/NestedScrollView.js) example\n\n## API\n\nBottomSheetBehavior properties\n\n| Prop          | Description                                                                    | Default Value       |\n|---------------|--------------------------------------------------------------------------------|---------------------|\n| state         | The state of the bottom sheet                                                  | 4 (STATE_COLLAPSED) |\n| peekHeight    | Peek Height value in DP                                                        | 50                  |\n| hideable      | Allow hide the bottom sheet                                                    | false               |\n| anchorEnabled | Enabled anchor point                                                           | false               |\n| anchorPoint   | Anchor point where the bottom sheet should stay between collapsed and expanded | 300                 |\n| elevation     | Elevation shadow                                                               | 0                   |\n| onStateChange | Callback when bottom sheet state changed                                       |                     |\n| onSlide       | Callback continuously called while the user is dragging the bottom sheet       |                     |\n\nBottomSheetBehavior States\n\n| State | Description        |\n|-------|--------------------|\n| 1     | STATE_DRAGGING     |\n| 2     | STATE_SETTLING     |\n| 3     | STATE_EXPANDED     |\n| 4     | STATE_COLLAPSED    |\n| 5     | STATE_HIDDEN       |\n| 6     | STATE_ANCHOR_POINT |\n\n##### BottomSheetBehavior actions\n\n| Method              | Description                 |\n| --------------------|-----------------------------|\n| setBottomSheetState | Sets the bottom sheet state |\n\n##### FloatingActionButton properties\n\n| Prop                    | Description                                         | Default Value |\n| ------------------------|-----------------------------------------------------|---------------|\n| src                     | Drawable file under the drawable android folder     |               |\n| autoAnchor              | Attachs the button on bottom sheet automatically    | false         |\n| icon                    | react-native-vector-icons name                      |               |\n| iconProvider            | Icon package provided by react-native-vector-icons  |               |\n| iconColor               | Icon color                                          |               |\n| iconColorExpanded       | Icon expanded color when used by BottomSheetHeader  |               |\n| backgroundColor         | Background color                                    |               |\n| backgroundColorExpanded | Background expanded color used by BottomSheetHeader |               |\n| hidden                  | Hides FloatingActionButton                          | false         |\n| rippleEffect            | Enable rippleEffect                                 | true          |\n| rippleColor             | Ripple color                                        |               |\n| elevation               | Elevation shadow                                    | 18            |\n| onPress                 | Callback called when touch is released              |               |\n\n##### FloatingActionButton actions\n\n| Method        | Description  |\n| --------------|--------------------------------------------------------------------------------|\n| [show](https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html#show) | This method will animate the button show if the view has already been laid out |\n| [hide](https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html#hide()) | This method will animate the button hide if the view has already been laid out |\n| setAnchorId | Attachs the button on bottom sheet by passing it as a argument (no needed if autoAnchor is set true) |\n\n##### ScrollingAppBarLayout properties\n\n| Prop           | Description                        |\n|----------------|------------------------------------|\n| height         | Height of ScrollingAppBarLayout    |\n| statusBarColor | Active status bar color            |\n| translucent    | Adds top margins on the AppBar to not draw behind the status bar |\n| barStyle       | Status Bar style, (default, light-content, dark-content), used when the ScrollingAppBarLayout is present |\n| barStyleTransparent | Status Bar style, (default, light-content, dark-content), used when the ScrollingAppBarLayout is not present and the StatusBar is transparent |\n\n##### MergedAppBarLayout properties\n\n| Prop           | Description                                                            |\n|----------------|------------------------------------------------------------------------|\n| height         | Height of ScrollingAppBarLayout                                        |\n| mergedColor    | Merged color when the bottom sheet is overlaying with ToolbarAndroid   |\n| toolbarColor   | The final ToolbarAndroid color when the bottom sheet is fully expanded |\n| statusBarColor | Active status bar color when bottom sheet is expanded                  |\n| translucent    | Adds top margins on the AppBar to not draw behind the status bar       |\n| barStyle       | Status Bar style, (default, light-content, dark-content), used when the BottomSheet is fully expanded |\n| barStyleTransparent | Status Bar style, (default, light-content, dark-content), used when the AppBar is transparent |\n\n##### BottomSheetHeader properties\n\n| Prop                    | Description                                   |\n|-------------------------|-----------------------------------------------|\n| textColorExpanded       | The state of the bottom sheet                 |\n| backgroundColor         | Background color when collased                |\n| backgroundColorExpanded | Background color when anchored or expanded    |\n| onPress                 | Callback called when header touch is released |\n\n# License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcesardeazevedo%2Freact-native-bottom-sheet-behavior","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcesardeazevedo%2Freact-native-bottom-sheet-behavior","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcesardeazevedo%2Freact-native-bottom-sheet-behavior/lists"}