New in RN 0.54, Android only: using display: none and position: absolute together doesn't work right
See original GitHub issueBasically, 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.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:66
- Comments:37 (4 by maintainers)
<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’