Position absolute view is not covering <Button>

[Noitidart]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

1. react-native -v: 0.47.1 and 0.48.1
2. node -v: v.7.5.0
3. npm -v: 5.3.0
4. yarn --version: N/A

Then, specify:

• Target Platform: Android

• Development Operating System: Windows 10

• Build tools: N/A

Steps to Reproduce

(Write your steps here:)

1. Code:

import React, { Component } from 'react';
import { AppRegistry, View, StyleSheet, Text, ActivityIndicator, Button } from 'react-native';

export default class App extends Component {
  render() {
    return (
        <View style={styles.wrap}>
                <Button title='Enabled' onPress={this.handleSubmit} />
                <Text>{'\n'}</Text>
                <Text>{'\n'}</Text>
                <Text>{'\n'}</Text>
                <Text>{'\n'}</Text>
                <Button title='Disabled' onPress={this.handleSubmit} disabled />
                <View style={styles.loadingWrap}>
                    <ActivityIndicator color="deepskyblue" size={50} />
                </View>
        </View>
    )
  }

  handleSubmit = () => alert('hi')
}

const styles = StyleSheet.create({
    wrap: {
        flex: 1,
        width: '100%',
        justifyContent: 'center'
    },
    loadingWrap: {
        position: 'absolute',
        height: '100%',
        width: '100%',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        justifyContent: 'center'
    }
})

AppRegistry.registerComponent('interactable', () => App)

Expected Behavior

I thought the <View> would cover the <Button> becuase it comes after the button in the hierarchy.

Actual Behavior

View is not covering Button.

Reproducible Demo

Demo - https://snack.expo.io/BJHX7-15-

(Paste the link to an example project and exact instructions to reproduce the issue.)

[Noitidart]

If you set attribute of disabled on the <Button> then it does get covered. Funky.

[hramos]

0.48 is the newest version, can you try with the latest release and update your issue accordingly if it repros?

[Noitidart]

@hramos - thanks very much for the follow up. I tested with 0.48.1 on my device Android 6 and same thing.

I updated with a snack demo in original post that shows the bug, but I think expo doesnt use 0.48.1.

I also updated code so it can be copy pasted to react-native init project.

[Noitidart]

It can be sort of "worked around" with setting elevation: 20 on view style loadingWrap but this creates an undesired shadow. Trying zIndex: 20 does not work.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[Noitidart]

If it's not affecting a lot of people should we close it out? Or file it for later?

[JLLLinn]

Mine is a Text with absolute position and the onPress does not work. I'm running the latest 0.51 react

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[Noitidart]

It seems you can't cover elevation without this trick: I don't know why exactly. But if you add an element positioned absolutely in the target.parent.parent then it will cover it (it has to be outside of the component that renders the thing you have to cover, it can't be inside). It is way weird.

[Saraceni]

I have a view with absolute position which is drawn behind another view in the bottom of my screen only in Android. But in iOS it works fine.

[Noitidart]

@Saraceni move it to the parent component until it it covers. It's most likely the elevation issue I encountered.

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[Lucastrike]

@Noitidart I'm working in a similar mockup that needs to have an absolute View over two different View containers.

The problem: An absolute component does not mean that is over the other ones.
The solution: Just give a zIndex: 1 to the same element you made absolute, now the button or even touchable elements will work.

Hope it helps anyone having this problem!

[Noitidart]

Thanks at @Lucastrike ! I also found <ScrollView> will overlap it too. Its interesting.

[KumariShalini]

i am also facing the problem with overlapping of one view on other view, onpress is not working in android in react native... can anyone give some solution please? thank you.