From 80eae4c53c3ced379cfd51b6739beaad9075d9a8 Mon Sep 17 00:00:00 2001
From: Jordi Parra Crespo <jordiparra99@gmail.com>
Date: Wed, 24 Jan 2024 13:06:04 +0100
Subject: [PATCH] fix(rnc): avoid keyboard on android

---
 .../react-native-components/CHANGELOG.md      |  4 +++
 .../react-native-components/package.json      |  2 +-
 .../playgrounds/Modal.playground.tsx          | 31 +++++++++++++++++++
 .../playground/playgrounds/index.ts           |  2 ++
 .../src/feedback/Backdrop/Backdrop.tsx        |  7 ++---
 5 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 packages/genesys/packages/react-native-components/playground/playgrounds/Modal.playground.tsx

diff --git a/packages/genesys/packages/react-native-components/CHANGELOG.md b/packages/genesys/packages/react-native-components/CHANGELOG.md
index 0e516bf9..9ce64e17 100644
--- 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
index 1ef0b9a1..40c5e888 100644
--- 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/packages/genesys/packages/react-native-components/playground/playgrounds/Modal.playground.tsx b/packages/genesys/packages/react-native-components/playground/playgrounds/Modal.playground.tsx
new file mode 100644
index 00000000..a4bc0375
--- /dev/null
+++ b/packages/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
index a9ba74a2..6af0d6a2 100644
--- 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
index c337b953..f6e76b42 100644
--- 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}