Merge pull request #212 from Peersyst/rnc/fix/avoid-keyboard

fix(rnc): avoid keyboard on android
Peersyst · Jan 24, 2024 · 643a5e2 · 643a5e2
2 parents a85bba2 + 80eae4c
commit 643a5e2
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 6 deletions.
diff --git a/packages/genesys/packages/react-native-components/CHANGELOG.md b/packages/genesys/packages/react-native-components/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Versions
 
+# 3.3.11
+
+[Backdrop] fix: fix `avoidKeyboard` on Android.
+
 # 3.3.10
 
 [package.json] chore: update react-native-components

diff --git a/packages/genesys/packages/react-native-components/package.json b/packages/genesys/packages/react-native-components/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@peersyst/react-native-components",
     "author": "Peersyst",
-    "version": "3.3.10",
+    "version": "3.3.11",
     "license": "MIT",
     "main": "./src/index.tsx",
     "engines": {

diff --git a/...ages/genesys/packages/react-native-components/playground/playgrounds/Modal.playground.tsx b/...ages/genesys/packages/react-native-components/playground/playgrounds/Modal.playground.tsx
@@ -0,0 +1,31 @@
+import { Button, Modal, ModalProps, Row, ScrollView, TextField } from "../../src";
+import playground from "../playground";
+import { useState } from "react";
+import styled from "@peersyst/react-native-styled";
+
+export const StyledModal = styled(Modal)(({ safeAreaInsets, dimensions }) => ({
+    position: "absolute",
+    bottom: Math.max(safeAreaInsets.bottom, 20),
+    minWidth: "100%",
+    maxWidth: dimensions.width - 40,
+    maxHeight: dimensions.height * 0.9,
+    borderRadius: 16,
+    padding: 0,
+    backgroundColor: "white",
+}));
+
+const Wrapper = (props: ModalProps): JSX.Element => {
+    const [open, setOpen] = useState(false);
+    return (
+        <Row style={{}}>
+            <StyledModal open={open} {...props} avoidKeyboard={true} onClose={() => setOpen(false)}>
+                <ScrollView style={{ flex: 1 }}>
+                    <TextField label="Test" />
+                </ScrollView>
+            </StyledModal>
+            <Button onPress={() => setOpen(true)}>Open</Button>
+        </Row>
+    );
+};
+
+export default playground("Modal", Wrapper, {});
diff --git a/packages/genesys/packages/react-native-components/playground/playgrounds/index.ts b/packages/genesys/packages/react-native-components/playground/playgrounds/index.ts
@@ -17,6 +17,7 @@ import Chip from "./Chip.playground";
 import Expandable from "./Expandable.playground";
 import CircularProgress from "./CircularProgress.playground";
 import NumericField from "./NumericField.playground";
+import Modal from "./Modal.playground";
 
 export default {
     Welcome,
@@ -38,4 +39,5 @@ export default {
     Expandable,
     CircularProgress,
     NumericField,
+    Modal,
 };
diff --git a/packages/genesys/packages/react-native-components/src/feedback/Backdrop/Backdrop.tsx b/packages/genesys/packages/react-native-components/src/feedback/Backdrop/Backdrop.tsx
@@ -3,7 +3,7 @@ import { BackdropProps } from "./Backdrop.types";
 import { useControlled } from "@peersyst/react-hooks";
 import { useTheme } from "@peersyst/react-native-styled";
 import Modal from "react-native-modal";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import { Toaster, useToast } from "../ToastProvider";
 import { useMergeDefaultProps } from "@peersyst/react-components-core";
 import useBackdropDeviceHeight from "./hooks/useBackdropDeviceHeight";
@@ -106,10 +106,7 @@ export default function Backdrop(props: BackdropProps): JSX.Element {
             propagateSwipe={propagateSwipe}
             style={[{ margin: 0, justifyContent: "center", alignItems: "center" }, style]}
             onResponderStart={() => toastActive && hideToast()}
-            statusBarTranslucent={
-                !avoidKeyboard /* Android bug: avoidKeyboard only works if statusBarTranslucent is false */
-            }
-            avoidKeyboard={avoidKeyboard}
+            {...(Platform.OS === "ios" && { avoidKeyboard })}
             deviceHeight={deviceHeight}
         >
             {typeof children === "function" ? children(open, handleOpenChange) : children}