feat: create KeyboardAware

docs/docs/KeyboardAware/KeyboardAwareScrollView.mdx

@@ -0,0 +1,32 @@
+import ScrollView from './assets/video/ScrollView.mov';
+import ReactPlayer from 'react-player';
+
+<ReactPlayer playing controls url={ScrollView} />
+
+## Example
+
+```typescript jsx
+import { KeyboardAwareScrollView } from '@lad-tech/keyboard-aware';
+import { BottomComponent } from './Bottom';
+import { Inputs } from './Inputs';
+
+export const KeyboardAwareScrollViewWithBottom = () => {
+  return (
+    <KeyboardAwareScrollView
+      BottomComponent={<BottomComponent />}>
+      <Inputs />
+    </KeyboardAwareScrollView>
+  );
+};
+```
+
+
+## Props
+
+### [ScrollView Props](https://reactnative.dev/docs/scrollview#props)
+
+Inherits [ScrollView Props](https://reactnative.dev/docs/scrollview#props).
+
+### BottomComponent
+
+Sticky to Keyboard BottomComponent

docs/package.json

@@ -21,7 +21,8 @@
     "clsx": "^1.2.1",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-player": "^2.15.1"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.1.0",

docs/yarn.lock

@@ -4351,7 +4351,7 @@ deep-extend@^0.6.0:
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
-deepmerge@^4.2.2:
+deepmerge@^4.0.0, deepmerge@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -6022,6 +6022,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
+
 loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
@@ -6364,6 +6369,11 @@ memfs@^3.1.2, memfs@^3.4.3:
   dependencies:
     fs-monkey "^1.0.4"
 
+memoize-one@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 [email protected]:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -7791,7 +7801,7 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-fast-compare@^3.2.0:
+react-fast-compare@^3.0.1, react-fast-compare@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
@@ -7824,6 +7834,17 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
+react-player@^2.15.1:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.15.1.tgz#a5905126a6c5ba2667391a0d72da9f3a1ab57d54"
+  integrity sha512-ni1XFuYZuhIKKdeFII+KRLmIPcvCYlyXvtSMhNOgssdfnSovmakBtBTW2bxowPvmpKy5BTR4jC4CF79ucgHT+g==
+  dependencies:
+    deepmerge "^4.0.0"
+    load-script "^1.0.0"
+    memoize-one "^5.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.0.1"
+
 react-router-config@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"

package.json

@@ -42,9 +42,10 @@
     "packages/*"
   ],
   "dependencies": {
-    "@shopify/react-native-skia": "^0.1.234",
+    "@react-navigation/bottom-tabs": "^6.5.18",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
+    "@shopify/react-native-skia": "^0.1.234",
     "react": "18.2.0",
     "react-native": "0.71.6",
     "react-native-calendars": "^1.1294.0",
@@ -95,4 +96,4 @@
     "typescript": "^4.9.5",
     "winston": "^3.8.1"
   }
-}
+}

packages/KeyboardAware/.gitignore

@@ -0,0 +1 @@
+lib

packages/KeyboardAware/README.md

@@ -0,0 +1 @@
+## @lad-tech/keyboard-aware

packages/KeyboardAware/index.ts

@@ -0,0 +1 @@
+export * from './src';

packages/KeyboardAware/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@lad-tech/keyboard-aware",
+  "version": "7.24.0",
+  "description": "React Native components library focused on usability, accessibility and developer experience",
+  "main": "lib/index",
+  "module": "lib/index",
+  "types": "lib/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "keywords": [
+    "mobydick",
+    "lad-tech",
+    "keyboard-aware",
+    "react-native"
+  ],
+  "files": [
+    "lib",
+    "src",
+    "index.ts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lad-tech/mobydick.git",
+    "directory": "packages/keyboardAware"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Kirill Lebedev <[email protected]>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react-native": ">=0.66.4",
+    "react": ">=17.0.2"
+  }
+}
+

packages/KeyboardAware/src/KeyboardAwareScrollView.tsx

@@ -0,0 +1,115 @@
+import {
+  Animated,
+  Keyboard,
+  Platform,
+  ScrollView,
+  type ScrollViewProps,
+  StatusBar,
+  TextInput,
+  View,
+} from 'react-native';
+import {ReactElement, useEffect, useRef} from 'react';
+
+const androidStatusBarOffset = StatusBar.currentHeight ?? 0;
+
+const KeyboardAwareScrollView = ({
+  children,
+  BottomComponent,
+  ...rest
+}: ScrollViewProps & {BottomComponent?: ReactElement}) => {
+  const scrollViewRef = useRef<ScrollView>(null);
+  const scrollPositionRef = useRef<number>(0);
+  const keyboardHeightRef = useRef(new Animated.Value(0)).current;
+
+  const bottomRef = useRef<View>(null);
+
+  useEffect(() => {
+    const calculateAndScroll = ({
+      keyboardY,
+      bottomHeight,
+    }: {
+      keyboardY: number;
+      bottomHeight: number;
+    }) => {
+      const currentlyFocusedInput = TextInput.State.currentlyFocusedInput();
+      currentlyFocusedInput?.measureInWindow((_x, y, _width, height) => {
+        const endOfInputY = y + height + androidStatusBarOffset;
+        const deltaToScroll = endOfInputY - keyboardY;
+        const additionalScroll = 30;
+
+        const scrollPositionTarget =
+          scrollPositionRef.current +
+          deltaToScroll +
+          additionalScroll +
+          bottomHeight;
+
+        scrollViewRef.current?.scrollTo({
+          y: scrollPositionTarget,
+          animated: true,
+        });
+      });
+    };
+
+    const didShowListener = Keyboard.addListener(
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
+      frames => {
+        const keyboardY = frames.endCoordinates.screenY;
+        const duration = frames.duration;
+
+        Animated.timing(keyboardHeightRef, {
+          toValue: frames.endCoordinates.height,
+          duration,
+          useNativeDriver: Platform.OS !== 'ios',
+        }).start(() => {
+          bottomRef.current?.measureInWindow(
+            (_BottomX, _BottomY, _BottomWidth, bottomHeight) => {
+              calculateAndScroll({
+                keyboardY,
+                bottomHeight: bottomHeight ?? 0,
+              });
+            },
+          );
+        });
+      },
+    );
+
+    const didHideListener = Keyboard.addListener('keyboardWillHide', frames => {
+      const duration = frames.duration;
+      Animated.timing(keyboardHeightRef, {
+        toValue: 0,
+        duration,
+        useNativeDriver: Platform.OS !== 'ios',
+      }).start();
+    });
+
+    return () => {
+      didShowListener.remove();
+      didHideListener.remove();
+    };
+  }, []);
+
+  return (
+    <>
+      <Animated.ScrollView
+        ref={scrollViewRef}
+        onScroll={event => {
+          scrollPositionRef.current = event.nativeEvent.contentOffset.y;
+        }}
+        {...rest}>
+        {children}
+      </Animated.ScrollView>
+      <View ref={bottomRef}>{BottomComponent}</View>
+      <Animated.View
+        style={[
+          Platform.OS === 'ios'
+            ? {height: keyboardHeightRef}
+            : {
+                transform: [{translateY: keyboardHeightRef}],
+              },
+        ]}
+      />
+    </>
+  );
+};
+
+export default KeyboardAwareScrollView;

packages/KeyboardAware/src/index.ts

@@ -0,0 +1,3 @@
+import KeyboardAwareScrollView from './KeyboardAwareScrollView';
+
+export {KeyboardAwareScrollView};