fix: KeyboardToolbar on iOS 26 (#978)

## 📜 Description

Adopt `KeyboardToolbar` UI for iOS 26.

## 💡 Motivation and Context

⚠️ This is a temporary solution. ⚠️ 

Starting from iOS 26 we:
- have rounder corners for keyboard;
- proposed to use liquid glass effect.

An original implementation from Safari now uses rounded corners + glass
effect. Also instead of "Done" button Apple shows ✔️ Overall current
Safari implementation doesn't look so well (in my opinion).

If we have a look how `IQKeyboardManager` handles that... well, it's
even worse:

<p align="center">
<img width="250"
src="https://github.com/user-attachments/assets/6500200d-c8a0-444d-b522-de72c4d6bb6d">
</p>

So I think the UI for this element is not finalized yet. 

Anyway current implementation in keyboard-controller doesn't look well
at all, so in this PR I'm:
- rounding corners;
- adding horizontal margins (so toolbar doesn't take full width);
- moving toolbar a little bit up, so that it has a small spacing between
floating element and keyboard.

This UI is "okay" in my understanding (but still not perfect). As a
temporary solution I think it's good enough, however I'm currently in a
big phase of research with `KeyboardExtender` and
`KeyboardBackgroundView`. Theoretically we may want to utilize these
components in the future or we can continue our research to see what is
the new way of building keyboard "extenders" and how it can be
back-ported to older versions.

Closes
#974

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

### JS

- move `KeyboardToolbar` constant to separate file;
- add `KEYBOARD_HAS_ROUNDED_CORNERS` variable;
- make toolbar "floating" in case if keyboard has rounded corners;

## 🤔 How Has This Been Tested?

Tested manually on iPhone 16 Pro (iOS 26).

## 📸 Screenshots (if appropriate):

|Safari|Keyboard Controller|
|------|--------------------|
|<img width="250"
src="https://github.com/user-attachments/assets/b066013a-2a98-4c59-8ac7-99955c981e82">|<img
width="250"
src="https://github.com/user-attachments/assets/7861c1d5-643b-42ea-a60c-5cd4b57820b2">|

### Landscape

<img width="500"
src="https://github.com/user-attachments/assets/96ab8dbf-e168-45c5-b373-794ca337da89">

## 📝 Checklist

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

Author: kirillzyusko

src/components/KeyboardToolbar/constants.ts

@@ -0,0 +1,15 @@
+import { Platform } from "react-native";
+
+import type { HEX } from "./types";
+
+export const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
+export const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
+export const TEST_ID_KEYBOARD_TOOLBAR_NEXT = `${TEST_ID_KEYBOARD_TOOLBAR}.next`;
+export const TEST_ID_KEYBOARD_TOOLBAR_CONTENT = `${TEST_ID_KEYBOARD_TOOLBAR}.content`;
+export const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
+
+export const KEYBOARD_TOOLBAR_HEIGHT = 42;
+export const DEFAULT_OPACITY: HEX = "FF";
+export const KEYBOARD_HAS_ROUNDED_CORNERS =
+  Platform.OS === "ios" && parseInt(Platform.Version, 10) >= 26;
+export const OPENED_OFFSET = KEYBOARD_HAS_ROUNDED_CORNERS ? -11 : 0;

src/components/KeyboardToolbar/index.tsx

@@ -9,6 +9,17 @@ import KeyboardStickyView from "../KeyboardStickyView";
 import Arrow from "./Arrow";
 import Button from "./Button";
 import { colors } from "./colors";
+import {
+  DEFAULT_OPACITY,
+  KEYBOARD_HAS_ROUNDED_CORNERS,
+  KEYBOARD_TOOLBAR_HEIGHT,
+  OPENED_OFFSET,
+  TEST_ID_KEYBOARD_TOOLBAR,
+  TEST_ID_KEYBOARD_TOOLBAR_CONTENT,
+  TEST_ID_KEYBOARD_TOOLBAR_DONE,
+  TEST_ID_KEYBOARD_TOOLBAR_NEXT,
+  TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS,
+} from "./constants";
 
 import type { HEX, KeyboardToolbarTheme } from "./types";
 import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
@@ -65,15 +76,6 @@ export type KeyboardToolbarProps = Omit<
   insets?: SafeAreaInsets;
 } & Pick<KeyboardStickyViewProps, "offset" | "enabled">;
 
-const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
-const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
-const TEST_ID_KEYBOARD_TOOLBAR_NEXT = `${TEST_ID_KEYBOARD_TOOLBAR}.next`;
-const TEST_ID_KEYBOARD_TOOLBAR_CONTENT = `${TEST_ID_KEYBOARD_TOOLBAR}.content`;
-const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
-
-const KEYBOARD_TOOLBAR_HEIGHT = 42;
-const DEFAULT_OPACITY: HEX = "FF";
-
 /**
  * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` buttons from left and
  * `Done` button from the right (to dismiss the keyboard). Allows to add customizable content (yours UI elements) in the middle.
@@ -129,15 +131,32 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = (props) => {
       {
         backgroundColor: `${theme[colorScheme].background}${opacity}`,
       },
-      {
-        paddingLeft: insets?.left,
-        paddingRight: insets?.right,
-      },
+      !KEYBOARD_HAS_ROUNDED_CORNERS
+        ? {
+            paddingLeft: insets?.left,
+            paddingRight: insets?.right,
+          }
+        : null,
+      KEYBOARD_HAS_ROUNDED_CORNERS ? styles.floating : null,
     ],
     [colorScheme, opacity, theme, insets],
   );
+  const containerStyle = useMemo(
+    () => [
+      KEYBOARD_HAS_ROUNDED_CORNERS
+        ? {
+            marginLeft: (insets?.left ?? 0) + 16,
+            marginRight: (insets?.right ?? 0) + 16,
+          }
+        : null,
+    ],
+    [insets],
+  );
   const offset = useMemo(
-    () => ({ closed: closed + KEYBOARD_TOOLBAR_HEIGHT, opened }),
+    () => ({
+      closed: closed + KEYBOARD_TOOLBAR_HEIGHT,
+      opened: opened + OPENED_OFFSET,
+    }),
     [closed, opened],
   );
   const ButtonContainer = button || Button;
@@ -175,7 +194,11 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = (props) => {
   );
 
   return (
-    <KeyboardStickyView enabled={enabled} offset={offset}>
+    <KeyboardStickyView
+      enabled={enabled}
+      offset={offset}
+      style={containerStyle}
+    >
       <View {...rest} style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
         {blur}
         {showArrows && (
@@ -258,6 +281,11 @@ const styles = StyleSheet.create({
     marginRight: 16,
     marginLeft: 8,
   },
+  floating: {
+    alignSelf: "center",
+    borderRadius: 20,
+    overflow: "hidden",
+  },
 });
 
 export { colors as DefaultKeyboardToolbarTheme };