feat: insets prop for KeyboardToolbar

Author: kirillzyusko

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

@@ -6,6 +6,7 @@ import {
   KeyboardAwareScrollView,
   KeyboardToolbar,
 } from "react-native-keyboard-controller";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import TextInput from "../../../components/TextInput";
 
@@ -33,6 +34,7 @@ export default function ToolbarExample() {
   const onHideAutoFill = useCallback(() => {
     setShowAutoFill(false);
   }, []);
+  const insets = useSafeAreaInsets();
 
   return (
     <>
@@ -158,6 +160,7 @@ export default function ToolbarExample() {
             <AutoFillContacts onContactSelected={onContactSelected} />
           ) : null
         }
+        insets={insets}
         opacity={Platform.OS === "ios" ? "4F" : "DD"}
         onDoneCallback={haptic}
         onNextCallback={haptic}

docs/docs/api/components/keyboard-toolbar/index.mdx

@@ -144,6 +144,20 @@ const Icon: KeyboardToolbarProps["icon"] = ({ type }) => {
 <KeyboardToolbar icon={Icon} />;
 ```
 
+### `insets`
+
+An object containing `left` and `right` properties that define the `KeyboardToolbar` padding. This helps prevent overlap with system UI elements, especially in landscape orientation:
+
+```tsx
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+// ...
+
+const insets = useSafeAreaInsets();
+
+<KeyboardToolbar insets={insets} />;
+```
+
 ### `onDoneCallback`
 
 A callback that is called when the user presses the **done** button. The callback receives an instance of `GestureResponderEvent` which can be used to cancel the default action (for advanced use-cases).

docs/versioned_docs/version-1.16.0/api/components/keyboard-toolbar/index.mdx

@@ -144,6 +144,20 @@ const Icon: KeyboardToolbarProps["icon"] = ({ type }) => {
 <KeyboardToolbar icon={Icon} />;
 ```
 
+### `insets`
+
+An object containing `left` and `right` properties that define the `KeyboardToolbar` padding. This helps prevent overlap with system UI elements, especially in landscape orientation:
+
+```tsx
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+// ...
+
+const insets = useSafeAreaInsets();
+
+<KeyboardToolbar insets={insets} />;
+```
+
 ### `onDoneCallback`
 
 A callback that is called when the user presses the **done** button. The callback receives an instance of `GestureResponderEvent` which can be used to cancel the default action (for advanced use-cases).

example/src/screens/Examples/Toolbar/index.tsx

@@ -6,6 +6,7 @@ import {
   KeyboardAwareScrollView,
   KeyboardToolbar,
 } from "react-native-keyboard-controller";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import TextInput from "../../../components/TextInput";
 
@@ -33,6 +34,7 @@ export default function ToolbarExample() {
   const onHideAutoFill = useCallback(() => {
     setShowAutoFill(false);
   }, []);
+  const insets = useSafeAreaInsets();
 
   return (
     <>
@@ -158,6 +160,7 @@ export default function ToolbarExample() {
             <AutoFillContacts onContactSelected={onContactSelected} />
           ) : null
         }
+        insets={insets}
         opacity={Platform.OS === "ios" ? "4F" : "DD"}
         onDoneCallback={haptic}
         onNextCallback={haptic}

src/components/KeyboardToolbar/index.tsx

@@ -15,6 +15,11 @@ import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
 import type { ReactNode } from "react";
 import type { GestureResponderEvent, ViewProps } from "react-native";
 
+type SafeAreaInsets = {
+  left: number;
+  right: number;
+};
+
 export type KeyboardToolbarProps = Omit<
   ViewProps,
   "style" | "testID" | "children"
@@ -54,6 +59,7 @@ export type KeyboardToolbarProps = Omit<
    * A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
    */
   opacity?: HEX;
+  insets?: SafeAreaInsets;
 } & Pick<KeyboardStickyViewProps, "offset" | "enabled">;
 
 const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
@@ -83,6 +89,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   opacity = DEFAULT_OPACITY,
   offset: { closed = 0, opened = 0 } = {},
   enabled = true,
+  insets,
   ...rest
 }) => {
   const colorScheme = useColorScheme();
@@ -110,8 +117,12 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
       {
         backgroundColor: `${theme[colorScheme].background}${opacity}`,
       },
+      {
+        paddingLeft: insets?.left,
+        paddingRight: insets?.right,
+      },
     ],
-    [colorScheme, opacity, theme],
+    [colorScheme, opacity, theme, insets],
   );
   const offset = useMemo(
     () => ({ closed: closed + KEYBOARD_TOOLBAR_HEIGHT, opened }),