feat: KeyboardToolbar.Exclude

Author: kirillzyusko

android/src/main/java/com/reactnativekeyboardcontroller/KeyboardControllerPackage.kt

@@ -61,5 +61,6 @@ class KeyboardControllerPackage : TurboReactPackage() {
       KeyboardControllerViewManager(reactContext),
       KeyboardGestureAreaViewManager(reactContext),
       OverKeyboardViewManager(reactContext),
+      KeyboardToolbarExcludeViewManager(reactContext),
     )
 }

android/src/main/java/com/reactnativekeyboardcontroller/managers/KeyboardToolbarExcludeViewManagerImpl.kt

@@ -0,0 +1,16 @@
+package com.reactnativekeyboardcontroller.managers
+
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ThemedReactContext
+import com.reactnativekeyboardcontroller.views.KeyboardToolbarExcludeReactViewGroup
+import com.reactnativekeyboardcontroller.views.overlay.OverKeyboardHostView
+
+@Suppress("detekt:UnusedPrivateProperty")
+class KeyboardToolbarExcludeViewManagerImpl(mReactContext: ReactApplicationContext) {
+  fun createViewInstance(reactContext: ThemedReactContext): KeyboardToolbarExcludeReactViewGroup =
+    KeyboardToolbarExcludeReactViewGroup(reactContext)
+
+  companion object {
+    const val NAME = "KeyboardToolbarExcludeView"
+  }
+}

android/src/main/java/com/reactnativekeyboardcontroller/traversal/ViewHierarchyNavigator.kt

@@ -5,6 +5,7 @@ import android.view.ViewGroup
 import android.widget.EditText
 import com.facebook.react.bridge.UiThreadUtil
 import com.reactnativekeyboardcontroller.extensions.focus
