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

An empty Text elements causes its parent to span vertically, printing a "ghost line" #32062

Open
jsamr opened this issue Aug 22, 2021 · 3 comments

Comments

@jsamr
Copy link

jsamr commented Aug 22, 2021

Description

This snippet:

<View
  style={{
    backgroundColor: "black",
  }}>
  <Text />
</View>

will render as:

screenshot-2021-08-22_16 52 59 65

Also note that the height of this spanning behavior is not influenced by lineHeight style.

Discussion

One would expect that an empty Text element has a zero-width and height, similarly to an empty <span> element in HTML. I would expect instead the below snippet to render as seen in the attached screenshot:

<View
  style={{
    backgroundColor: "black",
  }}>
  <Text>{"\n"}</Text>
</View>

Instead, this latter snippet renders visually like 2 lines.

React Native version:

info Fetching system and libraries information...
System:
    OS: Linux 5.13 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-8809G CPU @ 3.10GHz
    Memory: 1.25 GB / 31.28 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.4 - /usr/bin/node
    Yarn: 1.22.11 - /usr/bin/yarn
    npm: 7.20.6 - /usr/bin/npm
    Watchman: 4.9.0 - /usr/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 28, 29, 30
      Build Tools: 28.0.3, 29.0.0, 29.0.2, 29.0.3, 30.0.0, 30.0.1, 30.0.2, 30.0.3, 31.0.0, 31.0.0, 31.0.0
      System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.65.1 => 0.65.1 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Render an empty Text element inside a View;
  2. Observe the View spanning somewhere around 20px in height.

Expected Results

The parent View should have a zero height.

Snack, code example, screenshot, or link to a repository:

https://github.com/jsamr/react-native-empty-text-spans-bug

@jsamr jsamr changed the title An empty Text elements causes its parent to span vertically An empty Text elements causes its parent to span vertically, printing a "ghost line" Aug 29, 2021
@stale
Copy link

stale bot commented Jan 9, 2022

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 Jan 9, 2022
@jsamr
Copy link
Author

jsamr commented Jan 9, 2022

It is still requiring attention, stale bot.

@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 9, 2022
@fredmulligan
Copy link

Still no good?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants