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

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: ios_display_none

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)

android_display_none

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.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 66
  • Comments: 39 (6 by maintainers)

Commits related to this issue

Most upvoted comments

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

works for me.

when you want to change display to ‘none’ switch position from ‘absolute’ to ‘relative’

same on RN 0.63.0

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

me Too

+1 0.57

the issue still exist in RN 0.55.

Still an issue on 0.64.0-rc.3

This issue still exists in react-native@0.56. Is there a fix other than two views individually having position and display properties?

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

Still happening in RN 0.61.5

Any good news for this issue ?

Can confirm this bug happens on 0.59.x.

<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>

Yeah display:none doesn’t work with position:absolute! But only with android It works fine with IOS but there are several options that you can use :- opacity , visibility , z-index…

Still exist on 0.57.8,whoops!

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.