@buoy-gg/bottom-sheet 7.0.36 → 7.0.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -22
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,34 +1,33 @@
|
|
|
1
1
|
# @buoy-gg/bottom-sheet
|
|
2
2
|
|
|
3
|
-
A
|
|
3
|
+
A React Native component with bottom-sheet and floating-window modes, configurable headers and footers, and drag-to-resize gestures.
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
- 🚀 **60 FPS Performance** - Uses native driver for all animations
|
|
8
7
|
- 📱 **Dual Modes** - Bottom sheet and floating window modes
|
|
9
8
|
- 🎨 **Fully Customizable** - Custom headers, themes, and styles
|
|
10
9
|
- ✋ **Touch Gestures** - Drag to resize, double-tap to toggle mode, triple-tap to close
|
|
11
10
|
- 🔄 **Smooth Transitions** - Spring-based animations for natural feel
|
|
12
11
|
- 📐 **Smart Boundaries** - Respects safe areas and screen boundaries
|
|
13
|
-
-
|
|
12
|
+
- **Dependencies** - Requires React and React Native and uses Buoy’s shared UI package
|
|
14
13
|
- 🎯 **TypeScript** - Full type safety and IntelliSense support
|
|
15
14
|
|
|
16
15
|
## Installation
|
|
17
16
|
|
|
18
17
|
```bash
|
|
19
|
-
npm install @buoy/bottom-sheet
|
|
18
|
+
npm install @buoy-gg/bottom-sheet
|
|
20
19
|
# or
|
|
21
|
-
yarn add @buoy/bottom-sheet
|
|
20
|
+
yarn add @buoy-gg/bottom-sheet
|
|
22
21
|
# or
|
|
23
|
-
pnpm add @buoy/bottom-sheet
|
|
22
|
+
pnpm add @buoy-gg/bottom-sheet
|
|
24
23
|
```
|
|
25
24
|
|
|
26
25
|
## Basic Usage
|
|
27
26
|
|
|
28
|
-
```
|
|
27
|
+
```tsx
|
|
29
28
|
import React, { useState } from 'react';
|
|
30
29
|
import { View, Text, Button } from 'react-native';
|
|
31
|
-
import { BottomSheet } from '@buoy/bottom-sheet';
|
|
30
|
+
import { BottomSheet } from '@buoy-gg/bottom-sheet';
|
|
32
31
|
|
|
33
32
|
function MyComponent() {
|
|
34
33
|
const [visible, setVisible] = useState(false);
|
|
@@ -54,11 +53,15 @@ function MyComponent() {
|
|
|
54
53
|
}
|
|
55
54
|
```
|
|
56
55
|
|
|
56
|
+
Open the sheet, drag its header, switch modes, and close it to check the basic integration.
|
|
57
|
+
|
|
57
58
|
## Advanced Usage
|
|
58
59
|
|
|
60
|
+
These snippets reuse `visible`, its setter, and your own content or save handler from the surrounding component.
|
|
61
|
+
|
|
59
62
|
### Custom Theme
|
|
60
63
|
|
|
61
|
-
```
|
|
64
|
+
```tsx
|
|
62
65
|
<BottomSheet
|
|
63
66
|
visible={visible}
|
|
64
67
|
onClose={() => setVisible(false)}
|
|
@@ -76,7 +79,7 @@ function MyComponent() {
|
|
|
76
79
|
|
|
77
80
|
### With Footer
|
|
78
81
|
|
|
79
|
-
```
|
|
82
|
+
```tsx
|
|
80
83
|
<BottomSheet
|
|
81
84
|
visible={visible}
|
|
82
85
|
onClose={() => setVisible(false)}
|
|
@@ -93,7 +96,7 @@ function MyComponent() {
|
|
|
93
96
|
|
|
94
97
|
### Custom Header
|
|
95
98
|
|
|
96
|
-
```
|
|
99
|
+
```tsx
|
|
97
100
|
<BottomSheet
|
|
98
101
|
visible={visible}
|
|
99
102
|
onClose={() => setVisible(false)}
|
|
@@ -113,7 +116,7 @@ function MyComponent() {
|
|
|
113
116
|
|
|
114
117
|
### Floating Window Mode
|
|
115
118
|
|
|
116
|
-
```
|
|
119
|
+
```tsx
|
|
117
120
|
<BottomSheet
|
|
118
121
|
visible={visible}
|
|
119
122
|
onClose={() => setVisible(false)}
|
|
@@ -126,7 +129,7 @@ function MyComponent() {
|
|
|
126
129
|
|
|
127
130
|
### Height Control
|
|
128
131
|
|
|
129
|
-
```
|
|
132
|
+
```tsx
|
|
130
133
|
<BottomSheet
|
|
131
134
|
visible={visible}
|
|
132
135
|
onClose={() => setVisible(false)}
|
|
@@ -180,25 +183,19 @@ function MyComponent() {
|
|
|
180
183
|
|
|
181
184
|
## Performance
|
|
182
185
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
- All animations use `useNativeDriver: true`
|
|
186
|
-
- Transform-based positioning instead of layout changes
|
|
187
|
-
- Interpolation for calculations on the native thread
|
|
188
|
-
- Minimal JavaScript thread work during gestures
|
|
189
|
-
- No state updates during drag operations
|
|
186
|
+
The component uses React Native animations and gestures. Actual frame rate depends on device load, sheet contents, and your app. Profile dragging and resizing with representative content.
|
|
190
187
|
|
|
191
188
|
## TypeScript
|
|
192
189
|
|
|
193
190
|
Full TypeScript support with exported types:
|
|
194
191
|
|
|
195
|
-
```
|
|
192
|
+
```tsx
|
|
196
193
|
import {
|
|
197
194
|
BottomSheet,
|
|
198
195
|
BottomSheetProps,
|
|
199
196
|
BottomSheetMode,
|
|
200
197
|
BottomSheetHeaderConfig
|
|
201
|
-
} from '@buoy/bottom-sheet';
|
|
198
|
+
} from '@buoy-gg/bottom-sheet';
|
|
202
199
|
```
|
|
203
200
|
|
|
204
201
|
## License
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@buoy-gg/bottom-sheet",
|
|
3
|
-
"version": "7.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "7.0.39",
|
|
4
|
+
"description": "Bottom sheet and floating window components for React Native, with configurable presentation and native-driver animations.",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
7
7
|
"types": "lib/typescript/index.d.ts",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
],
|
|
27
27
|
"sideEffects": false,
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@buoy-gg/shared-ui": "^7.0.
|
|
29
|
+
"@buoy-gg/shared-ui": "^7.0.39"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": "*",
|