Percentage dimensions on View doesn't need a defined size on the parent
Description
According to the docs, https://reactnative.dev/docs/height-and-width#percentage-dimensions, when using percentage dimensions, the parent should have defined size otherwise the children Views with percentage dimensions are not visible. However, this is not true when testing on iOS/Android. The Views with percentage values for height/width are visible without any dimension set on the parent. The expected behaviour is only seen on the web.
React Native Version
0.72.4
Output of npx react-native info
System: OS: macOS 13.5.2 CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz Memory: 4.33 GB / 32.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 16.15.0 path: /usr/local/bin/node Yarn: version: 1.22.19 path: /usr/local/bin/yarn npm: version: 8.5.5 path: /usr/local/bin/npm Watchman: version: 2022.10.17.00 path: /usr/local/bin/watchman Managers: CocoaPods: version: 1.11.3 path: /usr/local/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 23.0 - iOS 17.0 - macOS 14.0 - tvOS 17.0 - watchOS 10.0 Android SDK: Not Found IDEs: Android Studio: 2021.3 AI-213.7172.25.2113.9123335 Xcode: version: 15.0/15A240d path: /usr/bin/xcodebuild Languages: Java: version: 14.0.2 path: /usr/bin/javac Ruby: version: 2.6.10 path: /usr/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.5 wanted: ^0.72.5 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: Not found newArchEnabled: Not found iOS: hermesEnabled: Not found newArchEnabled: Not found
Steps to reproduce
Make a new project and in App.js return: <View> <View style={{ height: "20%", backgroundColor: "blue" }} /> <View style={{ height: "50%", backgroundColor: "red" }} /> <View style={{ height: "30%", backgroundColor: "green" }} /> </View>
Snack, screenshot, or link to a repository
https://snack.expo.dev/@nedach/c838e6
child views visible on iOS/Android:
child views not visible on Web:
| :warning: | Newer Version of React Native is Available! |
|---|---|
| :information_source: | You are on a supported minor version, but it looks like there's a newer patch available - 0.72.5. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases. |
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue was closed because it has been stalled for 7 days with no activity.