First element in the tree having position:absolute is invisible until Inspect is toggled

[dzek69]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: Windows 10
CPU: ia32 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Memory: 1.36 GB / 15.89 GB
Binaries:
Node: 11.2.0 - C:\nodejs\node.EXE
Yarn: 1.12.3 - C:\Apps\Yarn\bin\yarn.CMD
npm: 6.4.1 - C:\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.2.0.0 AI-181.5540.7.32.5056338

Happens on Android 8.1.0, Xiaomi Redmi Note 5 Pro with MIUI 10.0.6.0 Stable, official, with no mods. Not tested on other devices.

Description

Element being "first of siblings" in a tree (more on that later) having position: absolute is invisible until Inspect is turned on. It is rendered normally after closing the inspector. Trying to dynamically toggle position or top properties doesn't help (I tried to force re-render with that).

Video: https://www.youtube.com/watch?v=szMEhaDOCxA

Explaination of first of siblings:

Bug will happen:

<Element>
  <Absolute>
    <Contents />
  </Absolute>
</Element>

<Element>
  <Element>
    <Absolute>
      <Contents />
    </Absolute>
    <AnotherElement />
  </Element>
</Element>

Bug won't happen:

<Element>
  <Element>
    <AnotherElement />
    <Absolute> <-- Absolute isn't first of siblings -->
      <Contents />
    </Absolute>
  </Element>
</Element>

<Element>
  <Another />
  <Element>
    <Absolute> <-- Absolute isn't first of siblings in a whole tree, its parent is a 2nd sibling -->
      <Contents />
    </Absolute>
  </Element>
</Element>

Reproducible Demo

Repository:

https://github.com/dzek69/react-native-position-absolute-bug

But the code is quite simple, this is enough to reproduce:

import React from "react";
import {Text, View} from "react-native";

function Modal(props) {
    const style = {
        position: "absolute",
        zIndex: 1,
        left: 0,
        top: 0,
    };

    return (
        <View style={style}>
            {props.children}
        </View>
    );
}

function Balance() {
    const rootStyle = {
        flex: 1,
        backgroundColor: "#ff0"
    };

    return (
        <View style={rootStyle}>
            <Text style={{fontSize: 40}}>there should be text above that</Text>
        </View>
    );
}

const App = () => {
    return (
        <View style={{flex:1, position:"relative"}}>
            <Modal><Text>hello</Text></Modal>
            <Balance />
        </View>
    );
};

export default App;

[dzek69]

Tested and confirmed also on:

• Android 5.0.2, Xiaomi Redmi Note 3 with MIUI 9.3 (8.1.18 dev)
• LG G4c LTE, Android 6.0

[dulmandakh]

this is expected issue. Please see https://facebook.github.io/react-native/docs/flexbox for layout best practices.

[dzek69]

Wait, what? Why this is expected?

I need a proper explaination, the article you've linked doesn't say a word about it.

[dulmandakh]

opt-in into absolute positioning you're excluding view from normal layout flow, so other views will overdraw it.

[dzek69]

but z-indexes doesn't work as expected then

also toggling inspection changes drawing behavior which makes no sense

and I am working around this issue by adding empty View, which should render nothing so it also shouldn't cause another drawing behavior

[dulmandakh]

What would like to achieve with this solution, I think that this solution might not be the best one.