Fix native zIndex error condition

Flex items are inherently positioned for zIndex. Unlike other elements,
flex items (direct children of a flex container) can utilize zIndex to
control their stacking order without explicitly setting a position value
other than static.

Author: necolas

packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js

@@ -114,12 +114,13 @@ export function createStrictDOMComponent<T, P: StrictProps>(
             );
           }
         });
-      }
-
-      if (nativeStyle.zIndex != null && nativeStyle.position === 'static') {
-        errorMsg(
-          '"position:static" prevents "zIndex" from having an effect. Try setting "position" to something other than "static".'
-        );
+        // Error message if the element is not a flex child but tries to use
+        // zIndex without non-static position
+        if (nativeStyle.zIndex != null && nativeStyle.position === 'static') {
+          errorMsg(
+            '"position:static" prevents "zIndex" from having an effect. Try setting "position" to something other than "static".'
+          );
+        }
       }
     }
 

packages/react-strict-dom/tests/html-test.native.js

@@ -138,38 +138,64 @@ describe('<html.*>', () => {
     });
   });
 
-  test('zIndex with position:static', () => {
-    const styles = css.create({
-      static: {
-        position: 'static',
-        zIndex: 1
-      }
-    });
-    act(() => {
-      create(<html.div style={styles.static} />);
+  describe('zIndex', () => {
+    test('with position:static', () => {
+      const styles = css.create({
+        static: {
+          position: 'static',
+          zIndex: 1
+        }
+      });
+      act(() => {
+        create(<html.div style={styles.static} />);
+      });
+      expect(console.error).toHaveBeenCalledWith(
+        expect.stringContaining(
+          '"position:static" prevents "zIndex" from having an effect.'
+        )
+      );
     });
-    expect(console.error).toHaveBeenCalledWith(
-      expect.stringContaining(
-        '"position:static" prevents "zIndex" from having an effect.'
-      )
-    );
-  });
 
-  test('zIndex with position:relative', () => {
-    const styles = css.create({
-      relative: {
-        position: 'relative',
-        zIndex: 1
-      }
+    test('with position:static flex child', () => {
+      const styles = css.create({
+        flex: {
+          display: 'flex'
+        },
+        static: {
+          position: 'static',
+          zIndex: 1
+        }
+      });
+      act(() => {
+        create(
+          <html.div style={styles.flex}>
+            <html.div style={styles.static} />
+          </html.div>
+        );
+      });
+      expect(console.error).not.toHaveBeenCalledWith(
+        expect.stringContaining(
+          '"position:static" prevents "zIndex" from having an effect.'
+        )
+      );
     });
-    act(() => {
-      create(<html.div style={styles.relative} />);
+
+    test('with position:relative', () => {
+      const styles = css.create({
+        relative: {
+          position: 'relative',
+          zIndex: 1
+        }
+      });
+      act(() => {
+        create(<html.div style={styles.relative} />);
+      });
+      expect(console.error).not.toHaveBeenCalledWith(
+        expect.stringContaining(
+          '"position:static" prevents "zIndex" from having an effect.'
+        )
+      );
     });
-    expect(console.error).not.toHaveBeenCalledWith(
-      expect.stringContaining(
-        '"position:static" prevents "zIndex" from having an effect.'
-      )
-    );
   });
 
   test('auto-wraps raw strings', () => {