Skip to content

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

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: '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/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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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