{"id":15037673,"url":"https://github.com/nysamnang/react-native-raw-bottom-sheet","last_synced_at":"2025-04-12T20:40:44.562Z","repository":{"id":34041402,"uuid":"166668951","full_name":"nysamnang/react-native-raw-bottom-sheet","owner":"nysamnang","description":"Add Your Own Component To Bottom Sheet Whatever You Want (Android and iOS)","archived":false,"fork":false,"pushed_at":"2024-05-02T04:21:59.000Z","size":2214,"stargazers_count":1143,"open_issues_count":15,"forks_count":193,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-05T19:08:13.394Z","etag":null,"topics":["action-sheet","bottom-animated","bottom-drawer","bottom-sheet","modal","picker","raw-bottom-sheet","react-native"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/react-native-raw-bottom-sheet","language":"JavaScript","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/nysamnang.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-20T14:12:34.000Z","updated_at":"2025-04-04T06:01:33.000Z","dependencies_parsed_at":"2024-01-16T23:29:38.381Z","dependency_job_id":"6e69b322-f994-4b7d-8873-630f51ba7684","html_url":"https://github.com/nysamnang/react-native-raw-bottom-sheet","commit_stats":{"total_commits":90,"total_committers":13,"mean_commits":6.923076923076923,"dds":"0.33333333333333337","last_synced_commit":"3b469f4a0a3bdf2fe9052743e72488a42e131576"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nysamnang%2Freact-native-raw-bottom-sheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nysamnang%2Freact-native-raw-bottom-sheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nysamnang%2Freact-native-raw-bottom-sheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nysamnang%2Freact-native-raw-bottom-sheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nysamnang","download_url":"https://codeload.github.com/nysamnang/react-native-raw-bottom-sheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631670,"owners_count":21136554,"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":["action-sheet","bottom-animated","bottom-drawer","bottom-sheet","modal","picker","raw-bottom-sheet","react-native"],"created_at":"2024-09-24T20:35:17.636Z","updated_at":"2025-04-12T20:40:44.537Z","avatar_url":"https://github.com/nysamnang.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-native-raw-bottom-sheet\n\n## Hooray! The new version 3 has been released.\n\nPlease pay close attention if you are upgrading the RBSheet from version 2 to version 3.\n\n- Functional Components: Starting from v3.0.0, RBSheet has been completely rewritten using Functional Components. This improves performance and aligns with modern React practices.\n- Prop Removal \u0026 Renaming: Several props have been removed and renamed for improved clarity and maintainability. Please refer to the updated documentation for a complete list of available props and their intended behavior.\n\n\u003chr\u003e\n\n![NPM Version](https://img.shields.io/npm/v/react-native-raw-bottom-sheet?label=npm%20package\u0026color=44cc11)\n[![npm downloads](https://img.shields.io/npm/dm/react-native-raw-bottom-sheet.svg)\n](//npmjs.com/package/react-native-raw-bottom-sheet)\n![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/nysamnang/react-native-raw-bottom-sheet/run-test.yml)\n[![codecov](https://codecov.io/gh/nysamnang/react-native-raw-bottom-sheet/graph/badge.svg?token=tJuJsd1V8e)](https://codecov.io/gh/nysamnang/react-native-raw-bottom-sheet)\n\n- Super Lightweight Component\n- Add Your Own Component To Bottom Sheet\n- Customize Whatever You Like\n- Support Drag Down Gesture\n- Support All Orientations\n- Support Both Android And iOS\n- Smooth Animation\n- Zero Configuration\n- Zero dependency\n- Millions of Downloads\n\n| Showcase iOS | Showcase Android |\n| :--------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------: |\n| ![](https://raw.githubusercontent.com/nysamnang/stock-images/master/react-native-raw-bottom-sheet/RNRBS-IOS-2.0.3.gif) | ![](https://raw.githubusercontent.com/nysamnang/stock-images/master/react-native-raw-bottom-sheet/RNRBS-AOS-2.0.3.gif) |\n\n## Installation\n\n```\nnpm i react-native-raw-bottom-sheet --save\n```\n\n### or\n\n```\nyarn add react-native-raw-bottom-sheet\n```\n\n## Example\n\nPlease check the [example](https://github.com/nysamnang/react-native-raw-bottom-sheet/tree/master/example) folder to explore more example codes.\n\n#### Single Bottom Sheet\n\n```jsx\nimport React, {useRef} from 'react';\nimport {View, Button} from 'react-native';\nimport RBSheet from 'react-native-raw-bottom-sheet';\n\nexport default function Example() {\n const refRBSheet = useRef();\n\n return (\n \u003cView style={{flex: 1}}\u003e\n \u003cButton\n title=\"OPEN BOTTOM SHEET\"\n onPress={() =\u003e refRBSheet.current.open()}\n /\u003e\n \u003cRBSheet\n ref={refRBSheet}\n useNativeDriver={true}\n customStyles={{\n wrapper: {\n backgroundColor: 'transparent',\n },\n draggableIcon: {\n backgroundColor: '#000',\n },\n }}\n customModalProps={{\n animationType: 'slide',\n statusBarTranslucent: true,\n }}\n customAvoidingViewProps={{\n enabled: false,\n }}\u003e\n \u003cYourOwnComponent /\u003e\n \u003c/RBSheet\u003e\n \u003c/View\u003e\n );\n}\n```\n\n#### Multiple Bottom Sheet\n\n```jsx\nconst refRBSheet = useRef([]);\n\nconst renderItem = ({item, index}) =\u003e {\n return (\n \u003cView\u003e\n \u003cTouchableOpacity\n style={styles.button}\n onPress={() =\u003e refRBSheet.current[index].open()}\u003e\n \u003cText style={styles.buttonText}\u003eITEM {item + 1}\u003c/Text\u003e\n \u003c/TouchableOpacity\u003e\n\n \u003cRBSheet ref={ref =\u003e (refRBSheet.current[index] = ref)}\u003e\n \u003cView style={styles.bottomSheetContainer}\u003e\n \u003cText style={styles.bottomSheetText}\u003eI AM ITEM {item + 1}\u003c/Text\u003e\n \u003c/View\u003e\n \u003c/RBSheet\u003e\n \u003c/View\u003e\n );\n};\n```\n\n## Props\n\n| Props | Type | Description | Default |\n| ----------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |\n| height | number | The height of bottom sheet. | 260 |\n| openDuration | number | Duration of the animation when opening bottom sheet. | 300 (ms) |\n| closeDuration | number | Duration of the animation when closing bottom sheet. | 200 (ms) |\n| closeOnPressMask | boolean | Press the outside area (mask) to close bottom sheet. | true |\n| closeOnPressBack | boolean | Press hardware back android to close bottom sheet (Android only). | false |\n| draggable | boolean | Enable the drag-down gesture to close the bottom sheet. | false |\n| dragOnContent | boolean | The draggable is only worked on the draggable icon. Set this to `true`\u003cbr /\u003eif you want to drag on the content as well (doesn't work with ScrollView). | false |\n| useNativeDriver | boolean | Use the native driver to run smoother animation. | false |\n| customStyles | object | Add [custom styles](#available-custom-style) to bottom sheet. | {} |\n| customModalProps | object | Add [custom props](https://reactnative.dev/docs/modal#props) to modal. | {} |\n| customAvoidingViewProps | object | Add [custom props](https://reactnative.dev/docs/keyboardavoidingview#props) to KeyboardAvoidingView. | {} |\n| onOpen | function | Callback function that will be called after the bottom sheet has been opened. | null |\n| onClose | function | Callback function that will be called after the bottom sheet has been closed. | null |\n\n### Available Custom Style\n\n```js\ncustomStyles: {\n wrapper: {...}, // The Root of component (Change the mask's background color here).\n container: {...}, // The Container of bottom sheet (The animated view that contains your component).\n draggableIcon: {...} // The style of Draggable Icon (If you set `draggable` to `true`).\n}\n```\n\n## Methods\n\n| Method Name | Description | Usage |\n| ----------- | --------------------------------- | ---------------------------- |\n| open | The method to open bottom sheet. | `refRBSheet.current.open()` |\n| close | The method to close bottom sheet. | `refRBSheet.current.close()` |\n\n## CONTRIBUTING\n\nI'm really glad you're reading this, because we need volunteer developers to help bring this project to life.\n\n#### How to contribute:\n\n1. Clone this repository\n2. Open project, then run `yarn` to install devDependencies\n3. Add your magic code for contribution\n4. Test your code\n - Navigate to `example` folder\n - Run `yarn` \u0026 `yarn start` to run the example project\n - Test your code in `example/App.js`\n5. Update `README.md` to update documentation (Optional)\n6. Write unit testing in `__tests__` folder (Optional)\n7. Update `index.d.ts` to update typing (Optional)\n8. Make a pull request, Genius!\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](https://github.com/nysamnang/react-native-raw-bottom-sheet/blob/master/LICENSE) file for details.\n\n## Author\n\nMade with ❤️ by [NY Samnang](https://github.com/nysamnang).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnysamnang%2Freact-native-raw-bottom-sheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnysamnang%2Freact-native-raw-bottom-sheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnysamnang%2Freact-native-raw-bottom-sheet/lists"}