question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:66
  • Comments:37 (4 by maintainers)

github_iconTop GitHub Comments

43reactions
forkbombcommented, Apr 20, 2018

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

works for me.

13reactions
saeedhassankhancommented, Oct 23, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why is a column or a row visible in absolute position when ...
I believe it is related to this: New in RN 0.54, Android only: using display: none and position: absolute together doesn't work right...
Read more >
Using position: 'Absolute' and display: 'None' in React Native ...
This is an issue that was reported some time ago and unfortunately has not been resolved. You can easily work around it with...
Read more >
Advanced layouts with absolute and fixed positioning
If an absolutely positioned element has no positioned ancestor, then the containing block is something called the “initial containing block,” which in practice ......
Read more >
Position - Tailwind CSS
Any offsets will be ignored and the element will not act as a position reference for absolutely positioned children. Static parent. Absolute child....
Read more >
Diff - 2f8ce253d268081edd269a1ac2371b743f90bb54^! - platform ...
WinScope: Add prebuilt static copy of winscope and scripts to update the copy Test: cd prebuilts/misc/common/winscope && bash update_winscope.sh Test: open ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found