react-native-boxes 1.4.8 → 1.4.9
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 +18 -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.9",
|
|
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 = {
|
|
@@ -42,7 +43,11 @@ export const BottomSheet = (props: BottomSheetProps) => {
|
|
|
42
43
|
const CloseIcon = getIcon(props.closeIcon) || (() => {
|
|
43
44
|
return (<Icon color={theme.colors.caption} name="close" />)
|
|
44
45
|
})
|
|
45
|
-
|
|
46
|
+
const fling = Gesture.Fling()
|
|
47
|
+
.direction(Directions.UP | Directions.DOWN)
|
|
48
|
+
.onEnd(() => {
|
|
49
|
+
props.onDismiss && props.onDismiss()
|
|
50
|
+
})
|
|
46
51
|
return (
|
|
47
52
|
<View style={styles.container}>
|
|
48
53
|
<Modal
|
|
@@ -118,15 +123,18 @@ export const BottomSheet = (props: BottomSheetProps) => {
|
|
|
118
123
|
<VBox style={{
|
|
119
124
|
width: '100%'
|
|
120
125
|
}}>
|
|
121
|
-
<
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
126
|
+
<GestureDetector gesture={fling}>
|
|
127
|
+
<ScrollView
|
|
128
|
+
nestedScrollEnabled={true}
|
|
129
|
+
showsVerticalScrollIndicator={false}
|
|
130
|
+
style={{
|
|
131
|
+
flex: 1,
|
|
132
|
+
maxHeight: 500,
|
|
133
|
+
}}>
|
|
134
|
+
{props.children}
|
|
135
|
+
</ScrollView>
|
|
136
|
+
</GestureDetector>
|
|
137
|
+
|
|
130
138
|
</VBox>
|
|
131
139
|
</View>
|
|
132
140
|
</View>
|