react-native-sheet-view 1.0.0
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/BottomSheet.js +220 -0
- package/README.md +308 -0
- package/package.json +16 -0
package/BottomSheet.js
ADDED
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
View,
|
|
4
|
+
Pressable,
|
|
5
|
+
Text,
|
|
6
|
+
StyleSheet,
|
|
7
|
+
Platform,
|
|
8
|
+
} from 'react-native';
|
|
9
|
+
|
|
10
|
+
import Modal from 'react-native-modal';
|
|
11
|
+
|
|
12
|
+
const BottomSheet = ({
|
|
13
|
+
visible,
|
|
14
|
+
options,
|
|
15
|
+
onCancel,
|
|
16
|
+
onSelect,
|
|
17
|
+
cancelText,
|
|
18
|
+
headerTitle,
|
|
19
|
+
backgroundColor,
|
|
20
|
+
showCancelText,
|
|
21
|
+
lineColor,
|
|
22
|
+
titleColor,
|
|
23
|
+
}) => {
|
|
24
|
+
if (!visible) {
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const handleSelectOption = (index) => {
|
|
29
|
+
onSelect(index);
|
|
30
|
+
onCancel();
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<Modal
|
|
35
|
+
isVisible={visible}
|
|
36
|
+
backdropOpacity={0.5}
|
|
37
|
+
onBackdropPress={onCancel}
|
|
38
|
+
style={styles.modal}
|
|
39
|
+
animationOut='slideOutDown'
|
|
40
|
+
animationOutTiming={500}
|
|
41
|
+
>
|
|
42
|
+
<View
|
|
43
|
+
style={[
|
|
44
|
+
styles.container,
|
|
45
|
+
{
|
|
46
|
+
marginBottom: Platform.OS === 'ios'
|
|
47
|
+
? 40
|
|
48
|
+
: 0,
|
|
49
|
+
width: Platform.OS === 'ios'
|
|
50
|
+
? '95%'
|
|
51
|
+
: '100%'
|
|
52
|
+
}
|
|
53
|
+
]}
|
|
54
|
+
>
|
|
55
|
+
<View
|
|
56
|
+
style={{
|
|
57
|
+
backgroundColor: backgroundColor !== undefined
|
|
58
|
+
? backgroundColor
|
|
59
|
+
: '#fff',
|
|
60
|
+
borderRadius: Platform.OS === 'ios'
|
|
61
|
+
? 10
|
|
62
|
+
: 0,
|
|
63
|
+
}}
|
|
64
|
+
>
|
|
65
|
+
{
|
|
66
|
+
headerTitle !== undefined && ((
|
|
67
|
+
<View
|
|
68
|
+
style={[
|
|
69
|
+
styles.title,
|
|
70
|
+
{
|
|
71
|
+
borderTopLeftRadius: Platform.OS === 'ios'
|
|
72
|
+
? 10
|
|
73
|
+
: 0,
|
|
74
|
+
borderTopRightRadius: Platform.OS === 'ios'
|
|
75
|
+
? 10
|
|
76
|
+
: 0,
|
|
77
|
+
borderBottomWidth: 1,
|
|
78
|
+
borderBottomColor: lineColor !== undefined
|
|
79
|
+
? lineColor
|
|
80
|
+
: 'lightgray',
|
|
81
|
+
}
|
|
82
|
+
]}
|
|
83
|
+
>
|
|
84
|
+
<Text
|
|
85
|
+
style={{
|
|
86
|
+
fontSize: 12,
|
|
87
|
+
color: titleColor !== undefined
|
|
88
|
+
? titleColor
|
|
89
|
+
: '#fff'
|
|
90
|
+
}}
|
|
91
|
+
>
|
|
92
|
+
{headerTitle}
|
|
93
|
+
</Text>
|
|
94
|
+
</View>
|
|
95
|
+
))
|
|
96
|
+
}
|
|
97
|
+
{
|
|
98
|
+
options.map((option, index) => (
|
|
99
|
+
<Pressable
|
|
100
|
+
key={index}
|
|
101
|
+
style={[
|
|
102
|
+
styles.option,
|
|
103
|
+
{
|
|
104
|
+
borderBottomWidth: Platform.OS === 'ios'
|
|
105
|
+
? index < options.length - 1
|
|
106
|
+
? 1
|
|
107
|
+
: 0
|
|
108
|
+
: 1,
|
|
109
|
+
borderBottomColor: Platform.OS === 'ios'
|
|
110
|
+
? index < options.length - 1
|
|
111
|
+
? lineColor !== undefined
|
|
112
|
+
? lineColor
|
|
113
|
+
: 'lightgray'
|
|
114
|
+
: null
|
|
115
|
+
: lineColor !== undefined
|
|
116
|
+
? lineColor
|
|
117
|
+
: 'lightgray'
|
|
118
|
+
}
|
|
119
|
+
]}
|
|
120
|
+
onPress={() => (
|
|
121
|
+
handleSelectOption(index)
|
|
122
|
+
)}
|
|
123
|
+
>
|
|
124
|
+
<Text
|
|
125
|
+
style={{
|
|
126
|
+
color: '#2b70de',
|
|
127
|
+
fontWeight: 500,
|
|
128
|
+
fontSize: 20,
|
|
129
|
+
}}
|
|
130
|
+
>
|
|
131
|
+
{option}
|
|
132
|
+
</Text>
|
|
133
|
+
</Pressable>
|
|
134
|
+
))
|
|
135
|
+
}
|
|
136
|
+
</View>
|
|
137
|
+
|
|
138
|
+
{
|
|
139
|
+
Platform.OS === 'ios' && ((
|
|
140
|
+
<View
|
|
141
|
+
style={{
|
|
142
|
+
height: 15
|
|
143
|
+
}}
|
|
144
|
+
/>
|
|
145
|
+
))
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
{
|
|
149
|
+
showCancelText === true && ((
|
|
150
|
+
<View
|
|
151
|
+
style={{
|
|
152
|
+
backgroundColor: backgroundColor !== undefined
|
|
153
|
+
? backgroundColor
|
|
154
|
+
: '#fff',
|
|
155
|
+
borderRadius: Platform.OS === 'ios'
|
|
156
|
+
? 10
|
|
157
|
+
: 0,
|
|
158
|
+
borderColor: 'gray',
|
|
159
|
+
}}
|
|
160
|
+
>
|
|
161
|
+
<Pressable
|
|
162
|
+
style={[
|
|
163
|
+
styles.cancelButton,
|
|
164
|
+
]}
|
|
165
|
+
onPress={onCancel}
|
|
166
|
+
>
|
|
167
|
+
<Text
|
|
168
|
+
style={{
|
|
169
|
+
color: Platform.OS === 'ios'
|
|
170
|
+
? '#2b70de'
|
|
171
|
+
: 'red',
|
|
172
|
+
fontWeight: 600,
|
|
173
|
+
fontSize: 20,
|
|
174
|
+
}}
|
|
175
|
+
>
|
|
176
|
+
{
|
|
177
|
+
cancelText !== undefined
|
|
178
|
+
? cancelText
|
|
179
|
+
: 'Cancel'
|
|
180
|
+
}
|
|
181
|
+
</Text>
|
|
182
|
+
</Pressable>
|
|
183
|
+
</View>
|
|
184
|
+
))
|
|
185
|
+
}
|
|
186
|
+
</View>
|
|
187
|
+
</Modal>
|
|
188
|
+
);
|
|
189
|
+
};
|
|
190
|
+
|
|
191
|
+
const styles = StyleSheet.create({
|
|
192
|
+
modal: {
|
|
193
|
+
alignItems: 'center',
|
|
194
|
+
justifyContent: 'flex-end',
|
|
195
|
+
margin: 0,
|
|
196
|
+
},
|
|
197
|
+
container: {
|
|
198
|
+
position: 'absolute',
|
|
199
|
+
bottom: 0,
|
|
200
|
+
elevation: 5,
|
|
201
|
+
},
|
|
202
|
+
title: {
|
|
203
|
+
padding: 10,
|
|
204
|
+
alignItems: 'center',
|
|
205
|
+
borderBottomWidth: 1,
|
|
206
|
+
borderBottomColor: 'lightgray',
|
|
207
|
+
},
|
|
208
|
+
option: {
|
|
209
|
+
padding: 15,
|
|
210
|
+
alignItems: 'center',
|
|
211
|
+
justifyContent: 'center',
|
|
212
|
+
},
|
|
213
|
+
cancelButton: {
|
|
214
|
+
padding: 15,
|
|
215
|
+
alignItems: 'center',
|
|
216
|
+
justifyContent: 'center',
|
|
217
|
+
},
|
|
218
|
+
});
|
|
219
|
+
|
|
220
|
+
export default BottomSheet;
|
package/README.md
ADDED
|
@@ -0,0 +1,308 @@
|
|
|
1
|
+
# React Native Sheet View
|
|
2
|
+
###### A simple bottom sheet component for any React Native project
|
|
3
|
+
|
|
4
|
+
iOS | Android
|
|
5
|
+
:------------------:|:------------------:
|
|
6
|
+
 | 
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
### Installation
|
|
12
|
+
```
|
|
13
|
+
npm install --save react-native-sheet-view
|
|
14
|
+
```
|
|
15
|
+
or
|
|
16
|
+
```
|
|
17
|
+
yarn add react-native-sheet-view
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
### Import the BottomSheet component
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
import BottomSheet from 'react-native-sheet-view';
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
### Usage
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
import React, { useState } from 'react';
|
|
34
|
+
import {
|
|
35
|
+
Text,
|
|
36
|
+
View,
|
|
37
|
+
StyleSheet,
|
|
38
|
+
Button,
|
|
39
|
+
Alert,
|
|
40
|
+
} from 'react-native';
|
|
41
|
+
|
|
42
|
+
import BottomSheet from 'react-native-sheet-view';
|
|
43
|
+
|
|
44
|
+
const App = () => {
|
|
45
|
+
const [isBottomSheetVisible, setBottomSheetVisible] = useState(false);
|
|
46
|
+
|
|
47
|
+
const showBottomSheet = () => {
|
|
48
|
+
setBottomSheetVisible(true);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
const hideBottomSheet = () => {
|
|
52
|
+
setBottomSheetVisible(false);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
const options = [
|
|
56
|
+
'Option 1',
|
|
57
|
+
'Option 2',
|
|
58
|
+
'Option 3',
|
|
59
|
+
];
|
|
60
|
+
|
|
61
|
+
return (
|
|
62
|
+
<View
|
|
63
|
+
style={styles.container}
|
|
64
|
+
>
|
|
65
|
+
<Text>Example usage of your react-native-sheet-view component</Text>
|
|
66
|
+
|
|
67
|
+
<Button
|
|
68
|
+
title='Show Bottom Sheet'
|
|
69
|
+
onPress={showBottomSheet}
|
|
70
|
+
/>
|
|
71
|
+
|
|
72
|
+
<BottomSheet
|
|
73
|
+
visible={isBottomSheetVisible}
|
|
74
|
+
options={options}
|
|
75
|
+
onSelect={(index) => {
|
|
76
|
+
Alert.alert(
|
|
77
|
+
`${options[index]`,
|
|
78
|
+
`You selected ${options[index]}`,
|
|
79
|
+
[
|
|
80
|
+
{
|
|
81
|
+
text: 'OK',
|
|
82
|
+
},
|
|
83
|
+
],
|
|
84
|
+
)
|
|
85
|
+
}}
|
|
86
|
+
onCancel={hideBottomSheet}
|
|
87
|
+
showCancelText={true}
|
|
88
|
+
cancelText='Cancel'
|
|
89
|
+
headerTitle='Bottom Sheet'
|
|
90
|
+
/>
|
|
91
|
+
</View>
|
|
92
|
+
)
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
const styles = StyleSheet.create({
|
|
96
|
+
container: {
|
|
97
|
+
flex: 1,
|
|
98
|
+
backgroundColor: '#fff',
|
|
99
|
+
alignItems: 'center',
|
|
100
|
+
justifyContent: 'center',
|
|
101
|
+
},
|
|
102
|
+
})
|
|
103
|
+
|
|
104
|
+
export default App;
|
|
105
|
+
```
|
|
106
|
+
---
|
|
107
|
+
### Props
|
|
108
|
+
|
|
109
|
+
| Prop | Type | Required | Description |
|
|
110
|
+
| :--- | :--- | :--- | :--- |
|
|
111
|
+
| **visible** | *useState Hook* | ***Yes*** | Display or hide the bottom sheet |
|
|
112
|
+
| **options** | *string array* | ***Yes*** | Displays the options available for your bottom sheet |
|
|
113
|
+
| **onSelect** | *function* | ***Yes*** | Dispatches the action selected for the option once selected |
|
|
114
|
+
| **onCancel** | *function* | ***Yes*** | Dispatches the action canceled for the option already selected |
|
|
115
|
+
| **headerTitle** | *string* | No | Shows your input as the header title of your bottom sheet |
|
|
116
|
+
| **titleColor** | *string* | No | Change the color of your title text if you have a headerTitle |
|
|
117
|
+
| **showCancelText** | *boolean* | No | Shows the Cancel button detached below the bottom sheet |
|
|
118
|
+
| **cancelText** | *string* | No | Shows your input as the cancel text in the cancel button |
|
|
119
|
+
| **lineColor** | *string* | No | Change the color of the lines between each option |
|
|
120
|
+
| **backgroundColor** | *string* | No | Change the color of the background of your bottom sheet |
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
### headerTitle
|
|
125
|
+
|
|
126
|
+
> Shows your input as the header title of your bottom sheet
|
|
127
|
+
|
|
128
|
+
iOS | Android
|
|
129
|
+
:------------------:|:------------------:
|
|
130
|
+
 | 
|
|
131
|
+
|
|
132
|
+
```
|
|
133
|
+
<BottomSheet
|
|
134
|
+
visible={isBottomSheetVisible}
|
|
135
|
+
options={options}
|
|
136
|
+
onSelect={(index) => {
|
|
137
|
+
Alert.alert(
|
|
138
|
+
`${options[index]`,
|
|
139
|
+
`You selected ${options[index]}`,
|
|
140
|
+
[
|
|
141
|
+
{
|
|
142
|
+
text: 'OK',
|
|
143
|
+
},
|
|
144
|
+
],
|
|
145
|
+
)
|
|
146
|
+
}}
|
|
147
|
+
onCancel={hideBottomSheet}
|
|
148
|
+
headerTitle='Header Title'
|
|
149
|
+
/>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
---
|
|
153
|
+
|
|
154
|
+
### titleColor
|
|
155
|
+
> Change the color of your title text if you have a headerTitle
|
|
156
|
+
|
|
157
|
+
***You won't see any changes if you don't have a headerTitle***
|
|
158
|
+
|
|
159
|
+
iOS | Android
|
|
160
|
+
:------------------:|:------------------:
|
|
161
|
+
 | 
|
|
162
|
+
|
|
163
|
+
```
|
|
164
|
+
<BottomSheet
|
|
165
|
+
visible={isBottomSheetVisible}
|
|
166
|
+
options={options}
|
|
167
|
+
onSelect={(index) => {
|
|
168
|
+
Alert.alert(
|
|
169
|
+
`${options[index]`,
|
|
170
|
+
`You selected ${options[index]}`,
|
|
171
|
+
[
|
|
172
|
+
{
|
|
173
|
+
text: 'OK',
|
|
174
|
+
},
|
|
175
|
+
],
|
|
176
|
+
)
|
|
177
|
+
}}
|
|
178
|
+
onCancel={hideBottomSheet}
|
|
179
|
+
headerTitle='Header Title'
|
|
180
|
+
titleColor='purple'
|
|
181
|
+
/>
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
---
|
|
185
|
+
|
|
186
|
+
### showCancelText
|
|
187
|
+
> Shows the Cancel button detached below the bottom sheet
|
|
188
|
+
|
|
189
|
+
***Default: false***
|
|
190
|
+
|
|
191
|
+
iOS | Android
|
|
192
|
+
:------------------:|:------------------:
|
|
193
|
+
 | 
|
|
194
|
+
|
|
195
|
+
```
|
|
196
|
+
<BottomSheet
|
|
197
|
+
visible={isBottomSheetVisible}
|
|
198
|
+
options={options}
|
|
199
|
+
onSelect={(index) => {
|
|
200
|
+
Alert.alert(
|
|
201
|
+
`${options[index]`,
|
|
202
|
+
`You selected ${options[index]}`,
|
|
203
|
+
[
|
|
204
|
+
{
|
|
205
|
+
text: 'OK',
|
|
206
|
+
},
|
|
207
|
+
],
|
|
208
|
+
)
|
|
209
|
+
}}
|
|
210
|
+
onCancel={hideBottomSheet}
|
|
211
|
+
showCancelText={true}
|
|
212
|
+
/>
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
---
|
|
216
|
+
|
|
217
|
+
### cancelText
|
|
218
|
+
> Shows your input as the cancel text in the cancel button
|
|
219
|
+
|
|
220
|
+
***You won't see any changes if you don't have showCancelText set to true***
|
|
221
|
+
|
|
222
|
+
iOS | Android
|
|
223
|
+
:------------------:|:------------------:
|
|
224
|
+
 | 
|
|
225
|
+
|
|
226
|
+
```
|
|
227
|
+
<BottomSheet
|
|
228
|
+
visible={isBottomSheetVisible}
|
|
229
|
+
options={options}
|
|
230
|
+
onSelect={(index) => {
|
|
231
|
+
Alert.alert(
|
|
232
|
+
`${options[index]`,
|
|
233
|
+
`You selected ${options[index]}`,
|
|
234
|
+
[
|
|
235
|
+
{
|
|
236
|
+
text: 'OK',
|
|
237
|
+
},
|
|
238
|
+
],
|
|
239
|
+
)
|
|
240
|
+
}}
|
|
241
|
+
onCancel={hideBottomSheet}
|
|
242
|
+
showCancelText={true}
|
|
243
|
+
cancelText='Cancelar' // <- Spanish word for 'Cancel'
|
|
244
|
+
/>
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
---
|
|
248
|
+
|
|
249
|
+
### lineColor
|
|
250
|
+
> Change the color of the lines between each option
|
|
251
|
+
|
|
252
|
+
iOS | Android
|
|
253
|
+
:------------------:|:------------------:
|
|
254
|
+
 | 
|
|
255
|
+
|
|
256
|
+
```
|
|
257
|
+
<BottomSheet
|
|
258
|
+
visible={isBottomSheetVisible}
|
|
259
|
+
options={options}
|
|
260
|
+
onSelect={(index) => {
|
|
261
|
+
Alert.alert(
|
|
262
|
+
`${options[index]`,
|
|
263
|
+
`You selected ${options[index]}`,
|
|
264
|
+
[
|
|
265
|
+
{
|
|
266
|
+
text: 'OK',
|
|
267
|
+
},
|
|
268
|
+
],
|
|
269
|
+
)
|
|
270
|
+
}}
|
|
271
|
+
onCancel={hideBottomSheet}
|
|
272
|
+
lineColor='red'
|
|
273
|
+
/>
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
---
|
|
277
|
+
|
|
278
|
+
### backgroundColor
|
|
279
|
+
> Change the color of the background of your bottom sheet
|
|
280
|
+
|
|
281
|
+
iOS | Android
|
|
282
|
+
:------------------:|:------------------:
|
|
283
|
+
 | 
|
|
284
|
+
|
|
285
|
+
```
|
|
286
|
+
<BottomSheet
|
|
287
|
+
visible={isBottomSheetVisible}
|
|
288
|
+
options={options}
|
|
289
|
+
onSelect={(index) => {
|
|
290
|
+
Alert.alert(
|
|
291
|
+
`${options[index]`,
|
|
292
|
+
`You selected ${options[index]}`,
|
|
293
|
+
[
|
|
294
|
+
{
|
|
295
|
+
text: 'OK',
|
|
296
|
+
},
|
|
297
|
+
],
|
|
298
|
+
)
|
|
299
|
+
}}
|
|
300
|
+
onCancel={hideBottomSheet}
|
|
301
|
+
backgroundColor='purple'
|
|
302
|
+
/>
|
|
303
|
+
```
|
|
304
|
+
|
|
305
|
+
---
|
|
306
|
+
|
|
307
|
+
## License
|
|
308
|
+
React Native Sheet View is under the **MIT License**. See bundled <a href='https://github.com/cartagenae/react-native-sheet-view/blob/main/LICENSE' alt='license file'>**LICENSE**</a> file for details.
|
package/package.json
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "react-native-sheet-view",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A bottom sheet component for react native",
|
|
5
|
+
"main": "BottomSheet.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
+
},
|
|
9
|
+
"author": "Eric Cartagena",
|
|
10
|
+
"license": "MIT",
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"react": "^18.2.0",
|
|
13
|
+
"react-native": "^0.72.5",
|
|
14
|
+
"react-native-modal": "^13.0.1"
|
|
15
|
+
}
|
|
16
|
+
}
|