Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect lines in onTextLayout when using textAlign: 'justify' in Android #50226

Open
evrrnv opened this issue Mar 24, 2025 · 4 comments
Open
Labels
Needs: Attention Issues where the author has responded to feedback. Platform: Android Android applications. Type: Unsupported Version Issues reported to a version of React Native that is no longer supported

Comments

@evrrnv
Copy link

evrrnv commented Mar 24, 2025

Description

As you can see, this is the rendered text in the device (Android)

enter image description here

But when I get the lines from onTextLayout, I get the following lines:

[
"Change code in the editor and watch it change on your phone! ",
"Save to get a shareable url. Change code in the editor and ",
"watch it change on your phone! Save to get a shareable url. ",
"Change code in the editor and watch it change on your phone! ",
"Save to get a shareable url."
]

These lines are the original lines before textAlign: 'justify' is applied, but I want to get the lines when justify alignment is applied.

I compared the behavior to iOS, the way iOS justify the text is different, it keeps the lines are they are without pushing the text to fill the space (as in the 4th line).

I want rendered text and text returned from onTextLayout to be the same, is there anyway to achieve that?

Steps to reproduce

https://snack.expo.dev/@abdel.moun/incorrect-lines

React Native Version

0.74.3

Affected Platforms

Runtime - Android

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

System:
  OS: macOS 15.3.2
  CPU: (10) arm64 Apple M1 Pro
  Memory: 159.88 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.5.1
    path: ~/.nvm/versions/node/v22.5.1/bin/node
  Yarn:
    version: 4.5.0
    path: ~/.nvm/versions/node/v22.5.1/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v22.5.1/bin/npm
  Watchman:
    version: 2024.10.21.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "28"
      - "29"
      - "30"
      - "31"
      - "34"
      - "35"
    Build Tools:
      - 28.0.3
      - 29.0.2
      - 30.0.2
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12483815
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.3
    wanted: 0.74.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

[
"Change code in the editor and watch it change on your phone! ",
"Save to get a shareable url. Change code in the editor and ",
"watch it change on your phone! Save to get a shareable url. ",
"Change code in the editor and watch it change on your phone! ",
"Save to get a shareable url."
]

Reproducer

https://snack.expo.dev/@abdel.moun/incorrect-lines

Screenshots and Videos

No response

@react-native-bot react-native-bot added the Type: Unsupported Version Issues reported to a version of React Native that is no longer supported label Mar 24, 2025
@react-native-bot
Copy link
Collaborator

Warning

Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

@react-native-bot
Copy link
Collaborator

Warning

Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

@cortinico
Copy link
Contributor

0.74.3

Have you tried against a newer version of RN? As mentioned by the bot above, 0.74 is out of support

@evrrnv
Copy link
Author

evrrnv commented Mar 24, 2025

0.74.3

Have you tried against a newer version of RN? As mentioned by the bot above, 0.74 is out of support

Yes, I tried it, and I got the same issue

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Mar 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs: Attention Issues where the author has responded to feedback. Platform: Android Android applications. Type: Unsupported Version Issues reported to a version of React Native that is no longer supported
Projects
None yet
Development

No branches or pull requests

3 participants