Skip to content

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

@aarondail

Description

@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:
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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugImpact: RegressionDescribes a behavior that used to work on a prior release, but stopped working recently.Issue: Author Provided ReproThis issue can be reproduced in Snack or an attached project.Platform: AndroidAndroid applications.Ran CommandsOne of our bots successfully processed a command.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions