diff --git a/README.md b/README.md old mode 100644 new mode 100755 index 1b33811..5e72d8a --- a/README.md +++ b/README.md @@ -80,6 +80,7 @@ import { Dialog } from 'react-native-simple-dialogs'; | buttonsStyle | [View StyleSheet](https://facebook.github.io/react-native/docs/view-style-props) | null | Custom view style for dialog button wrapper | | overlayStyle | [View StyleSheet](https://facebook.github.io/react-native/docs/view-style-props) | null | Custom view style for dialog overlay | | buttons | React Node | null | Modal button component | +| avoidKeyboard | Boolean | false | Specifies whether the dialog moves out of the way of the keyboard. (Enabling this causes a few minor side effects, described in the "Known Issues" section of [this comment](https://github.com/douglasjunior/react-native-simple-dialogs/pull/87#issue-5023736969).) | | keyboardDismissMode | Enum('none', 'on-drag', 'interactive') | null | [Determines whether the keyboard gets dismissed in response to a drag.](https://facebook.github.io/react-native/docs/scrollview#keyboarddismissmode) | | keyboardShouldPersistTaps | Enum('always', 'never', 'handled', false, true) | null | [Determines when the keyboard should stay visible after a tap.](https://facebook.github.io/react-native/docs/scrollview#keyboardshouldpersisttaps) | | safeAreaInsets | Object{top: number, bottom: number, left: number, right: number} | null | Insets to apply to the dialog to avoid notches and other screen insets. [Can be used with react-native-safe-area-context](https://github.com/AppAndFlow/react-native-safe-area-context). | diff --git a/src/Dialog.tsx b/src/Dialog.tsx old mode 100644 new mode 100755 index 874594e..f273798 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -30,6 +30,7 @@ import { Text, Platform, ScrollView, + KeyboardAvoidingView, StyleProp, ViewStyle, TextStyle, @@ -44,6 +45,7 @@ const DEFAULT_OVERLAY_PADDING = 24; export const dialogDefaultProps: DialogPropsType = { visible: false, onRequestClose: () => null, + avoidKeyboard: false, contentInsetAdjustmentBehavior: 'never', }; @@ -109,6 +111,8 @@ export type DialogPropsType = { importantForAccessibility?: ModalProps['importantForAccessibility']; /** Role communicates the purpose of a component to the user of an assistive technology */ role?: ModalProps['role']; + /** Specifies whether the dialog moves out of the way of the keyboard. @default false */ + avoidKeyboard?: boolean; /** Determines whether the keyboard gets dismissed in response to a drag */ keyboardDismissMode?: ScrollViewProps['keyboardDismissMode']; /** Determines when the keyboard should stay visible after a tap */ @@ -119,6 +123,12 @@ export type DialogPropsType = { safeAreaInsets?: EdgeInsets; }; +type OverlayViewPropsType = { + avoidKeyboard: boolean; + style: React.CSSProperties; + children: React.ReactNode; +} + const applySafeAreaInset = (inset?: number): number => { return typeof inset === 'number' ? inset + DEFAULT_OVERLAY_PADDING @@ -154,6 +164,7 @@ const Dialog = (props: DialogPropsType): JSX.Element => { overlayStyle, supportedOrientations, statusBarTranslucent, + avoidKeyboard, keyboardDismissMode, keyboardShouldPersistTaps, contentInsetAdjustmentBehavior, @@ -235,6 +246,24 @@ const Dialog = (props: DialogPropsType): JSX.Element => { ); }; + const OverlayView = + ({avoidKeyboard, style, children}: OverlayViewPropsType): JSX.Element => { + + if (avoidKeyboard) { + return ( + + {children} + + ); + } else { + return ( + + {children} + + ); + } + }; + const dialogBackgroundColor = OS === 'ios' ? '#e8e8e8' : '#ffffff'; const dialogBorderRadius = OS === 'ios' ? 5 : 1; @@ -270,7 +299,8 @@ const Dialog = (props: DialogPropsType): JSX.Element => { keyboardDismissMode={keyboardDismissMode} keyboardShouldPersistTaps={keyboardShouldPersistTaps} contentInsetAdjustmentBehavior={contentInsetAdjustmentBehavior}> - { {renderOutsideTouchable()} - + );