<View /> doesn't recalculate it's size when a descendant <Text /> changes height due to wrapping following a device rotation

[jeremywiebe]

🐛 Bug Report

I believe I've found a bug in the View size calculation logic in React Native. In certain cases, the ancestor View fails to recalculate its size if a descendant <Text /> component changes in size due to a rotation and subsequent text (re)wrapping.

The following shows three states: initial, rotated, and back to original orientation. Notice that the fuschia view "grows" after returning to the original orientation.

Initial orientation

Portrait

Back to initial orientation

Speculative Analysis and Workaround

This appears to be an issue where an ancestor view caches a layout calculation and doesn't trigger a re-calculation when a nested Text component changes in size due to orientation changes.

After some playing around, we've figured out that if you "poke" any of the style properties that affect the view's style layout, the view will recalculate and be correct. We did this by toggling a state var upon rotation and then adding/removing a style object to the view's styles array that contained an extra paddingBottom that mirrored the existing padding on the view (basically we changed the style but the effect had no changes to the layout).

You can see a demo of the workaround by uncommenting the line of code below the FIXME comment in the code sample.

To Reproduce

See the code, but basically if you have a <ScrollView> that contains a container <View> which contains another <View> and then have a <Text> element inside that view... this layout bug will happen. I haven't been able to reduce this example further than that.

Expected Behavior

After rotating and going back to the initial orientation, the View should be exactly the same size.

Code Example

Github repo: https://github.com/jeremywiebe/react-native-text-orientation-bug

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.2
      CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
      Memory: 34.97 MB / 16.00 GB
      Shell: 3.0.0 - /usr/local/bin/fish
    Binaries:
      Node: 8.15.0 - /usr/local/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 25, 27
        Build Tools: 23.0.1, 25.0.0, 25.0.2, 25.0.3, 27.0.3, 28.0.1, 28.0.2, 28.0.3
        System Images: android-16 | Intel x86 Atom, android-16 | Google APIs Intel x86 Atom, android-19 | Intel x86 Atom, android-19 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-24 | Google APIs Intel x86 Atom, android-24 | Google Play Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3 
      react-native: 0.58.4 => 0.58.4 

[creambyemute]

Experiencing the same Problem.

I have a card which will wrap it's content (text) when changing from landscape <--> portrait due to space limitation. When changing back, the card is getting bigger.

[stale]

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.

[jeremywiebe]

stale[bot] this is still an issue. Please don’t close this bug.

[cristianoccazinsp]

Seeing the same thing...

Text in Portrait: "bla bla bla bla bla bla..." ( 2 lines)
Text in Landscape: 'bla bla bla bla bla bla" (1 line)
Text in Portrait again after rotating: "bla bla bla bla...." (1 line)

Happens on iOS only.

[cristianoccazinsp]

Any luck with this? Looks like poking the style prop of the view (e.g., adding a random min height each time onLayout is called) can fix the issue, but this is quite ugly and also would make every view slower.

Any quick efficient work around?

[stale]

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.

[cristianoccazinsp]

Still an issue with 0.61.5

[stale]

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.

[cristianoccazinsp]

This is still an issue and hasn't been fixed.

[stale]

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.

[cristianoccazinsp]

This is still an issue.

[tapz]

Not sure if it's the same issue, but in Android when rotating the device to landscape the window scaled outside of the visible screen area. So if I position something absolutely and set right: 0, the view is partially outside the screen. This didn't happen in RN 0.62. I'm using RN 0.63.2 and React 16.13.1.

[stale]

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.

[cristianoccazinsp]

Still an issue El vie., 25 de diciembre de 2020 19:16, stale[bot] <[email protected]> escribió:

…

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. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#23443 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALU263ESPHT7MU7TLDBIZKLSWUFNDANCNFSM4GXJWIYA> .

[Jacky-Rolo]

I have a very very similar issue (react-native: 0.64.2), but @jeremywiebe 's workaround is NOT work for me.

Some how add inline Math.random() can solve my issue

<View style{{ flex ...}}>
  // Children
  <Text style={{display: 'none'}}>{`${Math.random()}`}</Text>  //  <-- super weird work around
</View>

I tried

1. use key to re-mount whole component
2. use fixed string replace Math.random
3. use state to store Math.random, update it after rotate

none of them can solve issue.

I guess inline Math.random() make RN re-trigger something to manipulate iOS recalculate

I REAL wonder does this workaround can solve rest of yours' issue ??? 🤔
give me a emoji if this super weird workaround help you

[cristianoccazinsp]

I fixed it by making sure the immediate parent view has flex 0.

…

El 1 oct. 2021, a la(s) 00:28, Jacky ***@***.***> escribió:  I have a very very similar issue, but @jeremywiebe 's workaround is NOT work for me. Some how add inline Math.random() can solve my issue <View style{{ flex ...}}> // Children <Text style={{display: 'none'}}>{`${Math.random()}`}</Text> // <-- super weird work around </View> I tried use key to re-mount whole component use fixed string replace Math.random use state to store Math.random, update it after rotate none of them can solve issue. I guess inline Math.random() make RN re-trigger something to manipulate iOS recalculate I REAL wonder does this workaround can solve rest of yours' issue ??? 🤔 give me a emoji if this super weird workaround help you — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[stale]

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.

[cristianoccazinsp]

Still a bug.

[dnlgrgly]

For me, randomly updating the minHeight of the View containing the Text did the trick. Like so:

<View style={{ minHeight: Math.random() }}>
  <Text></Text> // <-- the text that changes their height
</View>

[cristianoccazinsp]

That’s an awful work around as it means constant re renders, and hard to explain. Would you do this for every text component you use?

[github-actions]

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.

[jeremywiebe]

Still an issue.