fix(View): change default zIndex from 0 to 'auto'

[owjsub]

Description

Changes the default zIndex of View from 0 to 'auto' to fix z-index layering issues with nested components.

Problem

Setting zIndex: 0 on a positioned element establishes a new local CSS stacking context, which isolates child elements with z-index values inside their parent View. This forces developers to manually add z-index to all nested Views just to make overlapping elements work correctly, as described in #2741.

Solution

By using zIndex: 'auto' instead, View no longer establishes a stacking context by default. This allows nested elements with z-index to participate in the parent stacking context and layer naturally relative to other positioned elements in the document tree, without requiring manual z-index management throughout the component hierarchy.

Changes

• Changed zIndex from 0 to 'auto' in View's default styles
• Added test to prevent regression and document the intent

Impact

This is a behavioral change that makes z-index work more intuitively and aligns better with React Native's behavior. Existing apps that don't rely on the stacking context isolation (uncommon) should see no difference. Apps that struggled with z-index layering will now work correctly without workarounds.

Closes #2741

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 28d7d4a:

Sandbox	Source
react-native-web-examples	Configuration

[necolas]

It's been a long time since the original behavior was introduced. Either RN used to create new stacking contexts for every view, or it was a consequence of how flex items are inherently positioned for zIndex. I want to check with people like @staszekscp @EvanBacon that this change makes sense and doesn't regress existing apps. It will have to go out as a breaking change, even if it's technically a fix.

[owjsub]

It's been a long time since the original behavior was introduced. Either RN used to create new stacking contexts for every view, or it was a consequence of how flex items are inherently positioned for zIndex. I want to check with people like @staszekscp @EvanBacon that this change makes sense and doesn't regress existing apps. It will have to go out as a breaking change, even if it's technically a fix.

Back in July 2024, on react-native 0.73.6 and react-native-web 0.19.10, I started using yarn patch to set the default View zIndex to 'auto' as a workaround. I recently updated to the latest version of react-native and react-native-web and found that this patch was still necessary, so I decided to submit a PR for this.

Thank you for starting this project and I appreciate any feedback that you or the community might have.

[staszekscp]

I think that the fix makes sense, because View stays "z-index agnostic" and doesn't create a new layering context. Actually I think it could even be removed, since z-index: auto is the default value for the <div> component.

I've checked in our app and there seems to be some minor UI regressions. I didn't have time for a proper investigation to make sure it's something easily fixable or not - but I suppose we'll just need to add zIndex: 0 to a correct place to fix it.

All in all I think that the change makes sense, but maybe it's better to do some beta release to give people chance to test it first? I suppose there might be quite a lot minor regressions, as the ones I've experienced.

[necolas]

If there are regressions doesn't that mean it's not how RN behaves?

[owjsub]

The default behavior should be z-index: auto because that is the default value for the <div> component and aligns with React Native's behavior.

Regarding regressions: any project that relies on the current behavior would need to explicitly add zIndex: 0 to avoid regression. However, most apps shouldn't be relying on this behavior, and those that struggled with z-index layering would benefit from this fix.

Projects that have been using yarn patch to set zIndex to 'auto' or explicitly define zIndex on their Views would see no regression.

[necolas]

What matters here is whether the change matches how RN behaves. If there are regressions on web caused by this change, we need to understand why.

[owjsub]

After taking a closer look, this change actually diverges from how RN behaves on iOS and Android. We should not merge this.