DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

flexBasis doesn't recalculate when rotating the screen #1552

New Issue
Open
opened 2024-01-13 19:12:53 -08:00 by szmarczak · 2 comments
szmarczak commented 2024-01-13 19:12:53 -08:00 (Migrated from github.com)
Copy Link

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>
  );
}
### Description Actual: ![image](https://github.com/facebook/react-native/assets/36894700/56073065-c79e-477e-bce8-5a4b04451848) (red line denotes landscape mode height) Expected: ![image](https://github.com/facebook/react-native/assets/36894700/8fb19cec-dd84-4085-b4e6-7487433bf17d) ### 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` ```text > 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 ```text . ``` ### Reproducer https://snack.expo.dev/@szmarczak/crabby-orange-coffee ### Screenshots and Videos ```js import { View, StyleSheet } from 'react-native'; export default function App() { return ( <View style={StyleSheet.absoluteFill}> <View style={{flexBasis: '100%', backgroundColor: 'black'}} /> </View> ); } ```
NickGerleman commented 2024-01-13 22:21:06 -08:00 (Migrated from github.com)
Copy Link

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.

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 commented 2024-11-28 20:42:25 -08:00 (Migrated from github.com)
Copy Link

Code for reference. be72b8e8aa/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

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
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Algorithm
Build and Infrastructure
C#
C++ Enhancement
CLA Signed
Discussion
Documentation
Feature Request
Java
JavaScript
Merged
Question
Reverted
Shared with Meta
Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
YogaKit
YogaLayout ViewGroup
bug
dependencies
Pull requests that update a dependency file
duplicate
enhancement
fb-exported
fh:direct-merge-enabled
invalid
ruby
Pull requests that update Ruby code
wontfix
No Label
Algorithm
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
DaddyFrosty
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1552
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?