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()}
-
+
);