feat: KeyboardExtender (#982)

## 📜 Description

Added `KeyboardExtender` component.

## 💡 Motivation and Context

This is a part of a big research that I did over several months.

This PR implements `KeyboardExtender` component. On iOS it utilizes
native capabilities of the OS and on Android it uses polyfill
(`KeyboardBackgroundView`+`KeyboardStickyView`+`useKeyboardAnimation`
for `opacity` animation).

That component aims to help developers to build various keyboard
extensions which will be shown above the keyboard and visually mimic to
it. The initial idea of implementation was inspired by Revolut app:

<div align="center">
<video
src="https://github.com/user-attachments/assets/320da57f-7ad8-41e3-931a-1be7780fc6f8">
</div>

And the `KeyboardExtender` ideally fits for building such things,
another example is:

<div align="center">
<img
src="https://github.com/user-attachments/assets/bb338e9b-b2f6-4a8a-a933-babe94a662fd"
width="300">
</div>

And I think developers can take inspiration and build even more advanced
features (such as voice search etc.)

To implement this on iOS I used
[UIInputView](https://developer.apple.com/documentation/uikit/uiinputview#overview)
with
[keyboard](https://developer.apple.com/documentation/uikit/uiinputview/style/keyboard)
style.

> [!WARNING]
> On iOS 26 it looks bad and the view is not getting embedded into the
keyboard. See [tweet](https://x.com/ziusko/status/1932492809258381350)
about it. For now let's wait for Apple fixes and if they are not going
to fix it, then most likely we'll have to write separate implementation
for iSO 26 to use liquid glass design.

On Android I'm trying to re--create iOS effect, but it's obviously not
possible to match it fully, so I'm trying to make it looking as close as
possible to. For sure I can not fully hide the view and make it moving
together with keyboard from the very beginning, so I decided to use
`opacity` interpolation and always show it above the keyboard (using
`KeyboardStickyView`).

> I decided not to use parallax animation (as in `KeyboardToolbar`)
here. Let's see if `opacity` + frame-in-frame motion looks better than
parallax effect 👀

<hr>

Last but not least - for now I decided to make this component very
simple and barely customizable (I expose only `enabled` property). And
it can cause certain issues, for example if you switch between QWERTY
keyboard (where you don't want `KeyboardExtender` to be present) to
numeric (where you'd like to see `KeyboardExtender`), then you will see
how react updates everything asynchronously and for a fraction of a
second you will see QWERTY-keyboard with `KeyboardExtender`.
Theoretically I could introduce binding through `nativeID` and "connect"
specific inputs with specific extenders, but for now let's not do an
over-engineering and try to handle all cases. Let's handle everything
step-by-step and when we get a bug report then we can do another round
of investigation how such thing can be implemented 👀

## 📢 Changelog

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### Docs

- added new page for `KeyboardExtender`;
- added new chapter in `Components Overview`;
- mention `KeyboardExtender` feature in `README`;

### E2E

- added new test for `KeyboardExtender`;

### JS

- added `KeyboardExtender` component;
- added `KeyboardExtender` spec;
- added `KeyboardExtender` mock.

### iOS

- expose `KeyboardExtender` view;

### C++

- added c++ bindings (shadow nodes, component descriptor, etc.) for
`KeyboardExtender`;

## 🤔 How Has This Been Tested?

Tested manually on:
- iPhone 15 Pro (iOS 17.5, simulator)
- iPhone 16 Pro (iOS 18.4, simulator)
- iPhone 6s (iOS 15.5, real device)
- iPhone 16 Pro (iOS 26.0, simulator) - doesn't look good there, filled
bug to Apple
- Medium Phone API 35 (emulator)
- Pixel 7 Pro (API 36, real device)
- Xiaomi Redmi Note 5 Pro (API 28, real device)

## 📸 Screenshots (if appropriate):

|iOS|Android|
|----|--------|
|<video
src="https://github.com/user-attachments/assets/a5c7c515-6b0e-4966-a74c-78e00619c137">|<video
src="https://github.com/user-attachments/assets/f6119e63-ae41-4e0f-b732-e112f2e7c4e6">|

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: kirillzyusko

FabricExample/__tests__/__snapshots__/components-rendering.spec.tsx.snap

@@ -54,6 +54,22 @@ exports[`components rendering should render \`KeyboardControllerView\` 1`] = `
 />
 `;
 
+exports[`components rendering should render \`KeyboardExtenderTest\` 1`] = `
+<KeyboardExtender
+  enabled={true}
+>
+  <View
+    style={
+      {
+        "backgroundColor": "black",
+        "height": 20,
+        "width": 20,
+      }
+    }
+  />
+</KeyboardExtender>
+`;
+
 exports[`components rendering should render \`KeyboardProvider\` 1`] = `
 <KeyboardProvider
   statusBarTranslucent={true}

FabricExample/__tests__/components-rendering.spec.tsx

@@ -6,6 +6,7 @@ import {
   KeyboardAwareScrollView,
   KeyboardBackgroundView,
   KeyboardControllerView,
+  KeyboardExtender,
   KeyboardProvider,
   KeyboardStickyView,
   KeyboardToolbar,
@@ -79,6 +80,10 @@ function KeyboardBackgroundViewTest() {
   return <KeyboardBackgroundView />;
 }
 
+function KeyboardExtenderTest() {
+  return <KeyboardExtender enabled={true}>{<EmptyView />}</KeyboardExtender>;
+}
+
 describe("components rendering", () => {
   it("should render `KeyboardControllerView`", () => {
     expect(render(<KeyboardControllerViewTest />)).toMatchSnapshot();
@@ -111,4 +116,8 @@ describe("components rendering", () => {
   it("should render `KeyboardBackgroundView`", () => {
     expect(render(<KeyboardBackgroundViewTest />)).toMatchSnapshot();
   });
+
+  it("should render `KeyboardExtenderTest`", () => {
+    expect(render(<KeyboardExtenderTest />)).toMatchSnapshot();
+  });
 });

FabricExample/src/constants/screenNames.ts

@@ -26,4 +26,5 @@ export enum ScreenNames {
   USE_KEYBOARD_STATE = "USE_KEYBOARD_STATE",
   LIQUID_KEYBOARD = "LIQUID_KEYBOARD",
   KEYBOARD_SHARED_TRANSITIONS = "KEYBOARD_SHARED_TRANSITIONS",
+  KEYBOARD_EXTENDER = "KEYBOARD_EXTENDER",
 }

FabricExample/src/navigation/ExamplesStack/index.tsx

@@ -13,6 +13,7 @@ import InteractiveKeyboard from "../../screens/Examples/InteractiveKeyboard";
 import InteractiveKeyboardIOS from "../../screens/Examples/InteractiveKeyboardIOS";
 import KeyboardAnimation from "../../screens/Examples/KeyboardAnimation";
 import KeyboardAvoidingViewExample from "../../screens/Examples/KeyboardAvoidingView";
+import KeyboardExtender from "../../screens/Examples/KeyboardExtender";
 import KeyboardSharedTransitionExample from "../../screens/Examples/KeyboardSharedTransitions";
 import UseKeyboardState from "../../screens/Examples/KeyboardStateHook";
 import LiquidKeyboardExample from "../../screens/Examples/LiquidKeyboard";
@@ -52,6 +53,7 @@ export type ExamplesStackParamList = {
   [ScreenNames.USE_KEYBOARD_STATE]: undefined;
   [ScreenNames.LIQUID_KEYBOARD]: undefined;
   [ScreenNames.KEYBOARD_SHARED_TRANSITIONS]: undefined;
+  [ScreenNames.KEYBOARD_EXTENDER]: undefined;
 };
 
 const Stack = createStackNavigator<ExamplesStackParamList>();
@@ -132,6 +134,10 @@ const options = {
     title: "Keyboard shared transitions",
     headerShown: false,
   },
+  [ScreenNames.KEYBOARD_EXTENDER]: {
+    title: "Keyboard Extender",
+    headerShown: false,
+  },
 };
 
 const ExamplesStack = () => (
@@ -256,6 +262,11 @@ const ExamplesStack = () => (
       name={ScreenNames.KEYBOARD_SHARED_TRANSITIONS}
       options={options[ScreenNames.KEYBOARD_SHARED_TRANSITIONS]}
     />
+    <Stack.Screen
+      component={KeyboardExtender}
+      name={ScreenNames.KEYBOARD_EXTENDER}
+      options={options[ScreenNames.KEYBOARD_EXTENDER]}
+    />
   </Stack.Navigator>
 );
 

FabricExample/src/screens/Examples/KeyboardExtender/background.jpg

@@ -0,0 +1,115 @@
+import React, { useEffect, useState } from "react";
+import {
+  Alert,
+  Image,
+  Keyboard,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+} from "react-native";
+import { KeyboardExtender } from "react-native-keyboard-controller";
+import Reanimated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+export default function KeyboardExtendExample() {
+  const [showExtend, setShowExtend] = useState(true);
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    opacity.set(withTiming(showExtend ? 1 : 0));
+  }, [showExtend]);
+
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: opacity.value,
+    }),
+    [],
+  );
+
+  return (
+    <>
+      <Image source={require("./background.jpg")} style={styles.background} />
+      <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
+        <SafeAreaView edges={["top"]} style={styles.container}>
+          <TextInput
+            keyboardType="numeric"
+            placeholder="Donation amount"
+            placeholderTextColor="#5c5c5c"
+            style={styles.input}
+            testID="donation_amount"
+            onFocus={() => setShowExtend(true)}
+          />
+          <TextInput
+            keyboardType="numeric"
+            placeholder="Postal code"
+            placeholderTextColor="#5c5c5c"
+            style={styles.input}
+            testID="postal_code"
+            onFocus={() => setShowExtend(false)}
+          />
+        </SafeAreaView>
+      </TouchableWithoutFeedback>
+      <KeyboardExtender enabled={showExtend}>
+        <Reanimated.View style={[styles.keyboardExtend, animatedStyle]}>
+          <TouchableOpacity
+            testID="donation_10"
+            onPress={() => Alert.alert("10 dollars")}
+          >
+            <Text style={styles.priceText}>10$</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            testID="donation_20"
+            onPress={() => Alert.alert("20 dollars")}
+          >
+            <Text style={styles.priceText}>20$</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            testID="donation_50"
+            onPress={() => Alert.alert("50 dollars")}
+          >
+            <Text style={styles.priceText}>50$</Text>
+          </TouchableOpacity>
+        </Reanimated.View>
+      </KeyboardExtender>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    ...StyleSheet.absoluteFillObject,
+    flex: 1,
+    width: "100%",
+  },
+  container: {
+    flex: 1,
+    paddingHorizontal: 20,
+  },
+  input: {
+    height: 40,
+    borderWidth: 2,
+    borderColor: "#1c1c1c",
+    borderRadius: 8,
+    padding: 10,
+    fontSize: 18,
+    marginBottom: 20,
+  },
+  keyboardExtend: {
+    width: "100%",
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+  },
+  priceText: {
+    color: "black",
+    fontSize: 18,
+    fontWeight: "600",
+    padding: 20,
+  },
+});

FabricExample/src/screens/Examples/KeyboardExtender/index.tsx

@@ -64,7 +64,7 @@ const KeyboardSharedTransitionExample = () => {
         >
           <ReanimatedTextInput
             placeholder="127.0.0.1"
-            placeholderTextColor="#ecececec"
+            placeholderTextColor="#ececec"
             style={[
               {
                 width: "100%",

FabricExample/src/screens/Examples/KeyboardSharedTransitions/index.tsx

@@ -147,4 +147,10 @@ export const examples: Example[] = [
     info: ScreenNames.KEYBOARD_SHARED_TRANSITIONS,
     icons: "🔄",
   },
+  {
+    title: "Keyboard Extender",
+    testID: "keyboard_extender",
+    info: ScreenNames.KEYBOARD_EXTENDER,
+    icons: "🧩",
+  },
 ];

FabricExample/src/screens/Examples/Main/constants.ts

@@ -17,6 +17,7 @@ A universal keyboard handling solution for React Native — lightweight, fully c
 - 📐 `KeyboardToolbar` with customizable _**previous**_, _**next**_, and _**done**_ buttons
 - 🌐 Display anything over the keyboard (without dismissing it) using `OverKeyboardView`
 - 🎨 Match keyboard background with `KeyboardBackgroundView`
+- 🧩 Extend keyboard with custom buttons/UI via `KeyboardExtender`
 - 📝 Easy retrieval of focused input info
 - 🧭 Compatible with any navigation library
 - ✨ More coming soon... stay tuned! 😊

README.md

@@ -3,13 +3,14 @@ package com.reactnativekeyboardcontroller.views.background
 import android.content.Context
 import android.graphics.Color
 import android.os.Build
-import android.util.Log
 import androidx.annotation.ColorInt
 import com.facebook.react.uimanager.ThemedReactContext
 import com.reactnativekeyboardcontroller.R
 import com.reactnativekeyboardcontroller.extensions.currentImePackage
 import com.reactnativekeyboardcontroller.extensions.isSystemDarkMode
+import com.reactnativekeyboardcontroller.log.Logger
 
+private const val TAG = "Skins"
 private const val MAX_RGB_VALUE = 255
 
 object ImePackages {
@@ -76,7 +77,7 @@ fun ThemedReactContext.getInputMethodColor(): Int {
   val imePackage = currentImePackage()
   val isDark = isSystemDarkMode()
 
-  Log.i("Skins", "Current IME: $imePackage")
+  Logger.i(TAG, "Current IME: $imePackage")
 
   val (lightColorRes, darkColorRes) =
     imeColorMap[imePackage]