Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
aarondail opened this issue Mar 16, 2018 · 24 comments

Comments

Projects
None yet
@aarondail
Copy link

commented Mar 16, 2018

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.

@tsaohucn

This comment was marked as resolved.

Copy link

commented Mar 25, 2018

me Too

@henrikland

This comment has been minimized.

Copy link

commented Mar 26, 2018

Same issue here, completely breaks the app I am working on. Will have to find a workaround until this is fixed.

@hramos hramos removed the Platform: macOS label Mar 29, 2018

@fallenner

This comment was marked as resolved.

Copy link

commented Apr 4, 2018

the issue still exist in RN 0.55.

@VijayLogitech

This comment has been minimized.

Copy link

commented Apr 10, 2018

display:none, and position:absolute, occupies the corners of the device screen, instead of hiding the native controls. RN 0.54

@forkbomb

This comment has been minimized.

Copy link

commented Apr 20, 2018

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

works for me.

@njacobs5074

This comment has been minimized.

Copy link

commented May 14, 2018

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.

@react-native-bot

This comment was marked as resolved.

Copy link
Collaborator

commented May 15, 2018

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.

@ankitbisht143

This comment has been minimized.

Copy link

commented May 16, 2018

@forkbomb Thanks.. Worked for me.. But can you explain why its not working if we put position absolute and display none in a single view?

@njacobs5074

This comment has been minimized.

Copy link

commented May 16, 2018

We see this issue on v0.55.4, btw. But the workaround I posted above addresses the issue for us on that release.

@Yibay

This comment was marked as resolved.

Copy link

commented May 26, 2018

I also want to submit this issue and find that someone has submitted it. 0.55.4

@neilzhengzx

This comment was marked as resolved.

Copy link

commented Jun 29, 2018

me too. 0.55.4

@pdkn

This comment has been minimized.

Copy link

commented Jul 6, 2018

me too. 0.55.4 any idea if it's fixed in 0.56?

@NbZzp

This comment has been minimized.

Copy link

commented Jul 11, 2018

<View style={{
          position: 'absolute',
          bottom: 100,
          left: -30,
          backgroundColor: 'blue',
          borderColor: 'red',
          borderWidth: 9,
        }}>
       <View  style={{
          position: 'relative',
          display: 'none',
        }}>
          <Text> Hey Hey Hey Hey Hey </Text>
        </View>
</View>
@verybluebot

This comment was marked as resolved.

Copy link

commented Jul 26, 2018

same issue, can't solve it by upgrading to 0.56 because other chain of issues

@Ketn

This comment has been minimized.

Copy link

commented Jul 27, 2018

This issue still exists in react-native@0.56. Is there a fix other than two views individually having position and display properties?

@yiyizym yiyizym referenced this issue Aug 25, 2018

Closed

to write 201808 #19

1 of 1 task complete
@danielgindi

This comment was marked as resolved.

Copy link

commented Sep 9, 2018

This exists in 0.57. So weird.

@tatane616

This comment was marked as resolved.

Copy link

commented Sep 21, 2018

me too. 0.57

@syq7970

This comment was marked as resolved.

Copy link

commented Sep 30, 2018

+1 0.57

@basaamp

This comment has been minimized.

Copy link

commented Nov 3, 2018

an idea for a single view with function change

if (visible) {
//display nothing with position relative
setState({display: none, position: relative})

} else {
//display something with position absolute or relative
setState({display: flex, position: absolute or relative} )
}

@sercanov

This comment was marked as resolved.

Copy link
Contributor

commented Dec 13, 2018

Still exist on 0.57.7

@yqz0203

This comment was marked as resolved.

Copy link

commented Jan 8, 2019

Still exist on 0.57.8,whoops!

@ligaofeng0901

This comment has been minimized.

Copy link

commented Jan 18, 2019

Is there anyone who can fix it?

@ferrannp

This comment has been minimized.

Copy link
Collaborator

commented Mar 19, 2019

Can confirm this bug happens on 0.59.x.

@ferrannp ferrannp added the Hi-Pri label Mar 19, 2019

@yuweiguocn

This comment has been minimized.

Copy link

commented Mar 20, 2019

<View style={{
          position: 'absolute',
          bottom: 100,
          left: -30,
          backgroundColor: 'blue',
          borderColor: 'red',
          borderWidth: 9,
          height:0,
          width:0,
        }}>
          <Text> Hey Hey Hey Hey Hey </Text>
        </View>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.