feat: prevent dialogs from being covered by keyboard

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). |

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 (
+        <KeyboardAvoidingView behavior="height" style={style}>
+          {children}
+        </KeyboardAvoidingView>
+      );
+    } else {
+      return (
+        <View style={style}>
+          {children}
+        </View>
+      );
+    }
+  };
+
   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}>
-        <View
+        <OverlayView
+          avoidKeyboard={avoidKeyboard}
           style={[
             {
               flex: 1,
@@ -308,7 +338,7 @@ const Dialog = (props: DialogPropsType): JSX.Element => {
           </View>
 
           {renderOutsideTouchable()}
-        </View>
+        </OverlayView>
       </ScrollView>
     </Modal>
   );