Repository navigation
flexBasis doesn't recalculate when rotating the screen #1552
Description
Description
Actual:
(red line denotes landscape mode height)
Expected:
Steps to reproduce
Run Expo go in landscape. Scan the QR code to open the app. Rotate phone. Bug. (Android)
React Native Version
0.72.9
Affected Platforms
Runtime - Android
Output of npx react-native info
> npx react-native info
info Fetching system and libraries information...
System:
OS: Windows 11 10.0.22631
CPU: "(12) x64 AMD Ryzen 5 5600 6-Core Processor "
Memory: 16.68 GB / 31.91 GB
Binaries:
Node:
version: 20.2.0
path: C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm:
version: 9.7.2
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: Not Found
Visual Studio:
- 17.8.34316.72 (Visual Studio Community 2022)
Languages:
Java:
version: 11.0.20.1
path: C:\Program Files\Eclipse Adoptium\jdk-11.0.20.101-hotspot\bin\javac.EXE
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.9
wanted: 0.72.9
react-native-windows: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
info React Native v0.73.2 is now available (your project is running on v0.72.9).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.73.2
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.72.9
info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows&platform=android".
Stacktrace or Logs
.
Reproducer
https://snack.expo.dev/@szmarczak/crabby-orange-coffee
Screenshots and Videos
import { View, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={StyleSheet.absoluteFill}>
<View style={{flexBasis: '100%', backgroundColor: 'black'}} />
</View>
);
}
Activity
NickGerleman commentedon Jan 14, 2024
Yoga has known bug around flex basis invalidation that this might be running into. There have been a couple of different attempts to solve over the years from different people, but IIRC previous attempts led to breaks, either bc of implementation doing something wrong, or because product code relied on incorrectly stale flex basis.
Needs another look, since folks seem to run into this fairly regularly.
NickGerleman commentedon Nov 29, 2024
Code for reference. https://github.com/facebook/yoga/blob/be72b8e8aaaa9cb4b2164d22577b0acc17f0ff4a/yoga/algorithm/CalculateLayout.cpp#L104
Rolling out WebFlexBasis has caused breakage before on internal surfaces, but I this may be an implementation issue instead of breaking change. E.g. I think using generation count equality as the dirty test in ExperimentalWebFlexBasis is wrong, since we can compute the flex basis of the same node, under different constraints, in the same layout generation.
@rozele FYI
tomekzaw commentedon Oct 16, 2026
Minimal C++ reproduction on current main (52f6d0b):
computeFlexBasisForChildonly recomputes a resolved flex basis whencomputedFlexBasisis undefined, or, withWebFlexBasis, when the generation changed. The child isn't dirty (only the root's style changed), so it keeps 25% of the old height. WithYGExperimentalFeatureWebFlexBasisenabled the second layout gives 300. #2020 doesn't change this case: it covers the flex basis measured from content, while a percentflexBasisgoes through theuseResolvedFlexBasisbranch.