feat: implementation for platforms with missing native API (aka polyfill)

Author: kirillzyusko

src/views/KeyboardExtender/index.ios.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { View } from "react-native";
+
+import { RCTKeyboardExtender } from "../../bindings";
+import { useWindowDimensions } from "../../hooks";
+
+import type { KeyboardExtenderProps } from "../../types";
+import type { PropsWithChildren } from "react";
+
+/**
+ * A component that embeds its children into the keyboard thus enhancing keyboard functionality.
+ *
+ * @param props - Component props.
+ * @returns A view component that renders inside the keyboard above all system buttons.
+ * @example
+ * ```tsx
+ * <KeyboardExtender>
+ *   <Button>10$</Button>
+ *   <Button>20$</Button>
+ *   <Button>50$</Button>
+ * </KeyboardExtender>
+ * ```
+ */
+const KeyboardExtender = (props: PropsWithChildren<KeyboardExtenderProps>) => {
+  const { children, enabled = true } = props;
+  const { width } = useWindowDimensions();
+
+  return (
+    <RCTKeyboardExtender enabled={enabled}>
+      <View style={{ width }}>{children}</View>
+    </RCTKeyboardExtender>
+  );
+};
+
+export default KeyboardExtender;

src/views/KeyboardExtender/index.tsx

@@ -1,31 +1,41 @@
 import React from "react";
-import { Platform, View } from "react-native";
+import { Animated } from "react-native";
 
-import { RCTKeyboardExtender } from "../../bindings";
-import { useWindowDimensions } from "../../hooks";
+import { KeyboardBackgroundView } from "../../bindings";
+import { KeyboardStickyView } from "../../components";
+import { useKeyboardAnimation } from "../../hooks";
 
 import type { KeyboardExtenderProps } from "../../types";
 import type { PropsWithChildren } from "react";
 
-// TODO: should be in views because on Android we gonna use KeyboardStickyView?
+const AnimatedKeyboardBackgroundView = Animated.createAnimatedComponent(
+  KeyboardBackgroundView,
+);
+
 /**
  * A component that embeds its children into the keyboard thus enhancing keyboard functionality.
+ *
+ * @param props - Component props.
+ * @returns A view component that renders inside the keyboard above all system buttons.
+ * @example
+ * ```tsx
+ * <KeyboardExtender>
+ *   <Button>10$</Button>
+ *   <Button>20$</Button>
+ *   <Button>50$</Button>
+ * </KeyboardExtender>
+ * ```
  */
-const KeyboardExtender = ({
-  children,
-  enabled = false,
-}: PropsWithChildren<KeyboardExtenderProps>) => {
-  const { width } = useWindowDimensions();
-
-  // iOS-only component
-  if (Platform.OS !== "ios") {
-    return null;
-  }
+const KeyboardExtender = (props: PropsWithChildren<KeyboardExtenderProps>) => {
+  const { children, enabled = true } = props;
+  const { progress } = useKeyboardAnimation();
 
   return (
-    <RCTKeyboardExtender enabled={enabled}>
-      <View style={{ width }}>{children}</View>
-    </RCTKeyboardExtender>
+    <KeyboardStickyView enabled={enabled}>
+      <AnimatedKeyboardBackgroundView style={{ opacity: progress }}>
+        {children}
+      </AnimatedKeyboardBackgroundView>
+    </KeyboardStickyView>
   );
 };