@teamnhz/rn-ui-toolkit 1.3.5 → 1.3.7
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 +0 -1
- package/dist/components/Input/index.js +1 -1
- package/dist/components/Modal/index.js +50 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -166,7 +166,6 @@ Required for **ImagePicker** and **DocumentPicker**:
|
|
|
166
166
|
```xml
|
|
167
167
|
<uses-permission android:name="android.permission.INTERNET" />
|
|
168
168
|
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
|
|
169
|
-
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
|
|
170
169
|
<uses-permission android:name="android.permission.INTERNET" />
|
|
171
170
|
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
|
|
172
171
|
<uses-permission android:name="android.permission.CAMERA"/>
|
|
@@ -94,7 +94,7 @@ const Input = ({ intlType, textKey, placeholder, inputPlaceholderTextColor, left
|
|
|
94
94
|
], placeholder: translatedPlaceholder, placeholderTextColor: inputPlaceholderTextColor
|
|
95
95
|
? inputPlaceholderTextColor
|
|
96
96
|
: Colors.textGrey, editable: editable, secureTextEntry: secureText, keyboardType: keyboardType, value: value, onChangeText: handleChangeText, onFocus: handleFocus, onBlur: handleBlur, multiline: multiline, maxLength: maxLength, returnKeyType: returnKeyType, ...rest }),
|
|
97
|
-
type === "password" && rightIcon ? (React.createElement(TouchableOpacity, { onPress: () => setSecureText(!secureText), style: [styles.iconWrapper, rightIconWrapperStyle] },
|
|
97
|
+
type === "password" && !rightIcon ? (React.createElement(TouchableOpacity, { onPress: () => setSecureText(!secureText), style: [styles.iconWrapper, rightIconWrapperStyle] },
|
|
98
98
|
React.createElement(Image, { source: secureText ? Images.Eyeoff : Images.Eyeon, style: [styles.icon, rightIconStyle], resizeMode: "contain" }))) : (rightIcon && (React.createElement(TouchableOpacity, { onPress: onRightIconPress, disabled: !onRightIconPress, style: [styles.iconWrapper, rightIconWrapperStyle] },
|
|
99
99
|
React.createElement(Image, { source: rightIcon, style: [styles.icon, rightIconStyle], resizeMode: "contain" }))))),
|
|
100
100
|
showError && isError && (React.createElement(Text, { style: [styles.errorText, errorTextStyle] }, showError))));
|
|
@@ -1,33 +1,68 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import Modal from "react-native-modal";
|
|
3
|
-
// Base Modal Component customized for app needs
|
|
4
|
-
const Modals = ({ children, closing, bkO = 0.5, ...props }) => (React.createElement(Modal, { backdropOpacity: bkO, animationInTiming: 400, animationOutTiming: 400, backdropTransitionOutTiming: 0, swipeDirection: ["down", "left", "right", "up"], onSwipeComplete: closing, onBackdropPress: closing, onBackButtonPress: closing, ...props }, children));
|
|
5
|
-
export default Modals;
|
|
6
|
-
// import React, { ReactNode } from 'react';
|
|
7
|
-
// import Modal, { ModalProps } from 'react-native-modal';
|
|
1
|
+
// import React, { ReactNode } from "react";
|
|
2
|
+
// import Modal, { ModalProps } from "react-native-modal";
|
|
8
3
|
// type AppModalProps = Partial<ModalProps> & {
|
|
9
4
|
// children: ReactNode;
|
|
10
5
|
// closing: () => void;
|
|
11
6
|
// bkO?: number;
|
|
12
7
|
// };
|
|
13
8
|
// // Base Modal Component customized for app needs
|
|
14
|
-
// const Modals = ({
|
|
15
|
-
// children,
|
|
16
|
-
// closing,
|
|
17
|
-
// bkO = 0.5,
|
|
18
|
-
// ...props
|
|
19
|
-
// }: AppModalProps) => (
|
|
9
|
+
// const Modals = ({ children, closing, bkO = 0.5, ...props }: AppModalProps) => (
|
|
20
10
|
// <Modal
|
|
21
11
|
// backdropOpacity={bkO}
|
|
22
12
|
// animationInTiming={400}
|
|
23
13
|
// animationOutTiming={400}
|
|
24
14
|
// backdropTransitionOutTiming={0}
|
|
25
|
-
// swipeDirection={[
|
|
15
|
+
// swipeDirection={["down", "left", "right", "up"]}
|
|
26
16
|
// onSwipeComplete={closing}
|
|
27
17
|
// onBackdropPress={closing}
|
|
28
18
|
// onBackButtonPress={closing}
|
|
29
|
-
// {...props}
|
|
19
|
+
// {...props}
|
|
20
|
+
// >
|
|
30
21
|
// {children}
|
|
31
22
|
// </Modal>
|
|
32
23
|
// );
|
|
33
24
|
// export default Modals;
|
|
25
|
+
// // import React, { ReactNode } from 'react';
|
|
26
|
+
// // import Modal, { ModalProps } from 'react-native-modal';
|
|
27
|
+
// // type AppModalProps = Partial<ModalProps> & {
|
|
28
|
+
// // children: ReactNode;
|
|
29
|
+
// // closing: () => void;
|
|
30
|
+
// // bkO?: number;
|
|
31
|
+
// // };
|
|
32
|
+
// // // Base Modal Component customized for app needs
|
|
33
|
+
// // const Modals = ({
|
|
34
|
+
// // children,
|
|
35
|
+
// // closing,
|
|
36
|
+
// // bkO = 0.5,
|
|
37
|
+
// // ...props
|
|
38
|
+
// // }: AppModalProps) => (
|
|
39
|
+
// // <Modal
|
|
40
|
+
// // backdropOpacity={bkO}
|
|
41
|
+
// // animationInTiming={400}
|
|
42
|
+
// // animationOutTiming={400}
|
|
43
|
+
// // backdropTransitionOutTiming={0}
|
|
44
|
+
// // swipeDirection={['down', 'left', 'right', 'up']}
|
|
45
|
+
// // onSwipeComplete={closing}
|
|
46
|
+
// // onBackdropPress={closing}
|
|
47
|
+
// // onBackButtonPress={closing}
|
|
48
|
+
// // {...props}>
|
|
49
|
+
// // {children}
|
|
50
|
+
// // </Modal>
|
|
51
|
+
// // );
|
|
52
|
+
// // export default Modals;
|
|
53
|
+
import React from "react";
|
|
54
|
+
import { View, StyleSheet } from "react-native";
|
|
55
|
+
import Modal from "react-native-modal";
|
|
56
|
+
const Modals = ({ children, closing, bkO = 0.5, ...props }) => (React.createElement(Modal, { useNativeDriver: true, useNativeDriverForBackdrop: true, backdropOpacity: bkO, animationInTiming: 300, animationOutTiming: 300, onBackdropPress: closing, onBackButtonPress: closing, swipeDirection: ["down"], onSwipeComplete: closing, propagateSwipe: true, ...props },
|
|
57
|
+
React.createElement(View, { style: styles.innerContainer }, children)));
|
|
58
|
+
const styles = StyleSheet.create({
|
|
59
|
+
innerContainer: {
|
|
60
|
+
width: "100%",
|
|
61
|
+
alignSelf: "center",
|
|
62
|
+
justifyContent: "center",
|
|
63
|
+
// MOST IMPORTANT FIX ⚠️
|
|
64
|
+
// Prevents children from being animated up/down
|
|
65
|
+
transform: [{ translateY: 0 }],
|
|
66
|
+
},
|
|
67
|
+
});
|
|
68
|
+
export default Modals;
|