Extend react-native-dialog with react-native-modal types (#37700)

* Extend react-native-dialog with react-native-modal types

* style change

* minor change

types/react-native-dialog/index.d.ts

@@ -1,8 +1,9 @@
-// Type definitions for react-native-dialog 5.5
+// Type definitions for react-native-dialog 5.6
 // Project: https://github.com/mmazzarolo/react-native-dialog
 // Definitions by: MrLuje <https://github.com/MrLuje>
 //                 Stack Builders <https://github.com/stackbuilders>
 //                 Esteban Ibarra <https://github.com/ibarrae>
+//                 Yaron Malin <https://github.com/yaron1m>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -14,6 +15,7 @@ import {
     TextInputProps,
     ViewStyle
 } from "react-native";
+import * as reactNativeModal from 'react-native-modal';
 
 interface ButtonProps {
     label: string;
@@ -59,11 +61,13 @@ interface DescriptionProps {
     children: string;
 }
 
+type reactNativeModalContainerProps = Pick<reactNativeModal.ModalProps, Exclude<keyof reactNativeModal.ModalProps, "isVisible">>;
+
 export namespace Dialog {
     class Button extends PureComponent<
         ButtonProps & ViewProps & TextProps
     > {}
-    class Container extends PureComponent<ContainerProps & ViewProps> {}
+    class Container extends PureComponent<ContainerProps & ViewProps & reactNativeModalContainerProps> {}
     class Title extends PureComponent<
         TitleProps & ViewProps & TextProps
     > {}

types/react-native-dialog/package.json

@@ -0,0 +1,6 @@
+{
+    "private": true,
+    "dependencies": {
+        "react-native-modal": ">=9.0.0"
+    }
+}

types/react-native-dialog/react-native-dialog-tests.tsx

@@ -17,30 +17,19 @@ class Example extends Component {
     }
 
     singleButton() {
-        return (<Dialog.Button label="Click" onPress={() => null} />);
+        return <Dialog.Button label="Click" onPress={() => null} />;
     }
 
     render() {
         const ref = createRef();
 
         return (
-            <Dialog.Container
-                visible={true}
-                style={{ marginLeft: 20, marginRight: 20 }}
-            >
-                <Dialog.Title style={{ marginLeft: 20, marginRight: 20 }}>
-                    A nice title
-                </Dialog.Title>
+            <Dialog.Container visible={true} style={{ marginLeft: 20, marginRight: 20 }} avoidKeyboard={true}>
+                <Dialog.Title style={{ marginLeft: 20, marginRight: 20 }}>A nice title</Dialog.Title>
                 <Dialog.Description>A good descr</Dialog.Description>
                 <Dialog.Input textInputRef={ref} label="Cancel" />
-                <Dialog.Button
-                    label="Cancel"
-                    onPress={() => console.log("test")}
-                />
-                <Dialog.Button
-                    label="Validate"
-                    onPress={() => console.log("test")}
-                />
+                <Dialog.Button label="Cancel" onPress={() => console.log('test')} />
+                <Dialog.Button label="Validate" onPress={() => console.log('test')} />
                 {this.dynamicButtons()}
                 {this.singleButton()}
             </Dialog.Container>