{"id":15293991,"url":"https://github.com/ahmetaltai/react-native-bottom-sheet","last_synced_at":"2025-04-13T14:11:32.034Z","repository":{"id":256857760,"uuid":"856706155","full_name":"ahmetaltai/react-native-bottom-sheet","owner":"ahmetaltai","description":"⚡ A lightweight, flexible, and customizable bottom sheet package for React Native.","archived":false,"fork":false,"pushed_at":"2024-09-18T04:44:33.000Z","size":2635,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-22T06:48:21.518Z","etag":null,"topics":["bottom-sheet","expo","expo-snack","modal","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/ahmetaltai.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"ahmetaltai","patreon":"ahmetaltai"}},"created_at":"2024-09-13T03:46:55.000Z","updated_at":"2025-02-13T17:14:56.000Z","dependencies_parsed_at":"2024-10-14T22:40:24.359Z","dependency_job_id":null,"html_url":"https://github.com/ahmetaltai/react-native-bottom-sheet","commit_stats":null,"previous_names":["ahmetaltai/react-native-bottom-sheet"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmetaltai%2Freact-native-bottom-sheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmetaltai%2Freact-native-bottom-sheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmetaltai%2Freact-native-bottom-sheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmetaltai%2Freact-native-bottom-sheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahmetaltai","download_url":"https://codeload.github.com/ahmetaltai/react-native-bottom-sheet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248724629,"owners_count":21151561,"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":["bottom-sheet","expo","expo-snack","modal","react-native"],"created_at":"2024-09-30T16:54:32.628Z","updated_at":"2025-04-13T14:11:32.007Z","avatar_url":"https://github.com/ahmetaltai.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ahmetaltai","https://patreon.com/ahmetaltai"],"categories":[],"sub_categories":[],"readme":"## @ahmetaltai/react-native-bottom-sheet\n\nA highly efficient, stable, and customizable Bottom Sheet component for React Native. Designed to provide smooth performance with minimal configuration, this component is easy to integrate while offering extensive customization options for more complex use cases.\n\n[![npm version](https://badge.fury.io/js/@ahmetaltai%2Freact-native-bottom-sheet.svg)](https://badge.fury.io/js/@ahmetaltai%2Freact-native-bottom-sheet) ![NPM Downloads](https://img.shields.io/npm/dw/%40ahmetaltai%2Freact-native-bottom-sheet)\n\n\n![Bottom Sheet Preview](./example/assets/preview.gif)\n\n![Expo](https://img.shields.io/badge/expo-1C1E24?style=for-the-badge\u0026logo=expo\u0026logoColor=CB3837) ![React Native](https://img.shields.io/badge/react_native-%231C1E24.svg?style=for-the-badge\u0026logo=react\u0026logoColor=CB3837) ![TypeScript](https://img.shields.io/badge/typescript-%231C1E24.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=CB3837) ![NPM](https://img.shields.io/badge/NPM-%231C1E24.svg?style=for-the-badge\u0026logo=npm\u0026logoColor=CB3837) ![Yarn](https://img.shields.io/badge/yarn-%231C1E24.svg?style=for-the-badge\u0026logo=yarn\u0026logoColor=CB3837)\n\n[Try on Snack](https://snack.expo.dev/@ahmet.altai/react-native-bottom-sheet)\n\n## Features\n\n- ⚡ **Fast and Stable:** Optimized for performance with minimal configuration.\n- 🛠 **Simple Setup:** Requires only a few basic props to get started.\n- 🎨 **Customizable:** Easily apply styles without needing complex configurations.\n- ✋ **Gesture Support:** Offers native-like drag-and-drop gesture support with smooth animations.\n\n## Installation\n\nTo install the package, use npm or yarn:\n\n```bash\nnpm install @ahmetaltai/react-native-bottom-sheet\n```\n\nor\n\n```bash\nyarn add @ahmetaltai/react-native-bottom-sheet\n```\n\n## Usage Example\n\nHere's a basic example of how to use the `BottomSheet` component:\n\n```tsx\nimport React, { useRef } from 'react';\nimport { View, Button, Text } from 'react-native';\nimport BottomSheet from '@ahmetaltai/react-native-bottom-sheet';\n\nconst App = () =\u003e {\n  const BottomSheetRef = useRef\u003cBottomSheetRef\u003e();\n\n  const OpenBottomSheet = () =\u003e {\n    BottomSheetRef.current?.open();\n  };\n\n  const ExpandBottomSheet = () =\u003e {\n    BottomSheetRef.current?.expand();\n  };\n\n  const SnapBottomSheet = (index: number) =\u003e {\n    BottomSheetRef.current?.snap(index);\n  };\n\n  const OnPressBackdrop = () =\u003e {\n    console.log('Backdrop Pressed');\n  };\n\n  const OnChangePoint = (index: number) =\u003e {\n    console.log('Present Change: ' + index);\n  };\n\n  return (\n    \u003cView style={{ flex: 1 }}\u003e\n      \u003cButton title=\"Open Bottom Sheet\" onPress={OpenBottomSheet} /\u003e\n\n      \u003cBottomSheet\n        index={0}\n        ref={BottomSheetRef}\n        points={['50%', '75%']}\n        onChangePoint={OnChangePoint}\n        // onPressBackdrop={OnPressBackdrop} - By default, pressing the backdrop will close the modal. If a different action is needed, the onPressBackdrop prop can be used to define a custom function.\n      \u003e\n        \u003cView\u003e\n          \u003cText\u003eThis is the content inside the Bottom Sheet.\u003c/Text\u003e\n        \u003c/View\u003e\n      \u003c/BottomSheet\u003e\n    \u003c/View\u003e\n  );\n};\n\nexport default App;\n```\n\n## Props\n\n| Prop      | Type       | Default | Description                                                                           |\n| --------- | ---------- | ------- | ------------------------------------------------------------------------------------- |\n| `points`  | `string[]` | `[]`    | Defines the draggable positions for the sheet in percentages                          |\n| `index`   | `number`   | `0`     | The initial index for the Bottom Sheet. Refers to the position in the `points` array. |\n| `visible` | `string`   | `100%`  | Defines the position to display the sheet when initially visible.                     |\n| `style`   | `object`   | `{}`    | Customize the appearance of the sheet and the backdrop.                               |\n\n## Methods\n\nThe `BottomSheet` component exposes several methods via `ref`. These methods allow you to control the Bottom Sheet's behavior programmatically:\n\n### `open()`\nOpens the Bottom Sheet to the position specified by the `index` prop.\n\n- **`index`**: Refers to the position in the `points` array where the Bottom Sheet will open. For example, if `index={1}`, the Bottom Sheet will open at the second point in the `points` array. You can call this method via `BottomSheetRef.current?.open()`.\n\n### `close()`\nCloses the Bottom Sheet completely. This will hide the Bottom Sheet, regardless of its current position in the `points` array.\n\n- You can call this method using `BottomSheetRef.current?.close()`.\n\n### `expand()`\nExpands the Bottom Sheet to its maximum point, as defined by the last value in the `points` array.\n\n- For example, if `points={['25%', '50%', '90%']}`, calling `expand()` will expand the Bottom Sheet to the 90% position.\n- To invoke this, use `BottomSheetRef.current?.expand()`.\n\n### `snap(index: number)`\nSnaps the Bottom Sheet to a specific point based on the provided `index`. The `index` corresponds to the position in the `points` array.\n\n- **`index`**: This parameter determines the specific position from the `points` array where the Bottom Sheet should snap to. For instance, if you call `snap(2)` and the `points` array is `['25%', '50%', '90%']`, the Bottom Sheet will snap to 90%.\n- Use `BottomSheetRef.current?.snap(index)` to invoke this method.\n\n---\n\nThese methods offer flexible control over the Bottom Sheet's behavior, allowing you to open, close, expand, or snap the sheet to specific positions programmatically.\n\n## Explanation\n\n- **`points`**: The `points` prop defines the draggable positions for the Bottom Sheet as percentages. For example, `['25%', '50%', '90%']` means the Bottom Sheet can be dragged between 25%, 50%, and 90% of the screen height.\n- **`visible`**: When `visible` is set, the Bottom Sheet stays open, and it does not close upon background taps. This is useful for cases where you want the sheet to remain open, allowing background touches.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmetaltai%2Freact-native-bottom-sheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahmetaltai%2Freact-native-bottom-sheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmetaltai%2Freact-native-bottom-sheet/lists"}