Skip to content

fix(android): don't tint the whole pager when it takes keyboard focus - #1152

Merged
troZee merged 1 commit into
callstack:pager-8from
youchi1:fix/android-pager-focus-highlight
Oct 8, 2026
Merged

troZee merged 1 commit into
callstack:pager-8from
youchi1:fix/android-pager-focus-highlight

Conversation

@youchi1

@youchi1 youchi1 commented Sep 30, 2026

Copy link
Copy Markdown

Summary

Fixes #1151.

On Android 8+, after a TextInput inside a PagerView blurs while a hardware keyboard is in use, Android gives focus to ViewPager2's internal RecyclerView and draws its default focus highlight over every page. The result is a grey tint (about 7.5 % black) that stays until another view takes focus.

This PR turns off the default focus highlight on that RecyclerView (API 26+). The view stays focusable, so keyboard navigation does not change, and page children keep their own focus highlight.

Impact: Android only, PagerViewViewManager.createViewInstance (one import and three lines of code).

Test Plan

What's required for testing (prerequisites)?

An Android 8+ emulator (its host keyboard is a hardware keyboard) or a device with a hardware keyboard, and a PagerView page with a TextInput (snippet in #1151).

What are the steps to reproduce (after prerequisites)?

  1. Tap the TextInput, type with the hardware keyboard, then press Enter. With adb: adb shell input text hello, then adb shell input keyevent KEYCODE_ENTER.
  2. Before this change: the whole pager turns grey, and adb shell dumpsys window | grep mInTouchMode prints mInTouchMode=false.
  3. After this change: no tint. The RecyclerView still takes focus, so only the highlight changes.

We verified this exact change in our app as a patch on 8.0.4 (React Native 0.81.5, New Architecture, Android 17 emulator). After Enter, the page keeps its colors (#FBF6F0 background, #FFFFFF field). Before the change they were #E8E4DE and #ECECEC. We did not build this repo's example app.

Compatibility

OS Implemented
iOS N/A
Android ✅

Checklist

  • I have tested this on a device and a simulator (Android emulator only)
  • I added the documentation in README.md (not needed)
  • I updated the typed files (TS and Flow) (not needed)

🤖 Generated with Claude Code

@troZee

troZee commented Sep 30, 2026

Copy link
Copy Markdown
Collaborator

Hello 👋
Thank you for your contribution. Could you test whether this issue exists on the main branch as well?

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot review overview

🟢 Approval recommended

The focused, API-gated change directly addresses the documented Android behavior without altering keyboard navigation.

Review effort: Balanced
Findings: None

What changed in this PR

Disables Android’s default focus highlight on ViewPager2’s internal RecyclerView to prevent whole-page tinting after keyboard focus changes.

Changes:

  • Adds an API 26+ guard.
  • Disables the RecyclerView’s default focus highlight without changing focus behavior.
File Description
android/​src/​main/​java/​com/​reactnativepagerview/​PagerViewViewManager.kt Applies the Android focus-highlight fix during pager creation.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

@youchi1

youchi1 commented Oct 2, 2026

Copy link
Copy Markdown
Author

Hello 👋 Thank you for your contribution. Could you test whether this issue exists on the main branch as well?

oh sorry, don't know why claude opened it for non-master branch, I was testing it on the latest package version.

@youchi1
youchi1 changed the base branch from pager-8 to master October 2, 2026 13:43
@youchi1
youchi1 changed the base branch from master to pager-8 October 2, 2026 13:46
@youchi1

youchi1 commented Oct 2, 2026

Copy link
Copy Markdown
Author

Closing: we moved to v9, which does not have this bug.

@youchi1 youchi1 closed this Oct 2, 2026
@troZee troZee reopened this Oct 5, 2026
@troZee

troZee commented Oct 5, 2026

Copy link
Copy Markdown
Collaborator

I will reopen that and merge it for 8.x version in my free time

After a hardware key takes the window out of touch mode, a TextInput that blurs hands focus to ViewPager2's internal RecyclerView. It has no focused-state drawable, so Android 8+ draws its default focus highlight over every page. Disable that highlight; the RecyclerView stays focusable and page children keep their own highlight.
@troZee
troZee force-pushed the fix/android-pager-focus-highlight branch from 560f0b4 to 3739446 Compare October 7, 2026 18:38
@troZee
troZee merged commit caeb7e3 into callstack:pager-8 Oct 8, 2026
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Android] Whole pager gets a grey tint after a TextInput blurs while a hardware keyboard is used (v8)

3 participants