react-native-sheet-view 1.0.6 → 1.0.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/BottomSheet.js +112 -132
- package/LICENSE +1 -1
- package/README.md +7 -7
- package/package.json +5 -5
package/BottomSheet.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
2
|
import {
|
|
3
3
|
View,
|
|
4
4
|
Pressable,
|
|
@@ -11,21 +11,76 @@ import Modal from 'react-native-modal';
|
|
|
11
11
|
|
|
12
12
|
const BottomSheet = ({
|
|
13
13
|
visible,
|
|
14
|
-
options,
|
|
14
|
+
options = [],
|
|
15
15
|
onCancel,
|
|
16
16
|
onSelect,
|
|
17
|
-
cancelText,
|
|
17
|
+
cancelText = 'Cancel',
|
|
18
18
|
headerTitle,
|
|
19
|
-
backgroundColor,
|
|
20
|
-
showCancelText,
|
|
21
|
-
lineColor,
|
|
22
|
-
titleColor,
|
|
19
|
+
backgroundColor = '#fff',
|
|
20
|
+
showCancelText = false,
|
|
21
|
+
lineColor = 'lightgray',
|
|
22
|
+
titleColor = '#000',
|
|
23
23
|
}) => {
|
|
24
24
|
const handleSelectOption = (index) => {
|
|
25
|
-
onSelect(index);
|
|
26
|
-
onCancel();
|
|
25
|
+
onSelect?.(index);
|
|
26
|
+
onCancel?.();
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
+
// Memoize dynamic styles for better performance with React 19
|
|
30
|
+
const containerStyle = useMemo(() => [
|
|
31
|
+
styles.container,
|
|
32
|
+
{
|
|
33
|
+
marginBottom: Platform.OS === 'ios'
|
|
34
|
+
? 40
|
|
35
|
+
: 0,
|
|
36
|
+
width: Platform.OS === 'ios'
|
|
37
|
+
? '95%'
|
|
38
|
+
: '100%',
|
|
39
|
+
}
|
|
40
|
+
], []);
|
|
41
|
+
|
|
42
|
+
const contentContainerStyle = useMemo(() => ({
|
|
43
|
+
backgroundColor,
|
|
44
|
+
borderRadius: Platform.OS === 'ios'
|
|
45
|
+
? 10
|
|
46
|
+
: 0,
|
|
47
|
+
}), [backgroundColor]);
|
|
48
|
+
|
|
49
|
+
const titleContainerStyle = useMemo(() => [
|
|
50
|
+
styles.title,
|
|
51
|
+
{
|
|
52
|
+
borderTopLeftRadius: Platform.OS === 'ios'
|
|
53
|
+
? 10
|
|
54
|
+
: 0,
|
|
55
|
+
borderTopRightRadius: Platform.OS === 'ios'
|
|
56
|
+
? 10
|
|
57
|
+
: 0,
|
|
58
|
+
borderBottomWidth: 1,
|
|
59
|
+
borderBottomColor: lineColor,
|
|
60
|
+
}
|
|
61
|
+
], [lineColor]);
|
|
62
|
+
|
|
63
|
+
const titleTextStyle = useMemo(() => ({
|
|
64
|
+
fontSize: 12,
|
|
65
|
+
color: titleColor,
|
|
66
|
+
}), [titleColor]);
|
|
67
|
+
|
|
68
|
+
const cancelContainerStyle = useMemo(() => ({
|
|
69
|
+
backgroundColor,
|
|
70
|
+
borderRadius: Platform.OS === 'ios'
|
|
71
|
+
? 10
|
|
72
|
+
: 0,
|
|
73
|
+
borderColor: 'gray',
|
|
74
|
+
}), [backgroundColor]);
|
|
75
|
+
|
|
76
|
+
const cancelTextStyle = useMemo(() => ({
|
|
77
|
+
color: Platform.OS === 'ios'
|
|
78
|
+
? '#2b70de'
|
|
79
|
+
: 'red',
|
|
80
|
+
fontWeight: '600',
|
|
81
|
+
fontSize: 20,
|
|
82
|
+
}), []);
|
|
83
|
+
|
|
29
84
|
return (
|
|
30
85
|
<Modal
|
|
31
86
|
isVisible={visible}
|
|
@@ -35,149 +90,66 @@ const BottomSheet = ({
|
|
|
35
90
|
animationOut='slideOutDown'
|
|
36
91
|
animationOutTiming={500}
|
|
37
92
|
>
|
|
38
|
-
<View
|
|
39
|
-
style={
|
|
40
|
-
styles.container,
|
|
41
|
-
{
|
|
42
|
-
marginBottom: Platform.OS === 'ios'
|
|
43
|
-
? 40
|
|
44
|
-
: 0,
|
|
45
|
-
width: Platform.OS === 'ios'
|
|
46
|
-
? '95%'
|
|
47
|
-
: '100%'
|
|
48
|
-
}
|
|
49
|
-
]}
|
|
50
|
-
>
|
|
51
|
-
<View
|
|
52
|
-
style={{
|
|
53
|
-
backgroundColor: backgroundColor !== undefined
|
|
54
|
-
? backgroundColor
|
|
55
|
-
: '#fff',
|
|
56
|
-
borderRadius: Platform.OS === 'ios'
|
|
57
|
-
? 10
|
|
58
|
-
: 0,
|
|
59
|
-
}}
|
|
60
|
-
>
|
|
93
|
+
<View style={containerStyle}>
|
|
94
|
+
<View style={contentContainerStyle}>
|
|
61
95
|
{
|
|
62
|
-
headerTitle
|
|
63
|
-
<View
|
|
64
|
-
style={
|
|
65
|
-
styles.title,
|
|
66
|
-
{
|
|
67
|
-
borderTopLeftRadius: Platform.OS === 'ios'
|
|
68
|
-
? 10
|
|
69
|
-
: 0,
|
|
70
|
-
borderTopRightRadius: Platform.OS === 'ios'
|
|
71
|
-
? 10
|
|
72
|
-
: 0,
|
|
73
|
-
borderBottomWidth: 1,
|
|
74
|
-
borderBottomColor: lineColor !== undefined
|
|
75
|
-
? lineColor
|
|
76
|
-
: 'lightgray',
|
|
77
|
-
}
|
|
78
|
-
]}
|
|
79
|
-
>
|
|
80
|
-
<Text
|
|
81
|
-
style={{
|
|
82
|
-
fontSize: 12,
|
|
83
|
-
color: titleColor !== undefined
|
|
84
|
-
? titleColor
|
|
85
|
-
: '#fff'
|
|
86
|
-
}}
|
|
87
|
-
>
|
|
96
|
+
headerTitle && (
|
|
97
|
+
<View style={titleContainerStyle}>
|
|
98
|
+
<Text style={titleTextStyle}>
|
|
88
99
|
{headerTitle}
|
|
89
100
|
</Text>
|
|
90
101
|
</View>
|
|
91
|
-
)
|
|
102
|
+
)
|
|
92
103
|
}
|
|
93
104
|
{
|
|
94
|
-
options.map((option, index) =>
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
: 'lightgray'
|
|
114
|
-
}
|
|
115
|
-
]}
|
|
116
|
-
onPress={() => (
|
|
117
|
-
handleSelectOption(index)
|
|
118
|
-
)}
|
|
119
|
-
>
|
|
120
|
-
<Text
|
|
121
|
-
style={{
|
|
122
|
-
color: '#2b70de',
|
|
123
|
-
fontWeight: 500,
|
|
124
|
-
fontSize: 20,
|
|
125
|
-
}}
|
|
105
|
+
options.map((option, index) => {
|
|
106
|
+
const isLastOption = index === options.length - 1;
|
|
107
|
+
const optionStyle = [
|
|
108
|
+
styles.option,
|
|
109
|
+
{
|
|
110
|
+
borderBottomWidth: Platform.OS === 'ios'
|
|
111
|
+
? (isLastOption ? 0 : 1)
|
|
112
|
+
: 1,
|
|
113
|
+
borderBottomColor: Platform.OS === 'ios'
|
|
114
|
+
? (isLastOption ? null : lineColor)
|
|
115
|
+
: lineColor,
|
|
116
|
+
}
|
|
117
|
+
];
|
|
118
|
+
|
|
119
|
+
return (
|
|
120
|
+
<Pressable
|
|
121
|
+
key={`option-${index}-${option}`}
|
|
122
|
+
style={optionStyle}
|
|
123
|
+
onPress={() => handleSelectOption(index)}
|
|
126
124
|
>
|
|
127
|
-
{
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
125
|
+
<Text style={styles.optionText}>
|
|
126
|
+
{option}
|
|
127
|
+
</Text>
|
|
128
|
+
</Pressable>
|
|
129
|
+
);
|
|
130
|
+
})
|
|
131
131
|
}
|
|
132
132
|
</View>
|
|
133
133
|
|
|
134
134
|
{
|
|
135
|
-
Platform.OS === 'ios' && (
|
|
136
|
-
<View
|
|
137
|
-
|
|
138
|
-
height: 15
|
|
139
|
-
}}
|
|
140
|
-
/>
|
|
141
|
-
))
|
|
135
|
+
Platform.OS === 'ios' && (
|
|
136
|
+
<View style={styles.spacer} />
|
|
137
|
+
)
|
|
142
138
|
}
|
|
143
139
|
|
|
144
140
|
{
|
|
145
|
-
showCancelText
|
|
146
|
-
<View
|
|
147
|
-
style={{
|
|
148
|
-
backgroundColor: backgroundColor !== undefined
|
|
149
|
-
? backgroundColor
|
|
150
|
-
: '#fff',
|
|
151
|
-
borderRadius: Platform.OS === 'ios'
|
|
152
|
-
? 10
|
|
153
|
-
: 0,
|
|
154
|
-
borderColor: 'gray',
|
|
155
|
-
}}
|
|
156
|
-
>
|
|
141
|
+
showCancelText && (
|
|
142
|
+
<View style={cancelContainerStyle}>
|
|
157
143
|
<Pressable
|
|
158
|
-
style={
|
|
159
|
-
styles.cancelButton,
|
|
160
|
-
]}
|
|
144
|
+
style={styles.cancelButton}
|
|
161
145
|
onPress={onCancel}
|
|
162
146
|
>
|
|
163
|
-
<Text
|
|
164
|
-
|
|
165
|
-
color: Platform.OS === 'ios'
|
|
166
|
-
? '#2b70de'
|
|
167
|
-
: 'red',
|
|
168
|
-
fontWeight: 600,
|
|
169
|
-
fontSize: 20,
|
|
170
|
-
}}
|
|
171
|
-
>
|
|
172
|
-
{
|
|
173
|
-
cancelText !== undefined
|
|
174
|
-
? cancelText
|
|
175
|
-
: 'Cancel'
|
|
176
|
-
}
|
|
147
|
+
<Text style={cancelTextStyle}>
|
|
148
|
+
{cancelText}
|
|
177
149
|
</Text>
|
|
178
150
|
</Pressable>
|
|
179
151
|
</View>
|
|
180
|
-
)
|
|
152
|
+
)
|
|
181
153
|
}
|
|
182
154
|
</View>
|
|
183
155
|
</Modal>
|
|
@@ -206,11 +178,19 @@ const styles = StyleSheet.create({
|
|
|
206
178
|
alignItems: 'center',
|
|
207
179
|
justifyContent: 'center',
|
|
208
180
|
},
|
|
181
|
+
optionText: {
|
|
182
|
+
color: '#2b70de',
|
|
183
|
+
fontWeight: '500',
|
|
184
|
+
fontSize: 20,
|
|
185
|
+
},
|
|
209
186
|
cancelButton: {
|
|
210
187
|
padding: 15,
|
|
211
188
|
alignItems: 'center',
|
|
212
189
|
justifyContent: 'center',
|
|
213
190
|
},
|
|
191
|
+
spacer: {
|
|
192
|
+
height: 15,
|
|
193
|
+
},
|
|
214
194
|
});
|
|
215
195
|
|
|
216
196
|
export default BottomSheet;
|
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -73,7 +73,7 @@ const App = () => {
|
|
|
73
73
|
options={options}
|
|
74
74
|
onSelect={(index) => {
|
|
75
75
|
Alert.alert(
|
|
76
|
-
`${options[index]`,
|
|
76
|
+
`${options[index]}`,
|
|
77
77
|
`You selected ${options[index]}`,
|
|
78
78
|
[
|
|
79
79
|
{
|
|
@@ -136,7 +136,7 @@ iOS | Android
|
|
|
136
136
|
options={options}
|
|
137
137
|
onSelect={(index) => {
|
|
138
138
|
Alert.alert(
|
|
139
|
-
`${options[index]`,
|
|
139
|
+
`${options[index]}`,
|
|
140
140
|
`You selected ${options[index]}`,
|
|
141
141
|
[
|
|
142
142
|
{
|
|
@@ -169,7 +169,7 @@ iOS | Android
|
|
|
169
169
|
options={options}
|
|
170
170
|
onSelect={(index) => {
|
|
171
171
|
Alert.alert(
|
|
172
|
-
`${options[index]`,
|
|
172
|
+
`${options[index]}`,
|
|
173
173
|
`You selected ${options[index]}`,
|
|
174
174
|
[
|
|
175
175
|
{
|
|
@@ -203,7 +203,7 @@ iOS | Android
|
|
|
203
203
|
options={options}
|
|
204
204
|
onSelect={(index) => {
|
|
205
205
|
Alert.alert(
|
|
206
|
-
`${options[index]`,
|
|
206
|
+
`${options[index]}`,
|
|
207
207
|
`You selected ${options[index]}`,
|
|
208
208
|
[
|
|
209
209
|
{
|
|
@@ -236,7 +236,7 @@ iOS | Android
|
|
|
236
236
|
options={options}
|
|
237
237
|
onSelect={(index) => {
|
|
238
238
|
Alert.alert(
|
|
239
|
-
`${options[index]`,
|
|
239
|
+
`${options[index]}`,
|
|
240
240
|
`You selected ${options[index]}`,
|
|
241
241
|
[
|
|
242
242
|
{
|
|
@@ -268,7 +268,7 @@ iOS | Android
|
|
|
268
268
|
options={options}
|
|
269
269
|
onSelect={(index) => {
|
|
270
270
|
Alert.alert(
|
|
271
|
-
`${options[index]`,
|
|
271
|
+
`${options[index]}`,
|
|
272
272
|
`You selected ${options[index]}`,
|
|
273
273
|
[
|
|
274
274
|
{
|
|
@@ -299,7 +299,7 @@ iOS | Android
|
|
|
299
299
|
options={options}
|
|
300
300
|
onSelect={(index) => {
|
|
301
301
|
Alert.alert(
|
|
302
|
-
`${options[index]`,
|
|
302
|
+
`${options[index]}`,
|
|
303
303
|
`You selected ${options[index]}`,
|
|
304
304
|
[
|
|
305
305
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-sheet-view",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"description": "A bottom sheet component for react native",
|
|
5
5
|
"main": "BottomSheet.js",
|
|
6
6
|
"scripts": {
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
"author": "Eric Cartagena",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"react": "^
|
|
13
|
-
"react-native": "^0.
|
|
14
|
-
"react-native-modal": "^
|
|
12
|
+
"react": "^19.1.0",
|
|
13
|
+
"react-native": "^0.79.5",
|
|
14
|
+
"react-native-modal": "^14.0.0-rc.1"
|
|
15
15
|
}
|
|
16
|
-
}
|
|
16
|
+
}
|