@teamnhz/rn-ui-toolkit 1.3.6 → 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/dist/components/Modal/index.js +50 -15
- package/package.json +1 -1
|
@@ -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;
|