Make react-native-avoid-softinput an optional dependency (48) (#820)

* Make `react-native-avoid-softinput` an optional dependency

* Update imports of optional dependency

* Update comment

Author: YoussefHenna

packages/core/package.json

@@ -56,7 +56,6 @@
     "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.7-beta.1",
@@ -74,14 +73,23 @@
     "react-native-youtube-iframe": "^2.2.2",
     "react-youtube": "^10.1.0"
   },
+  "peerDependencies": {
+    "react-native-avoid-softinput": "^4.0.1"
+  },
+  "peerDependenciesMeta": {
+    "react-native-avoid-softinput": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@types/color": "^3.0.1",
     "@types/dateformat": "^3.0.1",
     "@types/lodash.isnumber": "^3.0.6",
     "@types/lodash.omit": "^4.5.6",
-    "@types/lodash.tonumber": "^4.0.6"
+    "@types/lodash.tonumber": "^4.0.6",
+    "react-native-avoid-softinput": "^4.0.1"
   },
   "eslintIgnore": [
     "node_modules/",

packages/core/src/components/AvoidKeyboardView.tsx

@@ -1,10 +1,25 @@
 import React from "react";
-import {
-  AvoidSoftInput,
-  AvoidSoftInputView,
+import { View } from "react-native";
+import type {
+  AvoidSoftInput as AvoidSoftInputType,
+  AvoidSoftInputView as AvoidSoftInputViewType,
   AvoidSoftInputViewProps,
 } from "react-native-avoid-softinput";
 
+// `react-native-avoid-softinput` is an optional dependency and there is a possibility that it is not installed resulting in undefined references
+let AvoidSoftInput: typeof AvoidSoftInputType | null = null;
+let AvoidSoftInputView: typeof AvoidSoftInputViewType | null = null;
+
+try {
+  const avoidSoftInputPackage = require("react-native-avoid-softinput");
+  AvoidSoftInput = avoidSoftInputPackage.AvoidSoftInput;
+  AvoidSoftInputView = avoidSoftInputPackage.AvoidSoftInputView;
+} catch (_) {
+  console.warn(
+    "AvoidKeyboardView: `react-native-avoid-softinput` is not installed, falling back to `View`. No keyboard avoiding capabilties will be used."
+  );
+}
+
 /**
  * Requires additional setup: https://mateusz1913.github.io/react-native-avoid-softinput/docs/guides
  * Cannot be used with Expo Go
@@ -26,19 +41,27 @@ const AvoidKeyboardView: React.FC<AvoidKeyboardViewProps> = ({
   ...rest
 }) => {
   React.useEffect(() => {
-    AvoidSoftInput.setShouldMimicIOSBehavior(true);
+    if (AvoidSoftInput) {
+      AvoidSoftInput.setShouldMimicIOSBehavior(true);
+    }
     return () => {
-      AvoidSoftInput.setShouldMimicIOSBehavior(false);
+      if (AvoidSoftInput) {
+        AvoidSoftInput.setShouldMimicIOSBehavior(false);
+      }
     };
   }, []);
 
-  return (
-    <AvoidSoftInputView
-      onSoftInputHidden={onKeyboardHidden}
-      onSoftInputShown={onKeyboardShown}
-      {...rest}
-    />
-  );
+  if (AvoidSoftInputView) {
+    return (
+      <AvoidSoftInputView
+        onSoftInputHidden={onKeyboardHidden}
+        onSoftInputShown={onKeyboardShown}
+        {...rest}
+      />
+    );
+  } else {
+    return <View {...rest} />;
+  }
 };
 
 export default AvoidKeyboardView;

yarn.lock

@@ -15316,9 +15316,9 @@ react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0:
   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==
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/react-native-avoid-softinput/-/react-native-avoid-softinput-4.0.2.tgz#30825e7666b530c5d3e555a7778bd50f1431d0c3"
+  integrity sha512-/i8xNWGjpu3hEPCVjW2WsWTsM/mC4zTBr3DabOrdPfgw9Ww0Na69YQY1TSXCjbTjJmWwfTToPK5OEVm+ZwHmiQ==
 
 react-native-codegen@^0.71.5:
   version "0.71.5"