Absolute positioned View is not functioning as an overlay in react-native

Issue

Added an absolutely positioned transparent view in react-native to show a progress loader while an async api call. But the inputs and buttons behind the overlay are still pressable and responding.

<SafeAreaView style={styles.container}> 
     {this.state.isLoading &&
        <View
            style={{
               position: 'absolute', elevation: 5, backgroundColor: 'rgba(0,0,0,0.3)',
               top: 0, bottom: 0, left: 0, right: 0,
               zIndex:10
             }} 
        />
     }
     <View style={{ flexGrow: 5, flexShrink: 5, flexBasis: 100, alignItems: 'center' }}>
        <Image style={{ width: 200, flex: 1 }} source={require('res/images/one.png')} resizeMode='contain' />
    </View>

    <View style={{ flexGrow: 1, paddingLeft: 30, paddingRight: 30 }}>
        <Item regular>
            <Input
                placeholder="username123"
                autoCompleteType="username"
                onChangeText={(username) => this.setState({ username })}
                value={this.state.username}
            />
        </Item>
        <Button block onPress={this.onClick}
            style={styles.button}>
            <Text style={styles.buttonText}>Login</Text>
        </Button>
    </View>
</SafeAreaView>

PS: Without the elevation:5 buttons appear above overlay (native-base buttons/controls are used). Without zIndex images will appear above overlay

Solution

The reason that is happening is how the React component tree is rendered since you are showing the overlay above the Input field and Button they are still above the Overlay all you need to do is move the Overlay from the top to bottom.

<SafeAreaView style={styles.container}> 
     <View style={{ flexGrow: 5, flexShrink: 5, flexBasis: 100, alignItems: 'center' }}>
        <Image style={{ width: 200, flex: 1 }} source={require('res/images/one.png')} resizeMode='contain' />
    </View>

    <View style={{ flexGrow: 1, paddingLeft: 30, paddingRight: 30 }}>
        <Item regular>
            <Input
                placeholder="username123"
                autoCompleteType="username"
                onChangeText={(username) => this.setState({ username })}
                value={this.state.username}
            />
        </Item>
        <Button block onPress={this.onClick}
            style={styles.button}>
            <Text style={styles.buttonText}>Login</Text>
        </Button>
    </View>

    {/* Moved below the form */}

    {this.state.isLoading &&
       <View
            style={{
               position: 'absolute', elevation: 5, backgroundColor: 'rgba(0,0,0,0.3)',
               top: 0, bottom: 0, left: 0, right: 0,
               zIndex:10
             }} 
        />
     }
</SafeAreaView>

Answered By - fayeed