[Bug][iOS 12] Content not visible in nested Views on iOS 12

[kesha-antonov]

Description

Hi,

when we have 79 Views in hierarchy we stop seeing content. I've noticed bug in iOS 12. Everything works in iOS 13+

Version

0.67.2

Output of npx react-native info

System: OS: macOS 12.2 CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz Memory: 571.72 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm Watchman: 2022.01.24.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.2 - /Users/kesha/.rbenv/shims/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: Not Found IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8092744 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 15.0.2 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.67.2 => 0.67.2 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

1. git clone https://github.com/kesha-antonov/rn_nested_views_bug_ios_12
2. Run project in Xcode on iPad 9.7 simulator on iOS 12
3. See no text in the simulator window
4. Remove one nested View
5. See text in a simulator

Snack, code example, screenshot, or link to a repository

https://github.com/kesha-antonov/rn_nested_views_bug_ios_12

https://user-images.githubusercontent.com/11584712/152360415-e5115656-543e-4fcd-a343-514ec5f8eeed.mov

[kmsbernard]

It seems to be a limitation of iOS rather than an issue of React Native. The same behavior is appeared in an iOS native project, and still exists in current iOS version but with higher limit. https://developer.apple.com/forums/thread/665283

And from my observations, the limit seems to be different depending on the device type - iPad or iPhone.

You may need to contact Apple Support to resolve this issue.

[kesha-antonov]

It seems to be a limitation of iOS rather than an issue of React Native. The same behavior is appeared in an iOS native project, and still exists in current iOS version but with higher limit. https://developer.apple.com/forums/thread/665283

And from my observations, the limit seems to be different depending on the device type - iPad or iPhone.

You may need to contact Apple Support to resolve this issue.

Wow Didn't know Limit is reachable when you use react-navigation and other libs

[kmsbernard]

Perhaps it will be possible to avoid exceeding the limit after introducing the Fabric renderer which enables view flattening. It's currently in the release candidate stage.

[kesha-antonov]

Perhaps it will be possible to avoid exceeding the limit after introducing the Fabric renderer which enables view flattening. It's currently in the release candidate stage.

Sounds promising

[github-actions[bot]]

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.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.