-
Notifications
You must be signed in to change notification settings - Fork 24.9k
Description
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.