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

[iOS] Background Color on Text highlights empty spaces and not the actual characters only #23929

Closed
isbaek opened this issue Mar 14, 2019 · 2 comments
Labels
Bug Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: iOS iOS applications. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@isbaek
Copy link

isbaek commented Mar 14, 2019

🐛 Bug Report

Putting a background color on long words on iOS highlights empty spaces, if the highlighted words are multi-line and can't fit into a single line.

Attaching screenshots since it's a bit difficult to explain without pics:
iOS iPhone 7

IMG_5CE340F9D39B-1

Compare this to the behavior on Android which is expected, correct behavior:
Android
Screenshot_20190314-060739

To Reproduce

  1. Create a sentence wrapped in Text element
  2. Wrap certain long words within the sentence in another Text element with a background color
  3. Observe that these long words overflow to the next line and the empty spaces get highlighted on iOS

Expected Behavior

Like Android screenshot above, it should not highlight empty spaces

Code Example

https://snack.expo.io/@yunibaek/aGVsbG

Environment

  • My current project's env where I encountered this bug

    React Native Environment Info:
    System:
    OS: macOS 10.14.3
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 89.25 MB / 8.00 GB
    Shell: 5.3 - /bin/zsh
    Binaries:
    Node: 10.12.0 - ~/.nvm/versions/node/v10.12.0/bin/node
    Yarn: 1.10.1 - ~/.nvm/versions/node/v10.12.0/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.12.0/bin/npm
    SDKs:
    iOS SDK:
    Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    Android SDK:
    API Levels: 28
    Build Tools: 28.0.3
    System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
    IDEs:
    Android Studio: 3.2 AI-181.5540.7.32.5056338
    Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
    react: 16.5.0 => 16.5.0
    react-native: https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz => 0.57.1
    npmGlobalPackages:
    react-native-cli: 2.0.1

@react-native-bot react-native-bot added the Platform: iOS iOS applications. label Mar 14, 2019
@Salakar Salakar added the Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. label Mar 21, 2019
@stale
Copy link

stale bot commented Aug 2, 2019

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 2, 2019
@stale
Copy link

stale bot commented Aug 9, 2019

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Aug 9, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Aug 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: iOS iOS applications. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

4 participants