react-native-boxes 1.4.7 → 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 +27 -13
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
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useContext, useEffect, useRef, useState } from 'react';
|
|
3
3
|
import { Animated, Button, Easing, LayoutChangeEvent, Linking, Modal, Platform, Pressable, ScrollView, StyleProp, StyleSheet, TextStyle, TouchableHighlight, TouchableOpacity, View, ViewProps } from 'react-native';
|
|
4
|
-
import { Icon, IconProps } from './Image';
|
|
4
|
+
import { getIcon, Icon, IconProps } from './Image';
|
|
5
5
|
import { getNavParamsFromDeeplink, isDesktop, isWeb } from './utils';
|
|
6
6
|
import { ThemeContext } from './ThemeContext';
|
|
7
7
|
import { Center, HBox, VBox, VPage } from './Box';
|
|
@@ -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 = {
|
|
@@ -18,6 +19,9 @@ export type BottomSheetProps = {
|
|
|
18
19
|
cancellable?: boolean
|
|
19
20
|
children: any
|
|
20
21
|
onDismiss?: Function
|
|
22
|
+
backgroundColor?: string
|
|
23
|
+
closeIcon?: string | React.ReactNode
|
|
24
|
+
|
|
21
25
|
}
|
|
22
26
|
export const BottomSheet = (props: BottomSheetProps) => {
|
|
23
27
|
const [modalVisible, setModalVisible] = useState(false);
|
|
@@ -36,6 +40,14 @@ export const BottomSheet = (props: BottomSheetProps) => {
|
|
|
36
40
|
}
|
|
37
41
|
}
|
|
38
42
|
|
|
43
|
+
const CloseIcon = getIcon(props.closeIcon) || (() => {
|
|
44
|
+
return (<Icon color={theme.colors.caption} name="close" />)
|
|
45
|
+
})
|
|
46
|
+
const fling = Gesture.Fling()
|
|
47
|
+
.direction(Directions.UP | Directions.DOWN)
|
|
48
|
+
.onEnd(() => {
|
|
49
|
+
props.onDismiss && props.onDismiss()
|
|
50
|
+
})
|
|
39
51
|
return (
|
|
40
52
|
<View style={styles.container}>
|
|
41
53
|
<Modal
|
|
@@ -75,7 +87,7 @@ export const BottomSheet = (props: BottomSheetProps) => {
|
|
|
75
87
|
onRequestClose={() => cancel()}
|
|
76
88
|
>
|
|
77
89
|
<View style={[styles.modalContainer, {
|
|
78
|
-
backgroundColor: theme.colors.forground
|
|
90
|
+
backgroundColor: props.backgroundColor || theme.colors.forground
|
|
79
91
|
}]}>
|
|
80
92
|
<View style={[{
|
|
81
93
|
paddingTop: theme.dimens.space.md,
|
|
@@ -102,8 +114,7 @@ export const BottomSheet = (props: BottomSheetProps) => {
|
|
|
102
114
|
onPress={() => {
|
|
103
115
|
cancel()
|
|
104
116
|
}}>
|
|
105
|
-
<
|
|
106
|
-
color={theme.colors.caption} name="close" />
|
|
117
|
+
<CloseIcon />
|
|
107
118
|
</TouchableOpacity>) : (
|
|
108
119
|
<View style={{ width: theme.dimens.icon.md }} />
|
|
109
120
|
)
|
|
@@ -112,15 +123,18 @@ export const BottomSheet = (props: BottomSheetProps) => {
|
|
|
112
123
|
<VBox style={{
|
|
113
124
|
width: '100%'
|
|
114
125
|
}}>
|
|
115
|
-
<
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
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
|
+
|
|
124
138
|
</VBox>
|
|
125
139
|
</View>
|
|
126
140
|
</View>
|