<View /> with marginTop inside <Text /> causes increasing height loop on iPad

sidferreira commented 3 years ago

Description

This is a very peculiar issue found in https://github.com/Expensify/App/issues/5310 .

The source of the problem is, just like the title says, having an structure like the following:

<View style={{borderWidth: 10, borderColor: 'green'}}>
  <Text style={{ padding: 5, backgroundColor: 'blue', lineHeight: 20, fontSize: 15 }}>
    <View style={{height: 18, marginTop: 2, backgroundColor: 'red' }} />
  </Text>
</View>

If you have this structure, allow your app to run on iPad, and rotate the device/simulator.

The <Text /> will start to grow in height continuously.

It seems that having a second <View /> around the one with marginTop patches the problem, but doesn't actually fixes it.

Version

0.66.1

Output of `react-native info`

info Fetching system and libraries information...
System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.22 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
    Watchman: 2021.06.07.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /Users/sidferreira/.rvm/gems/ruby-2.7.2/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
    Android SDK:
      API Levels: 19, 23, 25, 27, 28, 29, 30, 31
      Build Tools: 19.1.0, 23.0.1, 27.0.3, 28.0.2, 28.0.3, 29.0.0, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 31.0.0
      System Images: android-23 | Google APIs Intel x86 Atom, android-24 | Google Play Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-28 | Automotive Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-28 | Polestar 2, android-29 | Automotive with Play Store Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-29 | Volvo XC40, android-29 | Polestar 2, android-30 | Android TV Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
      Android NDK: 21.3.6528147
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
    Xcode: 13.0/13A233 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_222 - /Users/sidferreira/.jenv/shims/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.66.1 => 0.66.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

https://github.com/sidferreira/marginTopInText

Or use this piece of code:

<View style={{borderWidth: 10, borderColor: 'green'}}>
  <Text style={{ padding: 5, backgroundColor: 'blue', lineHeight: 20, fontSize: 15 }}>
    <View style={{height: 18, marginTop: 2, backgroundColor: 'red' }} />
  </Text>
</View>

Enable iPad on XCode Run on iPad Simulator Rotate the device when the app runs

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

https://github.com/sidferreira/marginTopInText

github-actions[bot] commented 3 years ago

:warning:	Missing Environment Information
:information_source:	Your issue may be missing information about your development environment. You can obtain the missing information by running `react-native info` in a console.

github-actions[bot] commented 2 years ago

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

facebook / react-native