@umituz/react-native-bottom-sheet 1.2.6 → 1.2.8

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/package.json CHANGED
@@ -1,11 +1,10 @@
1
1
  {
2
2
  "name": "@umituz/react-native-bottom-sheet",
3
- "version": "1.2.6",
3
+ "version": "1.2.8",
4
4
  "description": "Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, and smooth animations",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
7
7
  "scripts": {
8
- "build": "tsc",
9
8
  "typecheck": "tsc --noEmit",
10
9
  "lint": "tsc --noEmit",
11
10
  "clean": "rm -rf lib",
@@ -31,7 +30,6 @@
31
30
  "peerDependencies": {
32
31
  "@gorhom/bottom-sheet": ">=5.0.0",
33
32
  "@umituz/react-native-design-system": "*",
34
- "@umituz/react-native-design-system-theme": "*",
35
33
  "react": ">=18.2.0",
36
34
  "react-native": ">=0.74.0",
37
35
  "react-native-gesture-handler": ">=2.16.0",
@@ -43,7 +41,6 @@
43
41
  "@types/react": "^18.2.45",
44
42
  "@types/react-native": "^0.73.0",
45
43
  "@umituz/react-native-design-system": "latest",
46
- "@umituz/react-native-design-system-theme": "latest",
47
44
  "react": "^18.2.0",
48
45
  "react-native": "^0.74.0",
49
46
  "react-native-gesture-handler": "~2.16.1",
@@ -59,4 +56,4 @@
59
56
  "README.md",
60
57
  "LICENSE"
61
58
  ]
62
- }
59
+ }
@@ -36,7 +36,7 @@ import GorhomBottomSheet, {
36
36
  BottomSheetBackdrop,
37
37
  type BottomSheetBackdropProps,
38
38
  } from '@gorhom/bottom-sheet';
