feat: `KeyboardToolbar.Group` by kirillzyusko · Pull Request #881 · kirillzyusko/react-native-keyboard-controller

kirillzyusko · 2025-03-25T14:20:38Z

📜 Description

Added KeyboardToolbar.Group component.

💡 Motivation and Context

This PR adds new KeyboardToolbar.Group component and corresponding native view. The idea is that with new component we can define a group of related inputs so that other inputs will not be scanned.

The idea is similar to https://github.com/hackiftekhar/IQKeyboardManager/wiki/Manual-Management#show-previousnext-arrow-buttons-for-textfield-which-are-not-direct-disblings

Closes #470

📢 Changelog

Docs

add API reference how to use new API;

JS

declare KeyboardToolbarGroupView component (codegen);
updated mocks file;
added snapshot testing for rendering compound KeyboardToolbar;

iOS

update traversal algorithm to take KeyboardToolbarGroupView into consideration;
added unit tests to cover new functionality;

Android

update traversal algorithm to take KeyboardToolbarGroupView into consideration;
added unit tests to cover new functionality;

🤔 How Has This Been Tested?

Tested manually on:

Pixel 7 Pro (API 36, real device)
iPhone 17 Pro (iOS 26.2, simulator)

📸 Screenshots (if appropriate):

Android	iOS
Screen.Recording.2026-03-13.at.11.13.02.mov	Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-03-13.at.10.59.46.mov

📝 Checklist

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

github-actions · 2025-03-25T14:24:13Z

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-03-13 10:47 UTC

argos-ci · 2025-03-25T14:26:11Z

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Mar 13, 2026, 10:00 AM

github-actions · 2025-03-25T14:33:27Z

📊 Package size report

Current size	Target Size	Difference
306842 bytes	303644 bytes	3198 bytes 📈

kirillzyusko · 2025-03-28T09:56:09Z

A slightly better approach would be to introduce a component:

<KeyboardToolbar.Group name="group1" discoverable>
</KeyboardToolbar.Group>

In this what effectively we would do is to split inputs in group under their own names. Such approach is more flexible in my inderstanding, because if we would have tab-view written in pure JS:

Tab1	Tab2	Tab3

Then we in last input of tab 1 we could easily go to the second tab. If we would use KeyboardToolbar.Exclude it would serve our purposes, but the mental model here would be slightly corrupted. What effectively we want to achieve is to have groups of inputs and not "exclude" part of inputs from main view hierarchy.

I think a new API should offer better extendability for future goals.

Copilot

Copilot reviewed 6 out of 16 changed files in this pull request and generated 1 comment.

Files not reviewed (10)

android/src/base/java/com/reactnativekeyboardcontroller/KeyboardControllerPackage.kt: Language not supported
android/src/main/java/com/reactnativekeyboardcontroller/managers/KeyboardToolbarExcludeViewManagerImpl.kt: Language not supported
android/src/main/java/com/reactnativekeyboardcontroller/traversal/ViewHierarchyNavigator.kt: Language not supported
android/src/main/java/com/reactnativekeyboardcontroller/views/KeyboardToolbarExcludeReactViewGroup.kt: Language not supported
android/src/paper/java/com/reactnativekeyboardcontroller/KeyboardToolbarExcludeViewManager.kt: Language not supported
android/src/turbo/java/com/reactnativekeyboardcontroller/KeyboardControllerPackage.kt: Language not supported
docs/docs/api/components/keyboard-toolbar/index.mdx: Language not supported
ios/traversal/ViewHierarchyNavigator.swift: Language not supported
ios/views/KeyboardToolbarExcludeViewManager.h: Language not supported
ios/views/KeyboardToolbarExcludeViewManager.mm: Language not supported

## 📜 Description Added compound pattern to `KeyboardToolbar` component. ## 💡 Motivation and Context This component started as a very simple component with limited customization. However, over the time it got many new props, such as `onNextCallback` etc. and right now we have too many props for customization. Since I'm planning to add #881 I decided that it'll be a good time to refactor the component and apply compound pattern. So in the end I come up with next API design: ```tsx <KeyboardToolbar> <KeyboardToolbar.Background /> <KeyboardToolbar.Prev /> <KeyboardToolbar.Next /> <KeyboardToolbar.Content /> <KeyboardToolbar.Done /> </KeyboardToolbar> ``` > I intentionally changed `blur` prop to `background`, because with iOS 26 we may use liquid glass as a container Closes #1121 ## 📢 Changelog    ### JS - added new compound `KeyboardToolbar` API; - moved props declaration into `types.ts` file. ### Docs - added new API reference; - added migration guide. ## 🤔 How Has This Been Tested? - tested that old code works with new API and doesn't introduce visual regressions (via e2e tests) - started to use new API and assure that it doesn't break e2e tests. ## 📸 Screenshots (if appropriate): <img width="614" height="422" alt="image" src="https://github.com/user-attachments/assets/8d2cc932-7fd8-4f29-89d4-bf4961bd97dc" /> ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed

