`flexBasis` doesn't recalculate when rotating the screen
Open
Nobody has claimed this yet.
Algorithm
- Dominant language
- C++
- Stars
- 18.9k
- Forks
- 1.6k
- Avg merge
- 1m
- Merged PRs (30d)
- 1
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>
);
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the rotation behavior with the linked Expo Snack and the shown flexBasis example on Android. Trace how flexBasis is recalculated after orientation changes, then verify that the layout matches the expected landscape result after rotation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, cpp, react-native
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100