+import com.reactnativekeyboardcontroller.views.KeyboardToolbarExcludeReactViewGroup
 
 object ViewHierarchyNavigator {
   fun setFocusTo(
@@ -25,7 +26,7 @@ object ViewHierarchyNavigator {
     fun findEditTexts(view: View?) {
       if (isValidTextInput(view)) {
         editTexts.add(view as EditText)
-      } else if (view is ViewGroup) {
+      } else if (view is ViewGroup && view !is KeyboardToolbarExcludeReactViewGroup) {
         for (i in 0 until view.childCount) {
           findEditTexts(view.getChildAt(i))
         }
@@ -91,7 +92,7 @@ object ViewHierarchyNavigator {
 
     if (isValidTextInput(child)) {
       result = child as EditText
-    } else if (child is ViewGroup) {
+    } else if (child is ViewGroup && child !is KeyboardToolbarExcludeReactViewGroup) {
       // If the child is a ViewGroup, check its children recursively
       result = findEditTextInHierarchy(child, direction)
     }

android/src/main/java/com/reactnativekeyboardcontroller/views/KeyboardToolbarExcludeReactViewGroup.kt

@@ -0,0 +1,10 @@
+package com.reactnativekeyboardcontroller.views
+
+import android.annotation.SuppressLint
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.views.view.ReactViewGroup
+
+@SuppressLint("ViewConstructor")
+class KeyboardToolbarExcludeReactViewGroup(reactContext: ThemedReactContext): ReactViewGroup(reactContext) {
+  // semantic view used in KeyboardToolbar traverse algorithm
+}

android/src/paper/java/com/reactnativekeyboardcontroller/KeyboardToolbarExcludeViewManager.kt

@@ -0,0 +1,18 @@
+package com.reactnativekeyboardcontroller
+
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.views.view.ReactViewManager
+import com.reactnativekeyboardcontroller.managers.KeyboardToolbarExcludeViewManagerImpl
+import com.reactnativekeyboardcontroller.views.KeyboardToolbarExcludeReactViewGroup
+
+class KeyboardToolbarExcludeViewManager(
+  mReactContext: ReactApplicationContext,
+) : ReactViewManager() {
+  private val manager = KeyboardToolbarExcludeViewManagerImpl(mReactContext)
+
+  override fun getName(): String = KeyboardToolbarExcludeViewManagerImpl.NAME
+
+  override fun createViewInstance(reactContext: ThemedReactContext): KeyboardToolbarExcludeReactViewGroup =
+    manager.createViewInstance(reactContext)
+}

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

@@ -281,6 +281,12 @@ const theme: KeyboardToolbarProps["theme"] = {
 Don't forget that you need to specify colors for **both** `dark` and `light` theme. The theme will be selected automatically based on the device preferences.
 :::
 
+## Components
+
+### `KeyboardToolbar.Exclude`
+
+This component is used to exclude some views from the traversal. It is useful when you want to skip specific view from being focused by toolbar arrow buttons.
+
 ## Example
 
 ```tsx

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

@@ -150,6 +150,16 @@ export default function ToolbarExample() {
           title="Flat"
           onFocus={onHideAutoFill}
         />
+        <KeyboardToolbar.Exclude>
+          <TextInput
+            contextMenuHidden
+            keyboardType="numeric"
+            placeholder="Excluded"
+            testID="TextInput#14"
+            title="Excluded"
+            onFocus={onHideAutoFill}
+          />
+        </KeyboardToolbar.Exclude>
       </KeyboardAwareScrollView>
       <KeyboardToolbar
         blur={blur}

ios/traversal/ViewHierarchyNavigator.swift

@@ -42,7 +42,7 @@ public class ViewHierarchyNavigator: NSObject {
 
       if let textInput = isValidTextInput(view) {
         textInputs.append(textInput)
-      } else {
+      } else if (String(describing: type(of: view)) != "KeyboardToolbarExcludeView") {
         for subview in view.subviews {
           findTextInputs(in: subview)
         }
@@ -90,6 +90,8 @@ public class ViewHierarchyNavigator: NSObject {
     if let validTextInput = isValidTextInput(view) {
       return validTextInput
     }
+    
+    guard String(describing: type(of: view)) != "KeyboardToolbarExcludeView" else { return nil }
 
     // Determine the iteration order based on the direction
     let subviews = direction == "next" ? view.subviews : view.subviews.reversed()

ios/views/KeyboardToolbarExcludeViewManager.h

@@ -0,0 +1,28 @@
+//
+//  KeyboardToolbarExcludeViewManager.h
+//  KeyboardController
+//
+//  Created by Kiryl Ziusko on 26/12/2024.
+//
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <React/RCTViewComponentView.h>
+#else
+#import <React/RCTBridge.h>
+#endif
+#import <React/RCTViewManager.h>
+#import <UIKit/UIKit.h>
+
+@interface KeyboardToolbarExcludeViewManager : RCTViewManager
+@end
+
+@interface KeyboardToolbarExcludeView :
+#ifdef RCT_NEW_ARCH_ENABLED
+    RCTViewComponentView
+#else
+    UIView
+
+- (instancetype)initWithBridge:(RCTBridge *)bridge;
+
+#endif
+@end

ios/views/KeyboardToolbarExcludeViewManager.mm

@@ -0,0 +1,88 @@
+//
+//  KeyboardToolbarExcludeViewManager.mm
+//  react-native-keyboard-controller
+//
+//  Created by Kiryl Ziusko on 26/12/2024.
+//
+
+#import "KeyboardToolbarExcludeViewManager.h"
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <react/renderer/components/reactnativekeyboardcontroller/ComponentDescriptors.h>
+#import <react/renderer/components/reactnativekeyboardcontroller/EventEmitters.h>
+#import <react/renderer/components/reactnativekeyboardcontroller/Props.h>
+#import <react/renderer/components/reactnativekeyboardcontroller/RCTComponentViewHelpers.h>
+
+#import "RCTFabricComponentsPlugins.h"
+#endif
+
+#import <UIKit/UIKit.h>
+
+#ifdef RCT_NEW_ARCH_ENABLED
+using namespace facebook::react;
+#endif
+
+// MARK: Manager
+@implementation KeyboardToolbarExcludeViewManager
+
+RCT_EXPORT_MODULE(KeyboardToolbarExcludeViewManager)
+
++ (BOOL)requiresMainQueueSetup
+{
+  return NO;
+}
+
+#ifndef RCT_NEW_ARCH_ENABLED
+- (UIView *)view
+{
+  return [[KeyboardToolbarExcludeView alloc] initWithBridge:self.bridge];
+}
+#endif
+
+@end
+
+// MARK: View
+#ifdef RCT_NEW_ARCH_ENABLED
+@interface KeyboardToolbarExcludeView () <RCTKeyboardToolbarExcludeViewViewProtocol>
+@end
+#endif
+
+@implementation KeyboardToolbarExcludeView {}
+
+#ifdef RCT_NEW_ARCH_ENABLED
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<KeyboardToolbarExcludeViewComponentDescriptor>();
+}
+#endif
+
+// Needed because of this: https://github.com/facebook/react-native/pull/37274
++ (void)load
+{
+  [super load];
+}
+
+// MARK: Constructor
+#ifdef RCT_NEW_ARCH_ENABLED
+- (instancetype)init
+{
+  self = [super init];
+  return self;
+}
+#else
+- (instancetype)initWithBridge:(RCTBridge *)bridge
+{
+  self = [super init];
+  return self;
+}
+#endif
+
+
+#ifdef RCT_NEW_ARCH_ENABLED
+Class<RCTComponentViewProtocol> KeyboardToolbarExcludeViewCls(void)
+{
+  return KeyboardToolbarExcludeView.class;
+}
+#endif
+
+@end

src/bindings.native.ts

@@ -60,3 +60,5 @@ export const KeyboardGestureArea: React.FC<KeyboardGestureAreaProps> =
     : ({ children }: KeyboardGestureAreaProps) => children;
 export const RCTOverKeyboardView: React.FC<OverKeyboardViewProps> =
   require("./specs/OverKeyboardViewNativeComponent").default;
+export const RCTKeyboardToolbarExcludeView: React.FC<OverKeyboardViewProps> =
+  require("./specs/KeyboardToolbarExcludeViewNativeComponent").default;

src/bindings.ts

@@ -6,6 +6,7 @@ import type {
   KeyboardControllerProps,
   KeyboardEventsModule,
   KeyboardGestureAreaProps,
+  KeyboardToolbarExcludeViewProps,
   OverKeyboardViewProps,
   WindowDimensionsEventsModule,
 } from "./types";
@@ -40,3 +41,5 @@ export const KeyboardGestureArea =
   View as unknown as React.FC<KeyboardGestureAreaProps>;
 export const RCTOverKeyboardView =
   View as unknown as React.FC<OverKeyboardViewProps>;
+export const RCTKeyboardToolbarExcludeView =
+  View as unknown as React.FC<KeyboardToolbarExcludeViewProps>;

src/components/KeyboardToolbar/index.tsx

@@ -1,7 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 
-import { FocusedInputEvents } from "../../bindings";
+import {
+  FocusedInputEvents,
+  RCTKeyboardToolbarExcludeView,
+} from "../../bindings";
 import { KeyboardController } from "../../module";
 import useColorScheme from "../hooks/useColorScheme";
 import KeyboardStickyView from "../KeyboardStickyView";
@@ -209,6 +212,8 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   );
 };
 
+KeyboardToolbar.Exclude = RCTKeyboardToolbarExcludeView;
+
 const styles = StyleSheet.create({
   flex: {
     flex: 1,

src/specs/KeyboardToolbarExcludeViewNativeComponent.ts

@@ -0,0 +1,10 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+
+import type { HostComponent } from "react-native";
+import type { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
+
+export interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>(
+  "KeyboardToolbarExcludeView",
+) as HostComponent<NativeProps>;

src/types.ts

@@ -113,6 +113,7 @@ export type KeyboardGestureAreaProps = {
 export type OverKeyboardViewProps = PropsWithChildren<{
   visible: boolean;
 }>;
+export type KeyboardToolbarExcludeViewProps = ViewProps;
 
 export type Direction = "next" | "prev" | "current";
 export type DismissOptions = {