kirillzyusko added enhancement New feature or request KeyboardToolbar Anything related to KeyboardToolbar component labels Mar 25, 2025

kirillzyusko self-assigned this Mar 25, 2025

kirillzyusko force-pushed the feat/keyboard-toolbar-exclude branch from 0c409b6 to cf36b65 Compare March 25, 2025 14:22

IvanIhnatsiuk reviewed Apr 1, 2025

View reviewed changes

Comment thread android/src/main/java/com/reactnativekeyboardcontroller/traversal/ViewHierarchyNavigator.kt Outdated

Comment thread ios/traversal/ViewHierarchyNavigator.swift Outdated

kirillzyusko requested a review from Copilot April 4, 2025 17:12

Copilot AI reviewed Apr 4, 2025

View reviewed changes

Comment thread src/bindings.native.ts Outdated

kirillzyusko mentioned this pull request Sep 18, 2025

feat: compound KeyboardToolbar #1125

Merged

2 tasks

kirillzyusko force-pushed the feat/keyboard-toolbar-exclude branch from bfbd6bd to 7be09fc Compare March 10, 2026 10:35

kirillzyusko added documentation Improvements or additions to documentation tests You added or changed unit tests labels Mar 10, 2026

kirillzyusko changed the title ~~feat: KeyboardToolbar.Exclude~~ feat: KeyboardToolbar.Group Mar 12, 2026

kirillzyusko added 13 commits March 12, 2026 18:10

feat: KeyboardToolbar.Exclude

49d48b3

fix: include new view in base package too

c909502

fix: CI

f7cc032

docs: show the usage

a5557e5

feat: expose custom shadow nodes

89764bd

feat: rename Exclude to Group

65b3dbd

feat: update algorithm

7445e1c

feat: updated tests (native)

138b7c1

docs: update docs page

2aad44b

chore: update example app

86bc191

fix: changes after self review

84847e7

fix: android compilation

64ac6c9

fix: fabric builds

e7168f2

kirillzyusko added 8 commits March 12, 2026 18:10

fix: build issues

455ff6e

fix: iOS fabric build

da715bb

fix: swiftlint

24b1c82

fix: fabric compilation issues

39d38cb

docs: move docs into different position

4033b44

docs: make new component consistent with other components

40c7de4

fix: mocks

89355fb

feat: add working and testable example

f84ee76

kirillzyusko force-pushed the feat/keyboard-toolbar-exclude branch from 0d27c73 to f84ee76 Compare March 13, 2026 09:30

kirillzyusko marked this pull request as ready for review March 13, 2026 09:30

docs: add more comments to the code

6a24a17

kirillzyusko added the 🚨 requires API changes 🚨 Changes that requires changes in library API label Mar 13, 2026

kirillzyusko merged commit 4a32305 into main Mar 13, 2026
34 of 36 checks passed

kirillzyusko deleted the feat/keyboard-toolbar-exclude branch March 13, 2026 10:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: `KeyboardToolbar.Group`#881

feat: `KeyboardToolbar.Group`#881
kirillzyusko merged 22 commits intomainfrom
feat/keyboard-toolbar-exclude

kirillzyusko commented Mar 25, 2025 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 25, 2025 •

edited

Loading

Uh oh!

argos-ci Bot commented Mar 25, 2025 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 25, 2025 •

edited

Loading

Uh oh!

kirillzyusko commented Mar 28, 2025

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

kirillzyusko commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📜 Description

💡 Motivation and Context

📢 Changelog

Docs

JS

iOS

Android

🤔 How Has This Been Tested?

📸 Screenshots (if appropriate):

📝 Checklist

Uh oh!

github-actions Bot commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

argos-ci Bot commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Package size report

Uh oh!

kirillzyusko commented Mar 28, 2025

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kirillzyusko commented Mar 25, 2025 •

edited

Loading

github-actions Bot commented Mar 25, 2025 •

edited

Loading

argos-ci Bot commented Mar 25, 2025 •

edited

Loading

github-actions Bot commented Mar 25, 2025 •

edited

Loading