Skip to content

Position absolute view is not covering <Button> #15823

Closed
@Noitidart

Description

@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.)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Ran CommandsOne of our bots successfully processed a command.Resolution: LockedThis issue was locked by the bot.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions