Skip to content

Conversation

@kirillzyusko
Copy link
Owner

@kirillzyusko kirillzyusko commented Nov 20, 2025

📜 Description

Added an ability to have a bi-directional communication and read/update layout from JS on demand.

💡 Motivation and Context

This PR adds a command that we can dispatch from JS in order to get an actual layout of focused input. The task sounds pretty simple, but I anyway had some problems, and would like to describe solutions from them here.

First of all the querying of layout is an async operation and we need to wait for completion before running a worklet code (so that we can be sure, that event has been actually dispatched and shared-value has up-to-date value). But default mechanism for view commands not suppose to return any kind of data back to the JS thread. Alternative option is to define "module" method and return the data/completion status from there. However in new architecture it is highly not recommended to use such approach, because this approach relies on RN internals that can be changed/removed from the future. So I decided to go with recommended approach. To overcome asynchronous stuff I decided to set one-time listener and resolve a promise when I get specific layoutDidSynchronize event - this is not a perfect solution but does a job for now and doesn't use deprecated stuff, so I'm pretty happy.

On a high level overview - we pass update function through the context, because context has an access to KeyboardControllerView and from there we dispatch/wait.

Also I decided to expose assureFocusedInputVisible method for KeyboardAwareScrollView. In the past I had requirements to scroll a little bit when validation error appears, and back to the time I just hard-coded it like ref.current.scrollTo(50), but of course this fix didn't handle all the cases. Now it's just enough to call ref.current.assureFocusedInputVisible() and enjoy pixel perfect automatic calculations 😎

And in the end I decided to cover new functionality with e2e tests so that we will not break them accidentally in the future 🤞

Closes #1208

📢 Changelog

Docs

  • added info about new update method;
  • added info about assureFocusedInputVisible method of ref;

E2E

JS

  • added synchronizeFocusedInputLayout command for KeyboardControllerView;
  • added KeyboardController::layoutDidSynchronize event;
  • expose assureFocusedInputVisible method for KeyboardAwareScrollView;

iOS

  • implement synchronizeFocusedInputLayout command for paper/fabric;

Android

  • implement synchronizeFocusedInputLayout command for paper/fabric;

🤔 How Has This Been Tested?

Tested manually on iPhone 16 Pro (iOS 26.0)/Pixel 6 Pro (API 31, 35) both paper/fabric.

📸 Screenshots (if appropriate):

Android iOS
Screen.Recording.2025-11-25.at.13.02.03.mov
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-11-25.at.13.00.08.mov

📝 Checklist

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

@kirillzyusko kirillzyusko self-assigned this Nov 20, 2025
@kirillzyusko kirillzyusko added documentation Improvements or additions to documentation enhancement New feature or request e2e Anything about E2E tests focused input 📝 Anything about focused input functionality labels Nov 20, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Nov 20, 2025

PR Preview Action v1.6.3
Preview removed because the pull request was closed.
2025-11-25 13:44 UTC

@argos-ci
Copy link

argos-ci bot commented Nov 20, 2025

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

Build Status Details Updated (UTC)
default (Inspect) 👍 Changes approved 1 changed Nov 25, 2025, 12:50 PM

@kirillzyusko kirillzyusko force-pushed the feat/sync-layout-from-js branch from 26e7c98 to c14bf7a Compare November 21, 2025 11:38
@github-actions
Copy link
Contributor

github-actions bot commented Nov 21, 2025

📊 Package size report

Current size Target Size Difference
230076 bytes 226542 bytes 3534 bytes 📈

@kirillzyusko kirillzyusko marked this pull request as ready for review November 25, 2025 10:14
@kirillzyusko kirillzyusko merged commit 14ededa into main Nov 25, 2025
34 checks passed
@kirillzyusko kirillzyusko deleted the feat/sync-layout-from-js branch November 25, 2025 13:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation e2e Anything about E2E tests enhancement New feature or request focused input 📝 Anything about focused input functionality

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Not scrolling to focused input field at top of the screen

3 participants