Add coverScreen prop

Fixes: mmazzarolo#120

Author: saghul

README.md

@@ -178,6 +178,7 @@ const styles = StyleSheet.create({
 | keyboardVerticalOffset | number | undefined     | keyboardVerticalOffset for iOS                                                                      |
 | verticalButtons        | bool   | false         | Renders button vertically                                                                           |
 | useNativeDriver        | bool   | false         | Defines if animations should use native driver                                                      |
+| coverScreen            | bool   | true          | Whether an RN modal will be used to cover the entire screen                                         |
 
 ### Dialog.Input props
 
@@ -191,14 +192,14 @@ const styles = StyleSheet.create({
 
 ### Dialog.CodeInput props
 
-| Name                        | Type   | Default   | Description                                                  |
-| --------------------------- | ------ | --------- | ------------------------------------------------------------ |
-| wrapperStyle                | any    | undefined | The style applied to the input wrapper View                  |
-| digitContainerStyle         | any    | undefined | The style applied to the digit container View                |
-| digitContainerFocusedStyle  | any    | undefined | The style applied to the digit container View when in focus  |
-| digitStyle                  | any    | undefined | The style applied to the digit text                          |
-| codeLength                  | number | 4         | The total number of digits                                   |
-| onCodeChange                | func   | undefined | Called when the input changed                                |
+| Name                       | Type   | Default   | Description                                                 |
+| -------------------------- | ------ | --------- | ----------------------------------------------------------- |
+| wrapperStyle               | any    | undefined | The style applied to the input wrapper View                 |
+| digitContainerStyle        | any    | undefined | The style applied to the digit container View               |
+| digitContainerFocusedStyle | any    | undefined | The style applied to the digit container View when in focus |
+| digitStyle                 | any    | undefined | The style applied to the digit text                         |
+| codeLength                 | number | 4         | The total number of digits                                  |
+| onCodeChange               | func   | undefined | Called when the input changed                               |
 
 `Dialog.CodeInput` also accepts all the React-Native's `TextInput` component props.
 

package-lock.json

@@ -37,6 +37,7 @@ export type DialogContainerProps = PropsWithChildren<{
   onRequestClose?: () => void;
   keyboardVerticalOffset?: number;
   useNativeDriver?: boolean;
+  coverScreen?: boolean;
 }>;
 
 const DialogContainer: React.FC<DialogContainerProps> = (props) => {

src/Container.tsx

@@ -9,6 +9,7 @@ import {
   StyleProp,
   StyleSheet,
   TouchableWithoutFeedback,
+  View,
   ViewStyle,
 } from "react-native";
 
@@ -63,6 +64,7 @@ export interface ModalProps extends ReactNativeModalProps {
   visible?: boolean;
   contentStyle?: StyleProp<ViewStyle>;
   useNativeDriver?: boolean;
+  coverScreen?: boolean;
 }
 
 interface ModalState {
@@ -76,6 +78,7 @@ export class Modal extends Component<ModalProps, ModalState> {
     onHide: () => null,
     visible: false,
     useNativeDriver: false,
+    coverScreen: true,
   };
 
   state: ModalState = {
@@ -139,6 +142,7 @@ export class Modal extends Component<ModalProps, ModalState> {
       children,
       onBackdropPress,
       contentStyle,
+      coverScreen,
       ...otherProps
     } = this.props;
     const { currentAnimation, visible } = this.state;
@@ -176,13 +180,8 @@ export class Modal extends Component<ModalProps, ModalState> {
             }),
           };
 
-    return (
-      <ReactNativeModal
-        transparent
-        animationType="none"
-        {...otherProps}
-        visible={visible}
-      >
+    const content = (
+      <>
         <TouchableWithoutFeedback onPress={onBackdropPress}>
           <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} />
         </TouchableWithoutFeedback>
@@ -201,18 +200,33 @@ export class Modal extends Component<ModalProps, ModalState> {
             {children}
           </Animated.View>
         )}
+      </>
+    );
+
+    if (!coverScreen && visible) {
+      return (
+        <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
+          {content}
+        </View>
+      );
+    }
+
+    return (
+      <ReactNativeModal
+        transparent
+        animationType="none"
+        {...otherProps}
+        visible={visible}
+      >
+        {content}
       </ReactNativeModal>
     );
   }
 }
 
 const styles = StyleSheet.create({
   backdrop: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
+    ...StyleSheet.absoluteFillObject,
     backgroundColor: "black",
     opacity: 0,
   },