Skip to content

[Compatibility] Incorrect Scaling of Predictive Text Candidates - UI Regression on Specific Android Devices #55258

@Mr-Nld

Description

@Mr-Nld

Description

🛑 Impact Statement

We have identified a device-specific rendering incompatibility that is preventing us from standardizing our app across all Android platforms. We are eager to upgrade our library version to utilize new features, but this UI distortion on the predictive text bar is a quality-gate blocker. We cannot ship an update that introduces such visible UI regressions on popular handsets.

Description

On specific Android devices (particularly those with custom vendor overlays or specific display scaling settings), the predictive text candidate bar (suggestions above the keyboard) renders at an incorrect scale—either significantly too small or disproportionately large. This suggests a conflict between how the library manages font-scaling/view-bounds and how the system IME renders its overlays.

Environment & Observations

  • Affected Devices: [e.g., Google Pixel 7a, Sony Xperia 5 series, Samsung Galaxy S series with specific font settings].
  • React Native Version: [Insert Version].
  • Observation: The issue persists even when allowFontScaling is toggled, indicating a deeper rendering synchronization issue.

Steps to Reproduce

  1. Open the app on an affected device with system font scaling set to anything other than "Default".
  2. Focus any text input field to trigger the soft keyboard.
  3. Type characters to trigger the predictive text bar.
  4. Observe the distorted scaling of the suggestion text compared to the system's native behavior in other apps.

Expected Behavior

The predictive text candidates should be rendered using the system's native scaling parameters, ensuring a seamless and accessible UI.

Actual Behavior

The rendering is inconsistent, creating a poor user experience. We need guidance or a fix to ensure compatibility before we can move forward with our library update roadmap.

Steps to reproduce

Steps to Reproduce

  1. Open the app on an affected device with system font scaling set to anything other than "Default".
  2. Focus any text input field to trigger the soft keyboard.
  3. Type characters to trigger the predictive text bar.
  4. Observe the distorted scaling of the suggestion text compared to the system's native behavior in other apps.

React Native Version

0.80~

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.1
  CPU: (12) arm64 Apple M3 Pro
  Memory: 512.42 MB / 18.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 20.12.0 - /usr/local/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 10.5.0 - /usr/local/bin/npm
  Watchman: 2024.05.06.00 - /opt/homebrew/bin/watchman
SDKs:
  iOS SDK:
    Platforms: DriverKit 24.0, iOS 18.1, macOS 15.1, tvOS 18.1, visionOS 2.1, watchOS 11.1
  Android SDK:
    API Levels: 31, 33, 34, 35, 36
    Build Tools: 30.0.3, 33.0.0, 34.0.0, 35.0.0
    System Images: android-35 | Google Play ARM 64 v8a
IDEs:
  Android Studio: AI-241.18034.62.2411
  Xcode: 16.1/16B40 - /usr/bin/xcodebuild
Languages:
  Java: 17.0.11 - /usr/bin/javac
npmPackages:
  @react-native-community/cli: Not Found
  react: 18.3.1 => 18.3.1 
  react-native: 0.76.3 => 0.76.3

Screenshots and Videos

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    DebuggingIssues related to React Native DevTools or legacy JavaScript/Hermes debuggingImpact: RegressionDescribes a behavior that used to work on a prior release, but stopped working recently.Needs: Author FeedbackNeeds: ReproThis issue could be improved with a clear list of steps to reproduce the issue.Needs: Version InfoPlatform: AndroidAndroid applications.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions