facebook / yoga

Yoga is an embeddable layout engine targeting web standards.

Home Page:https://yogalayout.dev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`flexBasis` doesn't recalculate when rotating the screen

szmarczak opened this issue · comments

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>
  );
}

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.