From 429cc720a7a7cd782d253be7ab491fcfb1260319 Mon Sep 17 00:00:00 2001 From: Sandeep Sengupta Date: Thu, 30 Jul 2026 10:45:41 -0400 Subject: [PATCH 1/3] feat: prevent dialogs from being covered by keyboard Dialogs containing TextInputs do not move up when the keyboard is opened, which can result in the keyboard obscuring part of the dialog. This commit fixes that issue by changing the overlay view (the with overlayStyle) to a KeyboardAvoidingView with behavior="height". Partially inspired by https://github.com/callstack/react-native-paper/pull/5023 --- src/Dialog.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Dialog.tsx b/src/Dialog.tsx index 874594e..10075f3 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -30,6 +30,7 @@ import { Text, Platform, ScrollView, + KeyboardAvoidingView, StyleProp, ViewStyle, TextStyle, @@ -270,7 +271,8 @@ const Dialog = (props: DialogPropsType): JSX.Element => { keyboardDismissMode={keyboardDismissMode} keyboardShouldPersistTaps={keyboardShouldPersistTaps} contentInsetAdjustmentBehavior={contentInsetAdjustmentBehavior}> - { {renderOutsideTouchable()} - + ); From cde84e6fe9bb44ce2beabb7d2dd1429b976a85d0 Mon Sep 17 00:00:00 2001 From: Sandeep Sengupta Date: Mon, 3 Aug 2026 09:21:28 -0400 Subject: [PATCH 2/3] feat: make keyboard avoidance optional with avoidKeyboard prop This commit replaces the KeyboardAvoidingView with a custom component, OverlayView, that returns either a KeyboardAvoidingView or a regular View depending on the value of a new prop called avoidKeyboard. --- src/Dialog.tsx | 34 +++++++++++++++++++++++++++++++--- 1 file changed, 31 insertions(+), 3 deletions(-) mode change 100644 => 100755 src/Dialog.tsx diff --git a/src/Dialog.tsx b/src/Dialog.tsx old mode 100644 new mode 100755 index 10075f3..f273798 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -45,6 +45,7 @@ const DEFAULT_OVERLAY_PADDING = 24; export const dialogDefaultProps: DialogPropsType = { visible: false, onRequestClose: () => null, + avoidKeyboard: false, contentInsetAdjustmentBehavior: 'never', }; @@ -110,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 */ @@ -120,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 @@ -155,6 +164,7 @@ const Dialog = (props: DialogPropsType): JSX.Element => { overlayStyle, supportedOrientations, statusBarTranslucent, + avoidKeyboard, keyboardDismissMode, keyboardShouldPersistTaps, contentInsetAdjustmentBehavior, @@ -236,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; @@ -271,8 +299,8 @@ const Dialog = (props: DialogPropsType): JSX.Element => { keyboardDismissMode={keyboardDismissMode} keyboardShouldPersistTaps={keyboardShouldPersistTaps} contentInsetAdjustmentBehavior={contentInsetAdjustmentBehavior}> - { {renderOutsideTouchable()} - + ); From 77ea54c0c0370b9e0dcf568dd67c83ecec4da9ff Mon Sep 17 00:00:00 2001 From: Sandeep Sengupta Date: Mon, 3 Aug 2026 09:31:26 -0400 Subject: [PATCH 3/3] doc: add avoidKeyboard prop to README.md --- README.md | 1 + 1 file changed, 1 insertion(+) mode change 100644 => 100755 README.md 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). |