react-native: doesn't recalculate it's size when a descendant changes height due to wrapping following a device rotation
🐛 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
About this issue
- Original URL
- State: open
- Created 5 years ago
- Reactions: 8
- Comments: 22 (9 by maintainers)
This is still an issue.
Still an issue with 0.61.5
Still a bug.
Seeing the same thing…
Text in Portrait: “bla bla bla bla <new line> 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.
Still an issue
El vie., 25 de diciembre de 2020 19:16, stale[bot] notifications@github.com escribió:
Still an issue.
I fixed it by making sure the immediate parent view has flex 0.
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 issueI tried
none of them can solve issue.
I guess inline
Math.random()
make RN re-trigger something to manipulate iOS recalculateI REAL wonder does this workaround can solve rest of yours’ issue ??? 🤔 give me a emoji if this super weird workaround help you