New in RN 0.54, Android only: using display: none and position: absolute together doesn't work right

[aarondail]

Basically, if you use the styles display: none and position: absolute on a component the component will still be rendered. On Android. iOS works ok. This used to be fine (at least as of 0.52.2).

Environment

Environment:
  OS: macOS Sierra 10.12.6
  Node: 9.8.0
  Yarn: 1.5.1
  npm: 5.6.0
  Watchman: 4.5.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 2.3 AI-162.3934792

Packages: (wanted => installed)
  react: ^16.3.0-alpha.1 => 16.3.0-alpha.2
  react-native: 0.54.2 => 0.54.2

Expected Behavior

A component with style display: none should never be rendered.

Here is an example of a component using both styles:

        <View style={{
          position: 'absolute',
          display: 'none',
          bottom: 100,
          left: -30,
          backgroundColor: 'blue',
          borderColor: 'red',
          borderWidth: 9,
        }}>
          <Text> Hey Hey Hey Hey Hey </Text>
        </View>

If I add that to my App.js, and run it, this is what it looks like on iOS:

I.e. its not rendered, as expected :)

Actual Behavior

This is the same code as above, just running on Android. Note that the element is visible (and actually left: -30 is also not working)

Steps to Reproduce

Create a sample app using react-native init

Paste this into the App.js file, inside the render() method, before the final </View> (for me between lines 35 and 36):

        <View style={{
          position: 'absolute',
          display: 'none',
          bottom: 100,
          left: -30,
          backgroundColor: 'blue',
          borderColor: 'red',
          borderWidth: 9,
        }}>
          <Text> Hey Hey Hey Hey Hey </Text>
        </View>

Run it on iOS. Observe the View is not rendered. Run it on Android. Observe that it is.

[henrikland]

Same issue here, completely breaks the app I am working on. Will have to find a workaround until this is fixed.

[VijayLogitech]

display:none, and position:absolute, occupies the corners of the device screen, instead of hiding the native controls. RN 0.54

[forkbomb]

<View style={{position: 'absolute'}}> <View style={{display: 'none'}}> </View> </View>

works for me.

[njacobs5074]

On our app, we use style overlays for different devices (phones vs tablets) and so was able to implement a workaround by using position: 'relative' for our phone style. Not 100% ideal but it works in our limited circumstance.

[bisht2ankit]

@forkbomb Thanks.. Worked for me.. But can you explain why its not working if we put position absolute and display none in a single view?

[njacobs5074]

We see this issue on v0.55.4, btw. But the workaround I posted above addresses the issue for us on that release.

[pdkn]

me too. 0.55.4 any idea if it's fixed in 0.56?

[z-zp]

<View style={{
          position: 'absolute',
          bottom: 100,
          left: -30,
          backgroundColor: 'blue',
          borderColor: 'red',
          borderWidth: 9,
        }}>
       <View  style={{
          position: 'relative',
          display: 'none',
        }}>
          <Text> Hey Hey Hey Hey Hey </Text>
        </View>
</View>

[xdajay]

Facing a similar issue with Android, Plus its a tooltip really can't get rid of position absolute.
Opacity creates touches and visibility, Zindex isn't working either.

Any update on this issue?

Update: Wrapping around other View works!

[fabOnReact]

I gave it a quick look

maybe this is not connected to react native but to https://github.com/facebook/yoga

setPosition uses Yoga to set each position

react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNodeImpl.java

Lines 946 to 949 in 60b7a30

	@Override
	public void setPosition(int spacingType, float position) {
	mYogaNode.setPosition(YogaEdge.fromInt(spacingType), position);
	}

setDisplay uses Yoga to set display: none

react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNodeImpl.java

Lines 857 to 860 in 60b7a30

	@Override
	public void setDisplay(YogaDisplay display) {
	mYogaNode.setDisplay(display);
	}

The two logic seems to conflict, so an Idea would be to create a reproducible example using android and yoga and open an issue at https://github.com/facebook/yoga/issues

I don't think that it is easy to troubleshoot this without building Yoga from source but I did not try extensively, because I would like to debug the Yoga code

https://github.com/facebook/yoga#building

I just judge this issues as very hard to solve for react-native contributor

[rptoma]

Still happening in RN 0.61.5

[xaiamov]

The same story in RN 0.62.2

[younes200]

same on RN 0.63.0

[thomasDelaporte]

Same issue on React native expo sdk-40.0.1.

[fabOnReact]

#30338 (comment)
Can you reproduce this without react-native using https://github.com/facebook/yoga as a dependency?
Maybe it is an issue with facebook/yoga dependency and not react-native

We need to reproduce this without react-native, by building from source https://github.com/facebook/yoga and then debug the sourcecode, as I believe the relevant sourcecode for this problem is not included in react-native.

If we can reproduce the problem without react-native, you can open an issue in https://github.com/facebook/yoga, this problem will get fixed.. otherwise we may never find a solution

The functionality seems to be part of yoga, was developed with pr facebook/yoga#369 to close facebook/yoga#241 and facebook/yoga#302

https://github.com/woehrl01/yoga/blob/29c60b81c361edb5861168e7085144f6bb80e5c2/yoga/Yoga.c#L1934-L1939

    if (child->style.display == YGDisplayNone) {
      YGZeroOutLayoutRecursivly(child);
      child->hasNewLayout = true;
      child->isDirty = false;
      continue;
    }

Thanks ☮️ 😃

[rnike]

Still an issue on 0.64.0-rc.3

[maki3000]

Another workaround which might help. We apply a black overlay with just one button inside (we make our own power save mode for OLED devices :) because our app can't go into background...). The button is visible all the time.

<View style={styles.container}>
      <StatusBar
        animated={true}
        showHideTransition={"fade"}
        barStyle={"dark-content"}
        hidden={savePower}
      />
      <View style={styles.powerSaveContainer}>
        <TouchableOpacity style={styles.powerSaveButton} onPress={setPowerSaveMode}>
          <Text style={styles.powerSaveButtonText}>{savePowerText}</Text>
        </TouchableOpacity>
      </View>
      <View style={[
        savePower ? {
          backgroundColor: "#000000",
          zIndex: 100,
        } : {
          backgroundColor: Colors.defaultBackground,
          zIndex: -10,
        },
        styles.powerSaveOverlayContainer
      ]}>
      </View>
      <View style={styles.innerContainer}>
          {/* other content */}
     </View>
</View>

And the styles:

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: Colors.defaultBackground,
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 16,
    paddingTop: 32,
  },
  powerSaveOverlayContainer: {
    bottom: 0,
    left: 0,
    position: "absolute",
    right: 0,
    top: 0,
  },
  innerContainer: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
  },
  powerSaveContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingTop: 18,
    zIndex: 1000,
  },
  powerSaveButton: {
    backgroundColor: "#8C8989",
    borderColor: "#999999",
    borderRadius: 120,
    borderWidth: 1,
    margin: 8,
  },
  powerSaveButtonText: {
    color: "#ffffff",
    padding: 12,
  },
});

We toggle savePower in setPowerSaveMode method and work with same backgroundColor as the container when not visible and black backgroundColor when visible and apply different zIndex.

[github-actions]

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]

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