Skip to content

Android: Webview startInLoadingState interferes with sibling elements which have a higher z-index #11976

@martsie

Description

@martsie

Description

Any view that is a sibling of a WebView in Android gets removed if it's zIndex is higher than that of the WebView and the WebView has the property startInLoadingState.

Reproduction

webview-sibling-issue

In the below code, simply removing the zIndex attribute of the sibling style fixes the issue.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class webviewloader extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.sibling}>Test sibling view</Text>
        <WebView
          source={{uri: 'https://github.com/facebook/react-native'}}
          startInLoadingState
          />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  sibling: {
    zIndex: 1,
  },
});

AppRegistry.registerComponent('webviewloader', () => webviewloader);

Solution

May be related to #8968

Additional Information

  • React Native version: 0.4.0
  • Platform: Android
  • Operating System: MacOS

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions