react-native-boxes 1.4.8 → 1.4.10
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 +4 -2
- package/package.json +2 -1
- package/src/Modal.tsx +26 -10
package/README.md
CHANGED
|
@@ -7,11 +7,13 @@ npm install react-native-boxes
|
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
### Dependencies
|
|
10
|
+
|
|
10
11
|
Make sure you have following dependencies installed. The versions can be satisfying version but must not have ny breaking changes.
|
|
11
12
|
|
|
12
13
|
```
|
|
13
14
|
"@expo/vector-icons": "^13.0.0",
|
|
14
15
|
"react": "^18.2.0",
|
|
15
16
|
"react-native": "^0.73.6",
|
|
16
|
-
"react-native-safe-area-context": "^4.9.0"
|
|
17
|
-
|
|
17
|
+
"react-native-safe-area-context": "^4.9.0",
|
|
18
|
+
"react-native-gesture-handler":"~2.14.0"
|
|
19
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-boxes",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.10",
|
|
4
4
|
"description": "A react native library for rapid development of UI using boxes",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"@types/react": "^18.2.71",
|
|
31
31
|
"react": "^18.2.0",
|
|
32
32
|
"react-native": "^0.73.6",
|
|
33
|
+
"react-native-gesture-handler": "^2.17.1",
|
|
33
34
|
"react-native-safe-area-context": "^4.9.0",
|
|
34
35
|
"typescript": "^5.4.3"
|
|
35
36
|
},
|
package/src/Modal.tsx
CHANGED
|
@@ -10,6 +10,7 @@ import { ButtonView, ButtonViewProps, LoadingButton, PressableView, TertiaryButt
|
|
|
10
10
|
import { CompositeTextInputView } from './Input';
|
|
11
11
|
import * as WebBrowser from 'expo-web-browser';
|
|
12
12
|
import { TransparentCenterToolbar } from './Bar';
|
|
13
|
+
import { GestureDetector, Gesture, Directions } from 'react-native-gesture-handler';
|
|
13
14
|
|
|
14
15
|
|
|
15
16
|
export type BottomSheetProps = {
|
|
@@ -20,6 +21,7 @@ export type BottomSheetProps = {
|
|
|
20
21
|
onDismiss?: Function
|
|
21
22
|
backgroundColor?: string
|
|
22
23
|
closeIcon?: string | React.ReactNode
|
|
24
|
+
swipeToCloseDisabled?: boolean
|
|
23
25
|
|
|
24
26
|
}
|
|
25
27
|
export const BottomSheet = (props: BottomSheetProps) => {
|
|
@@ -42,7 +44,11 @@ export const BottomSheet = (props: BottomSheetProps) => {
|
|
|
42
44
|
const CloseIcon = getIcon(props.closeIcon) || (() => {
|
|
43
45
|
return (<Icon color={theme.colors.caption} name="close" />)
|
|
44
46
|
})
|
|
45
|
-
|
|
47
|
+
const fling = Gesture.Fling()
|
|
48
|
+
.direction(Directions.DOWN)
|
|
49
|
+
.onEnd(() => {
|
|
50
|
+
props.onDismiss && props.onDismiss()
|
|
51
|
+
})
|
|
46
52
|
return (
|
|
47
53
|
<View style={styles.container}>
|
|
48
54
|
<Modal
|
|
@@ -118,15 +124,25 @@ export const BottomSheet = (props: BottomSheetProps) => {
|
|
|
118
124
|
<VBox style={{
|
|
119
125
|
width: '100%'
|
|
120
126
|
}}>
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
127
|
+
{
|
|
128
|
+
props.swipeToCloseDisabled ? (
|
|
129
|
+
<ScrollView
|
|
130
|
+
nestedScrollEnabled={true}
|
|
131
|
+
showsVerticalScrollIndicator={false}
|
|
132
|
+
style={{
|
|
133
|
+
flex: 1,
|
|
134
|
+
maxHeight: 500,
|
|
135
|
+
}}>
|
|
136
|
+
{props.children}
|
|
137
|
+
</ScrollView>
|
|
138
|
+
) : (
|
|
139
|
+
<GestureDetector gesture={fling}>
|
|
140
|
+
{props.children}
|
|
141
|
+
</GestureDetector>
|
|
142
|
+
)
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
|
|
130
146
|
</VBox>
|
|
131
147
|
</View>
|
|
132
148
|
</View>
|