feat: KeyboardBackgroundView (#981)

## 📜 Description

Added `KeyboardBackgroundView` - component designed to match keyboard
backdrop UI.

## 💡 Motivation and Context

This component can be useful when you want to continue keyboard surface
and embed advanced elements (such as `TextInput` inside it). Using this
component you can achieve a similar UI to Photos app or Safari app
search on iOS. Additioanlly this component will be used as a polyfill
implementation for `KeyboardExtender` on Android (just because
`KeyboardExtender` can not be implemented natively on Android).

> [!WARNING]
> This component only matches default keyboard UI background. If user
customizes it -> it will look differently and will not match keyboard
design. There is no way to check displayed keyboard color on a native
side, but some apps still use this approach, so I thought to export that
possibility from `keyboard-controller` too.

On iOS we can use system class `UIKBBackdropView` to match the keyboard
background. On Android keyboard is a 3rd party process so there is no
API at all, so I kind of reverse-engineered it: we have an access to
keyboard package name and then based on pacakge name and phone
preferences we can "guess" keyboard color. In reality it may vary from
OS version o OS version and may be even dynamic and depend on wallpaper
generic color. To solve it I Added a class that has a basic color (can
be dynamic too) and then we have additional property called `tone`,
which can slightly adjust the color. The idea is that color like
`#3c3c3c` with tone `+2` will become `#3e3e3e`. For now it works and we
can successfully match default keyboard color.

## 📢 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 -->

### E2E

- cover `KeyboardBackgroundView` by e2e tests;

### Docs

- mention new feature in README;
- new docs page `KeyboardBackgroundView`;
- new chapter in Components Overview guide.

### JS

- added `KeyboardBackgroundView`;
- added unit-tests for `KeyboardBackgroundView`.

### iOS

- added `KeyboardBackgroundView`;

### Android

- added `KeyboardBackgroundView`;
- move `isSystemDarkMode` extensions to `Context`;
- create new `currentImePackage` extension;
- create resource files;

## 🤔 How Has This Been Tested?

Tested manually on:
- Pixel 7 Pro (API 35, API 36 - real device);
- Pixel 9 Pro (API 31, API 33, API 34, API 35, API 36 - emulator);
- Xiaomi Redmi Note 5 Pro (API 28 - real device);
- iPhone 11 (iOS 18.5 - real device);
- iPhone 6s (iOS 15.8 - real device);
- iPhone 14 Pro (iOS 18.4 - real device).
- iPhone 16 Pro (iOS 18.5, 26.0 - simulator)
- iPhone 15 Pro (iOS 17.5 - simulator)

plus tested on all e2e devices (via e2e tests).

## 📸 Screenshots (if appropriate):

### Shared surface

|Android|iOS|
|--------|---|
|<img width="300" alt="android"
src="https://github.com/user-attachments/assets/1bbbbdf3-17af-4277-a33a-390a413c50e5"
/>|<img width="300" alt="android"
src="https://github.com/user-attachments/assets/489ace49-8a68-4fdf-a98a-bd4bdc0a0418">|

### "Meatball"/Ask AI/Liquid keyboard

|Android|iOS|
|--------|---|
|<video
src="https://github.com/user-attachments/assets/ac3efba6-2a6a-43a1-b0ee-501e2b5be361">|<video
src="https://github.com/user-attachments/assets/2f7d5c3e-4e32-43d9-b2d4-9658accc757a">|

## 📝 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

@@ -46,6 +46,8 @@ exports[`components rendering should render \`KeyboardAwareScrollView\` 1`] = `
 </RCTScrollView>
 `;
 
+exports[`components rendering should render \`KeyboardBackgroundView\` 1`] = `<KeyboardBackgroundView />`;
+
 exports[`components rendering should render \`KeyboardControllerView\` 1`] = `
 <KeyboardControllerView
   statusBarTranslucent={true}

FabricExample/__tests__/components-rendering.spec.tsx

@@ -4,6 +4,7 @@ import { View } from "react-native";
 import {
   KeyboardAvoidingView,
   KeyboardAwareScrollView,
+  KeyboardBackgroundView,
   KeyboardControllerView,
   KeyboardProvider,
   KeyboardStickyView,
@@ -74,6 +75,10 @@ function OverKeyboardViewTest() {
   );
 }
 
+function KeyboardBackgroundViewTest() {
+  return <KeyboardBackgroundView />;
+}
+
 describe("components rendering", () => {
   it("should render `KeyboardControllerView`", () => {
     expect(render(<KeyboardControllerViewTest />)).toMatchSnapshot();
@@ -102,4 +107,8 @@ describe("components rendering", () => {
   it("should render `OverKeyboardView`", () => {
     expect(render(<OverKeyboardViewTest />)).toMatchSnapshot();
   });
+
+  it("should render `KeyboardBackgroundView`", () => {
+    expect(render(<KeyboardBackgroundViewTest />)).toMatchSnapshot();
+  });
 });

FabricExample/ios/KeyboardControllerFabricExample/Info.plist

@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CADisableMinimumFrameDurationOnPhone</key>
+	<true/>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
@@ -47,7 +49,5 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-	<key>CADisableMinimumFrameDurationOnPhone</key>
-	<true/>
 </dict>
 </plist>

FabricExample/src/constants/screenNames.ts

@@ -24,4 +24,6 @@ export enum ScreenNames {
   OVER_KEYBOARD_VIEW = "OVER_KEYBOARD_VIEW",
   IMAGE_GALLERY = "IMAGE_GALLERY",
   USE_KEYBOARD_STATE = "USE_KEYBOARD_STATE",
+  LIQUID_KEYBOARD = "LIQUID_KEYBOARD",
+  KEYBOARD_SHARED_TRANSITIONS = "KEYBOARD_SHARED_TRANSITIONS",
 }

FabricExample/src/navigation/ExamplesStack/index.tsx

@@ -13,7 +13,9 @@ 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 KeyboardSharedTransitionExample from "../../screens/Examples/KeyboardSharedTransitions";
 import UseKeyboardState from "../../screens/Examples/KeyboardStateHook";
+import LiquidKeyboardExample from "../../screens/Examples/LiquidKeyboard";
 import LottieAnimation from "../../screens/Examples/Lottie";
 import ModalExample from "../../screens/Examples/Modal";
 import NonUIProps from "../../screens/Examples/NonUIProps";
@@ -48,6 +50,8 @@ export type ExamplesStackParamList = {
   [ScreenNames.OVER_KEYBOARD_VIEW]: undefined;
   [ScreenNames.IMAGE_GALLERY]: undefined;
   [ScreenNames.USE_KEYBOARD_STATE]: undefined;
+  [ScreenNames.LIQUID_KEYBOARD]: undefined;
+  [ScreenNames.KEYBOARD_SHARED_TRANSITIONS]: undefined;
 };
 
 const Stack = createStackNavigator<ExamplesStackParamList>();
@@ -120,6 +124,14 @@ const options = {
   [ScreenNames.USE_KEYBOARD_STATE]: {
     title: "useKeyboardState",
   },
+  [ScreenNames.LIQUID_KEYBOARD]: {
+    title: "Liquid keyboard",
+    headerShown: false,
+  },
+  [ScreenNames.KEYBOARD_SHARED_TRANSITIONS]: {
+    title: "Keyboard shared transitions",
+    headerShown: false,
+  },
 };
 
 const ExamplesStack = () => (
@@ -234,6 +246,16 @@ const ExamplesStack = () => (
       name={ScreenNames.USE_KEYBOARD_STATE}
       options={options[ScreenNames.USE_KEYBOARD_STATE]}
     />
+    <Stack.Screen
+      component={LiquidKeyboardExample}
+      name={ScreenNames.LIQUID_KEYBOARD}
+      options={options[ScreenNames.LIQUID_KEYBOARD]}
+    />
+    <Stack.Screen
+      component={KeyboardSharedTransitionExample}
+      name={ScreenNames.KEYBOARD_SHARED_TRANSITIONS}
+      options={options[ScreenNames.KEYBOARD_SHARED_TRANSITIONS]}
+    />
   </Stack.Navigator>
 );
 

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

@@ -0,0 +1,85 @@
+import React from "react";
+import { TextInput, View } from "react-native";
+import {
+  KeyboardBackgroundView,
+  KeyboardStickyView,
+  useReanimatedKeyboardAnimation,
+} from "react-native-keyboard-controller";
+import Reanimated, {
+  interpolateColor,
+  useAnimatedStyle,
+} from "react-native-reanimated";
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+
+const ReanimatedBackgroundView = Reanimated.createAnimatedComponent(
+  KeyboardBackgroundView,
+);
+const ReanimatedTextInput = Reanimated.createAnimatedComponent(TextInput);
+
+const KeyboardSharedTransitionExample = () => {
+  const { bottom } = useSafeAreaInsets();
+  const { progress } = useReanimatedKeyboardAnimation();
+
+  const opacity = useAnimatedStyle(
+    () => ({
+      height: 291 + 70,
+      opacity: progress.value,
+    }),
+    [],
+  );
+  const inputColor = useAnimatedStyle(
+    () => ({
+      backgroundColor: interpolateColor(
+        progress.value,
+        [0, 1],
+        ["#323232", "#474747"],
+      ),
+    }),
+    [],
+  );
+
+  return (
+    <SafeAreaView
+      style={{
+        backgroundColor: "#000000",
+        flex: 1,
+        justifyContent: "flex-end",
+      }}
+    >
+      <KeyboardStickyView offset={{ closed: 291, opened: 291 + bottom }}>
+        <ReanimatedBackgroundView style={opacity} />
+        <View
+          style={{
+            marginHorizontal: 30,
+            marginVertical: 16,
+            position: "absolute",
+            left: 0,
+            right: 0,
+            bottom: 0,
+            top: 0,
+          }}
+        >
+          <ReanimatedTextInput
+            placeholder="127.0.0.1"
+            placeholderTextColor="#ecececec"
+            style={[
+              {
+                width: "100%",
+                padding: 10,
+                borderRadius: 8,
+                textAlign: "center",
+              },
+              inputColor,
+            ]}
+            testID="shared_transition_input"
+          />
+        </View>
+      </KeyboardStickyView>
+    </SafeAreaView>
+  );
+};
+
+export default KeyboardSharedTransitionExample;

FabricExample/src/screens/Examples/LiquidKeyboard/ai.png

@@ -0,0 +1,138 @@
+import React, { useEffect } from "react";
+import { Image, StyleSheet, TextInput } from "react-native";
+import {
+  KeyboardBackgroundView,
+  KeyboardEvents,
+  KeyboardStickyView,
+} from "react-native-keyboard-controller";
+import Reanimated, {
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+
+const ReanimatedBackgroundView = Reanimated.createAnimatedComponent(
+  KeyboardBackgroundView,
+);
+
+const LiquidKeyboardExample = () => {
+  const progress = useSharedValue(0);
+  const { bottom } = useSafeAreaInsets();
+
+  useEffect(() => {
+    progress.set(0);
+    /*progress.value = withRepeat(withSpring(1, {
+      stiffness: 1000,
+      damping: 500,
+      mass: 3,
+    }), -1, true);*/
+    KeyboardEvents.addListener("keyboardDidShow", () => {
+      progress.set(
+        withSpring(1, {
+          stiffness: 1000,
+          damping: 500,
+          mass: 3,
+        }),
+      );
+    });
+    KeyboardEvents.addListener("keyboardWillHide", () => {
+      progress.set(
+        withSpring(0, {
+          stiffness: 1000,
+          damping: 500,
+          mass: 3,
+        }),
+      );
+    });
+  }, []);
+
+  const mainCircle = useAnimatedStyle(
+    () => ({
+      borderBottomRightRadius: interpolate(
+        progress.value,
+        [0, 0.8, 1],
+        [0, 0, 25],
+      ),
+      transform: [{ translateY: -progress.value * 70 }, { rotate: "45deg" }],
+    }),
+    [],
+  );
+  const secondCircle = useAnimatedStyle(
+    () => ({
+      transform: [
+        // { scale: interpolate(progress.value, [0, 0.5, 1], [1, 1, 0.8]) },
+        {
+          // 27%
+          translateY: interpolate(progress.value, [0, 0.35, 1], [12, -2, 12]),
+        },
+      ],
+    }),
+    [],
+  );
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <TextInput keyboardType="default" style={styles.textInput} />
+      <KeyboardStickyView>
+        <ReanimatedBackgroundView
+          style={[
+            {
+              width: 50,
+              height: 50,
+              borderTopLeftRadius: 25,
+              borderTopRightRadius: 25,
+              borderBottomLeftRadius: 25,
+              right: 20,
+              position: "absolute",
+              justifyContent: "center",
+              alignItems: "center",
+              top: bottom,
+              // zIndex: 2,
+            },
+            mainCircle,
+          ]}
+        >
+          <Image
+            source={require("./ai.png")}
+            style={{ transform: [{ rotate: "-45deg" }], width: 20, height: 20 }}
+          />
+        </ReanimatedBackgroundView>
+        <ReanimatedBackgroundView
+          style={[
+            {
+              width: 100,
+              height: 100,
+              borderRadius: 9999,
+              right: -5,
+              bottom: -122,
+              position: "absolute",
+            },
+            secondCircle,
+          ]}
+        />
+      </KeyboardStickyView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#8A8A8C",
+    justifyContent: "space-between",
+  },
+  textInput: {
+    height: 50,
+    paddingHorizontal: 10,
+    margin: 10,
+    borderWidth: 1,
+    borderColor: "white",
+  },
+});
+
+export default LiquidKeyboardExample;

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

@@ -135,4 +135,16 @@ export const examples: Example[] = [
     info: ScreenNames.USE_KEYBOARD_STATE,
     icons: "📝",
   },
+  {
+    title: "Liquid keyboard",
+    testID: "liquid_keyboard",
+    info: ScreenNames.LIQUID_KEYBOARD,
+    icons: "💧",
+  },
+  {
+    title: "Keyboard shared transitions",
+    testID: "keyboard_shared_transitions",
+    info: ScreenNames.KEYBOARD_SHARED_TRANSITIONS,
+    icons: "🔄",
+  },
 ];

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

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