diff --git a/README.md b/README.md index 50a3efc..67e274b 100644 --- a/README.md +++ b/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. diff --git a/package-lock.json b/package-lock.json index ef3f1ec..9f404ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "react-native-dialog", "version": "9.2.2", "license": "MIT", "devDependencies": { diff --git a/src/Container.tsx b/src/Container.tsx index 6e1cc80..46ec3a4 100644 --- a/src/Container.tsx +++ b/src/Container.tsx @@ -37,6 +37,7 @@ export type DialogContainerProps = PropsWithChildren<{ onRequestClose?: () => void; keyboardVerticalOffset?: number; useNativeDriver?: boolean; + coverScreen?: boolean; }>; const DialogContainer: React.FC = (props) => { diff --git a/src/Modal.tsx b/src/Modal.tsx index e459dbd..a776016 100644 --- a/src/Modal.tsx +++ b/src/Modal.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; useNativeDriver?: boolean; + coverScreen?: boolean; } interface ModalState { @@ -76,6 +78,7 @@ export class Modal extends Component { onHide: () => null, visible: false, useNativeDriver: false, + coverScreen: true, }; state: ModalState = { @@ -139,6 +142,7 @@ export class Modal extends Component { children, onBackdropPress, contentStyle, + coverScreen, ...otherProps } = this.props; const { currentAnimation, visible } = this.state; @@ -176,13 +180,8 @@ export class Modal extends Component { }), }; - return ( - + const content = ( + <> @@ -201,6 +200,25 @@ export class Modal extends Component { {children} )} + + ); + + if (!coverScreen && visible) { + return ( + + {content} + + ); + } + + return ( + + {content} ); } @@ -208,11 +226,7 @@ export class Modal extends Component { const styles = StyleSheet.create({ backdrop: { - position: "absolute", - top: 0, - bottom: 0, - left: 0, - right: 0, + ...StyleSheet.absoluteFillObject, backgroundColor: "black", opacity: 0, },