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:
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.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 66
- Comments: 39 (6 by maintainers)
Links to this issue
Commits related to this issue
- Fixes layout of nodes with YGDisplayNone and YGPositionTypeAbsolute Summary: There is an issue in react-native when the Yoga node position type is set to absolute and display: none is set where the n... — committed to rozele/yoga by rozele 3 years ago
- Fixes layout of nodes with YGDisplayNone and YGPositionTypeAbsolute (#1068) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1068 There is an issue in react-native when the Yoga... — committed to rozele/yoga by rozele 3 years ago
- Fixes layout of nodes with YGDisplayNone and YGPositionTypeAbsolute (#1068) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1068 There is an issue in react-native when the Yoga... — committed to facebook/yoga by rozele 3 years ago
- Fixes layout of nodes with YGDisplayNone and YGPositionTypeAbsolute (#1068) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1068 There is an issue in react-native when the Yoga... — committed to facebook/litho by rozele 3 years ago
- Fixes layout of nodes with YGDisplayNone and YGPositionTypeAbsolute (#1068) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1068 There is an issue in react-native when the Yoga... — committed to facebook/react-native by rozele 3 years ago
- Fixes layout of nodes with YGDisplayNone and YGPositionTypeAbsolute (#1068) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1068 There is an issue in react-native when the Yoga... — committed to ZupIT/yoga by rozele 3 years ago
- Fixes layout of nodes with YGDisplayNone and YGPositionTypeAbsolute (#1068) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1068 There is an issue in react-native when the Yoga... — committed to ZupIT/yoga by rozele 3 years ago
- Squashed commit of the following: commit 578d197dd6652225b46af090c0b46471dc887361 Author: Lauren Bentley <lebentle@fb.com> Date: Fri Jun 18 12:19:40 2021 -0700 remove .buckversion files from f... — committed to cntrump/yoga by cntrump 3 years ago
- Fixes layout of nodes with YGDisplayNone and YGPositionTypeAbsolute (#1068) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1068 There is an issue in react-native when the Yoga... — committed to yue/yoga by rozele 3 years ago
- Prevented freezing until animation completes Was freezing immediately on the javascript side, as soon as the navigation happened. This worked but think only because of React Native bug with display n... — committed to grahammendick/navigation by grahammendick 3 years ago
- Prevented React Native hiding frozen scenes Navigate A --> B --> C then A and B are both frozen. Then press back on iOS twice quickly and screen A will be black because the scene is hidden. When scen... — committed to grahammendick/navigation by grahammendick 3 years ago
- Fixed display issues on Android Fixed bug where option list screen was always visible; this problem was caused by using position: absolute and display: none, which React Native does not like (see htt... — committed to elddc/nchapp by elddc 3 years ago
<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.
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.