react / react/yoga

`flexBasis` doesn't recalculate when rotating the screen

Open
#1,552 2 comments 0 reactions 0 assignees View on GitHub

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:

image

(red line denotes landscape mode height)

Expected:

image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.