Add AvoidKeyboardView component (#805)

* Add AvoidKeyboardView component

* Fix failing test

Author: YoussefHenna

packages/core/package.json

@@ -56,6 +56,7 @@
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",
+    "react-native-avoid-softinput": "^4.0.1",
     "react-native-confirmation-code-field": "^7.3.1",
     "react-native-deck-swiper": "^2.0.12",
     "react-native-dropdown-picker": "^5.4.6",

packages/core/src/components/AvoidKeyboardView.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import {
+  AvoidSoftInput,
+  AvoidSoftInputView,
+  AvoidSoftInputViewProps,
+} from "react-native-avoid-softinput";
+
+/**
+ * Requires additional setup: https://mateusz1913.github.io/react-native-avoid-softinput/docs/guides
+ * Cannot be used with Expo Go
+ * Will work on on Draftbit Live Preview or an app that is setup according to the linked guide
+ */
+
+interface AvoidKeyboardViewProps
+  extends Omit<
+    AvoidSoftInputViewProps,
+    "onSoftInputHidden" | "onSoftInputShown"
+  > {
+  onKeyboardShown?: () => void;
+  onKeyboardHidden?: () => void;
+}
+
+const AvoidKeyboardView: React.FC<AvoidKeyboardViewProps> = ({
+  onKeyboardHidden,
+  onKeyboardShown,
+  ...rest
+}) => {
+  React.useEffect(() => {
+    AvoidSoftInput.setShouldMimicIOSBehavior(true);
+    return () => {
+      AvoidSoftInput.setShouldMimicIOSBehavior(false);
+    };
+  }, []);
+
+  return (
+    <AvoidSoftInputView
+      onSoftInputHidden={onKeyboardHidden}
+      onSoftInputShown={onKeyboardShown}
+      {...rest}
+    />
+  );
+};
+
+export default AvoidKeyboardView;

packages/core/src/index.tsx

@@ -73,6 +73,7 @@ export {
   Spacer,
   Square,
 } from "./components/Layout";
+export { default as AvoidKeyboardView } from "./components/AvoidKeyboardView";
 
 /* Deprecated: Fix or Delete!  */
 export { default as AccordionItem } from "./deprecated-components/AccordionItem";

packages/maps/jest-setup.js

@@ -0,0 +1,2 @@
+// Needed to address failing test caused by react-native-avoid-softinput
+jest.mock("react-native/Libraries/EventEmitter/NativeEventEmitter");

packages/maps/package.json

@@ -53,7 +53,8 @@
   "jest": {
     "preset": "jest-expo",
     "setupFilesAfterEnv": [
-      "@testing-library/jest-native/extend-expect"
+      "@testing-library/jest-native/extend-expect",
+      "./jest-setup.js"
     ],
     "testPathIgnorePatterns": [
       "lib",

packages/ui/src/index.tsx

@@ -67,6 +67,7 @@ export {
   VStack,
   ZStack,
   PickerItem,
+  AvoidKeyboardView,
 } from "@draftbit/core";
 
 /**

yarn.lock

@@ -15316,6 +15316,11 @@ react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-native-avoid-softinput@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-avoid-softinput/-/react-native-avoid-softinput-4.0.1.tgz#c08802f66c46ddc91f72d05d1b80644102f80a30"
+  integrity sha512-feMt+Pb/wEcuobbIRDHXj1leXT15uC8CekgwMb/t8s61kWy5ifCGtX/YqDZMDRiD0sqeFLZx0gykLQOSrCpybA==
+
 react-native-codegen@^0.71.5:
   version "0.71.5"
   resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.71.5.tgz#454a42a891cd4ca5fc436440d301044dc1349c14"