39
- import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
39
+ import { useAppDesignTokens } from '@umituz/react-native-design-system';
40
40
  import type {
41
41
  BottomSheetConfig,
42
42
  BottomSheetPreset,
@@ -38,7 +38,7 @@ import {
38
38
  BottomSheetBackdrop,
39
39
  type BottomSheetBackdropProps,
40
40
  } from '@gorhom/bottom-sheet';
41
- import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
41
+ import { useAppDesignTokens } from '@umituz/react-native-design-system';
42
42
  import type {
43
43
  BottomSheetConfig,
44
44
  BottomSheetPreset,
File without changes
File without changes
package/LICENSE DELETED
@@ -1,22 +0,0 @@
1
- MIT License
2
-
3
- Copyright (c) 2024 Ümit UZ
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
22
-
package/README.md DELETED
@@ -1,101 +0,0 @@
1
- # @umituz/react-native-bottom-sheet
2
-
3
- Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, and smooth animations.
4
-
5
- ## Installation
6
-
7
- ```bash
8
- npm install @umituz/react-native-bottom-sheet
9
- ```
10
-
11
- ## Peer Dependencies
12
-
13
- - `react` >= 18.2.0
14
- - `react-native` >= 0.74.0
15
- - `@gorhom/bottom-sheet` >= 5.0.0
16
- - `react-native-gesture-handler` >= 2.16.0
17
- - `react-native-reanimated` >= 3.10.0
18
-
19
- ## Features
20
-
21
- - ✅ Preset configurations (small, medium, large, full)
22
- - ✅ Custom snap points (percentage, fixed, dynamic)
23
- - ✅ Backdrop with tap-to-close
24
- - ✅ Keyboard handling (interactive, fillParent, extend)
25
- - ✅ Theme-aware colors
26
- - ✅ Handle indicator
27
- - ✅ Pan down to close
28
- - ✅ Smooth animations with Reanimated v3
29
- - ✅ Offline-compatible (100% client-side)
30
-
31
- ## Usage
32
-
33
- ### Basic Usage
34
-
35
- ```tsx
36
- import { BottomSheet, useBottomSheet } from '@umituz/react-native-bottom-sheet';
37
-
38
- const MyScreen = () => {
39
- const { sheetRef, open, close } = useBottomSheet();
40
-
41
- return (
42
- <>
43
- <Button onPress={open}>Open Sheet</Button>
44
- <BottomSheet
45
- ref={sheetRef}
46
- preset="medium"
47
- onClose={() => console.log('Closed')}
48
- >
49
- <View>
50
- <Text>Bottom Sheet Content</Text>
51
- </View>
52
- </BottomSheet>
53
- </>
54
- );
55
- };
56
- ```
57
-
58
- ### Custom Snap Points
59
-
60
- ```tsx
61
- <BottomSheet
62
- snapPoints={['25%', '50%', '90%']}
63
- initialIndex={1}
64
- enableBackdrop
65
- >
66
- <FilterForm />
67
- </BottomSheet>
68
- ```
69
-
70
- ### Keyboard-Aware Sheet
71
-
72
- ```tsx
73
- <BottomSheet
74
- preset="large"
75
- keyboardBehavior="fillParent"
76
- >
77
- <CommentForm />
78
- </BottomSheet>
79
- ```
80
-
81
- ## Presets
82
-
83
- - `small`: 25% height
84
- - `medium`: 50% height
85
- - `large`: 75% height
86
- - `full`: Multi-snap (25%, 50%, 90%)
87
-
88
- ## API
89
-
90
- ### Components
91
-
92
- - `BottomSheet`: Main bottom sheet component
93
-
94
- ### Hooks
95
-
96
- - `useBottomSheet()`: Hook for managing bottom sheet state
97
-
98
- ## License
99
-
100
- MIT
101
-
@@ -1,212 +0,0 @@
1
- /**
2
- * Bottom Sheet Domain - Entity
3
- *
4
- * Defines bottom sheet types, snap point configurations, and utilities.
5
- * Provides a clean abstraction over @gorhom/bottom-sheet library.
6
- *
7
- * Features:
8
- * - Snap point types (percentage, fixed, dynamic)
9
- * - Pre-built configs (small, medium, large, full)
10
- * - Backdrop configurations
11
- * - Animation timing configs
12
- * - Keyboard behavior options
13
- *
14
- * Architecture:
15
- * - Domain Layer: Pure business logic, no UI dependencies
16
- * - Factory pattern for config creation
17
- * - Type-safe snap points and options
18
- */
19
-
20
- import type { BottomSheetBackdropProps } from '@gorhom/bottom-sheet';
21
-
22
- /**
23
- * Snap point types for bottom sheet positioning
24
- */
25
- export type SnapPoint = string | number;
26
-
27
- /**
28
- * Keyboard behavior strategies
29
- */
30
- export type KeyboardBehavior = 'interactive' | 'fillParent' | 'extend';
31
-
32
- /**
33
- * Bottom sheet preset sizes
34
- */
35
- export type BottomSheetPreset = 'small' | 'medium' | 'large' | 'full';
36
-
37
- /**
38
- * Bottom sheet configuration interface
39
- */
40
- export interface BottomSheetConfig {
41
- /**
42
- * Snap points for the bottom sheet
43
- * - Percentage: '25%', '50%', '75%'
44
- * - Fixed: 200, 400, 600
45
- * - Dynamic: 'CONTENT_HEIGHT'
46
- */
47
- snapPoints: SnapPoint[];
48
-
49
- /**
50
- * Initial snap point index (default: 0)
51
- */
52
- initialIndex?: number;
53
-
54
- /**
55
- * Enable backdrop (darkens background)
56
- */
57
- enableBackdrop?: boolean;
58
-
59
- /**
60
- * Backdrop appears at this snap index (default: 0)
61
- */
62
- backdropAppearsOnIndex?: number;
63
-
64
- /**
65
- * Backdrop disappears at this snap index (default: -1)
66
- */
67
- backdropDisappearsOnIndex?: number;
68
-
69
- /**
70
- * Keyboard behavior strategy
71
- */
72
- keyboardBehavior?: KeyboardBehavior;
73
-
74
- /**
75
- * Enable handle indicator (default: true)
76
- */
77
- enableHandleIndicator?: boolean;
78
-
79
- /**
80
- * Enable pan down to close (default: true)
81
- */
82
- enablePanDownToClose?: boolean;
83
-
84
- /**
85
- * Enable dynamic sizing
86
- */
87
- enableDynamicSizing?: boolean;
88
- }
89
-
90
- /**
91
- * Backdrop configuration
92
- */
93
- export interface BackdropConfig {
94
- appearsOnIndex: number;
95
- disappearsOnIndex: number;
96
- opacity?: number;
97
- pressBehavior?: 'none' | 'close' | 'collapse';
98
- }
99
-
100
- /**
101
- * Pre-built bottom sheet configurations
102
- */
103
- export const BOTTOM_SHEET_PRESETS: Record<BottomSheetPreset, BottomSheetConfig> = {
104
- small: {
105
- snapPoints: ['25%'],
106
- initialIndex: 0,
107
- enableBackdrop: true,
108
- backdropAppearsOnIndex: 0,
109
- backdropDisappearsOnIndex: -1,
110
- enableHandleIndicator: true,
111
- enablePanDownToClose: true,
112
- },
113
- medium: {
114
- snapPoints: ['50%'],
115
- initialIndex: 0,
116
- enableBackdrop: true,
117
- backdropAppearsOnIndex: 0,
118
- backdropDisappearsOnIndex: -1,
119
- enableHandleIndicator: true,
120
- enablePanDownToClose: true,
121
- },
122
- large: {
123
- snapPoints: ['75%'],
124
- initialIndex: 0,
125
- enableBackdrop: true,
126
- backdropAppearsOnIndex: 0,
127
- backdropDisappearsOnIndex: -1,
128
- enableHandleIndicator: true,
129
- enablePanDownToClose: true,
130
- },
131
- full: {
132
- snapPoints: ['25%', '50%', '90%'],
133
- initialIndex: 1,
134
- enableBackdrop: true,
135
- backdropAppearsOnIndex: 2,
136
- backdropDisappearsOnIndex: 1,
137
- enableHandleIndicator: true,
138
- enablePanDownToClose: true,
139
- },
140
- };
141
-
142
- /**
143
- * Default bottom sheet configuration
144
- */
145
- export const DEFAULT_BOTTOM_SHEET_CONFIG: BottomSheetConfig = {
146
- snapPoints: ['50%'],
147
- initialIndex: 0,
148
- enableBackdrop: true,
149
- backdropAppearsOnIndex: 0,
150
- backdropDisappearsOnIndex: -1,
151
- keyboardBehavior: 'interactive',
152
- enableHandleIndicator: true,
153
- enablePanDownToClose: true,
154
- enableDynamicSizing: false,
155
- };
156
-
157
- /**
158
- * Bottom sheet utilities
159
- */
160
- export const BottomSheetUtils = {
161
- /**
162
- * Create custom bottom sheet config
163
- */
164
- createConfig: (overrides: Partial<BottomSheetConfig>): BottomSheetConfig => {
165
- return {
166
- ...DEFAULT_BOTTOM_SHEET_CONFIG,
167
- ...overrides,
168
- };
169
- },
170
-
171
- /**
172
- * Get preset configuration
173
- */
174
- getPreset: (preset: BottomSheetPreset): BottomSheetConfig => {
175
- return BOTTOM_SHEET_PRESETS[preset];
176
- },
177
-
178
- /**
179
- * Validate snap points
180
- */
181
- validateSnapPoints: (snapPoints: SnapPoint[]): boolean => {
182
- if (snapPoints.length === 0) return false;
183
-
184
- return snapPoints.every(point => {
185
- if (typeof point === 'number') return point > 0;
186
- if (typeof point === 'string') {
187
- if (point === 'CONTENT_HEIGHT') return true;
188
- if (point.endsWith('%')) {
189
- const value = parseInt(point);
190
- return value > 0 && value <= 100;
191
- }
192
- }
193
- return false;
194
- });
195
- },
196
-
197
- /**
198
- * Create backdrop config
199
- */
200
- createBackdropConfig: (
201
- appearsOnIndex: number = 0,
202
- disappearsOnIndex: number = -1,
203
- opacity: number = 0.5
204
- ): BackdropConfig => {
205
- return {
206
- appearsOnIndex,
207
- disappearsOnIndex,
208
- opacity,
209
- pressBehavior: 'close',
210
- };
211
- },
212
- };
package/src/index.ts DELETED
@@ -1,115 +0,0 @@
1
- /**
2
- * Bottom Sheet Domain - Barrel Export
3
- *
4
- * Public API for the bottom-sheet domain.
5
- * Provides modern, performant bottom sheets for React Native.
6
- *
7
- * Features:
8
- * - Preset configurations (small, medium, large, full)
9
- * - Custom snap points (percentage, fixed, dynamic)
10
- * - Backdrop with tap-to-close
11
- * - Keyboard handling (interactive, fillParent, extend)
12
- * - Theme-aware colors
13
- * - Handle indicator
14
- * - Pan down to close
15
- * - Smooth animations with Reanimated v3
16
- * - Offline-compatible (100% client-side)
17
- *
18
- * Usage:
19
- * ```tsx
20
- * import { BottomSheet, useBottomSheet } from '@umituz/react-native-bottom-sheet';
21
- *
22
- * const MyScreen = () => {
23
- * const { sheetRef, open, close } = useBottomSheet();
24
- *
25
- * return (
26
- * <>
27
- * <Button onPress={open}>Open Sheet</Button>
28
- * <BottomSheet
29
- * ref={sheetRef}
30
- * preset="medium"
31
- * onClose={() => console.log('Closed')}
32
- * >
33
- * <View>
34
- * <Text>Bottom Sheet Content</Text>
35
- * </View>
36
- * </BottomSheet>
37
- * </>
38
- * );
39
- * };
40
- *
41
- * // Custom snap points
42
- * <BottomSheet
43
- * snapPoints={['25%', '50%', '90%']}
44
- * initialIndex={1}
45
- * enableBackdrop
46
- * >
47
- * <FilterForm />
48
- * </BottomSheet>
49
- *
50
- * // Keyboard-aware sheet
51
- * <BottomSheet
52
- * preset="large"
53
- * keyboardBehavior="fillParent"
54
- * >
55
- * <CommentForm />
56
- * </BottomSheet>
57
- * ```
58
- *
59
- * Presets:
60
- * - small: 25% height
61
- * - medium: 50% height
62
- * - large: 75% height
63
- * - full: Multi-snap (25%, 50%, 90%)
64
- *
65
- * Technical:
66
- * - Uses @gorhom/bottom-sheet library
67
- * - Animated with react-native-reanimated v3
68
- * - Gesture handling with react-native-gesture-handler
69
- * - Zero backend dependencies
70
- */
71
-
72
- // Domain Entities
73
- export type {
74
- BottomSheetConfig,
75
- BottomSheetPreset,
76
- SnapPoint,
77
- KeyboardBehavior,
78
- BackdropConfig,
79
- } from './domain/entities/BottomSheet';
80
-
81
- export {
82
- BOTTOM_SHEET_PRESETS,
83
- DEFAULT_BOTTOM_SHEET_CONFIG,
84
- BottomSheetUtils,
85
- } from './domain/entities/BottomSheet';
86
-
87
- // Presentation Components
88
- export {
89
- BottomSheet,
90
- type BottomSheetProps,
91
- type BottomSheetRef,
92
- } from './presentation/components/BottomSheet';
93
- export {
94
- BottomSheetModal,
95
- type BottomSheetModalProps,
96
- type BottomSheetModalRef,
97
- } from './presentation/components/BottomSheetModal';
98
-
99
- // Presentation Hooks
100
- export {
101
- useBottomSheet,
102
- type UseBottomSheetReturn,
103
- } from './presentation/hooks/useBottomSheet';
104
- export {
105
- useBottomSheetModal,
106
- type UseBottomSheetModalReturn,
107
- } from './presentation/hooks/useBottomSheetModal';
108
-
109
- // Re-export BottomSheetModalProvider for convenience
110
- export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
111
-
112
- // Safe provider that ensures Reanimated is ready before rendering
113
- export {
114
- SafeBottomSheetModalProvider,
115
- } from './presentation/components/SafeBottomSheetModalProvider';