Rendering webview on android device overlaps previous siblings from same parent

Question

React native 0.57 Integrated RN webview or [email protected]

On simulator all siblings are rendered (text component 1 - 3) On real device webview overlaps previous siblings and they are not rendered.

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

export default class MyWeb extends Component {
  render() {
    return (
      <ScrollView contentContainerStyle={{ backgroundColor: 'pink', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <View style={{backgroundColor: 'yellow', margin: 5, height: 60, width: 300, alignItems: 'center', justifyContent: 'center' }}>
          <Text>TEXT COMPONENT 1</Text>
        </View>
        <View style={{backgroundColor: 'yellow', height: 60, width: 300, alignItems: 'center', justifyContent: 'center' }}>
          <Text>TEXT COMPONENT 2</Text>
        </View>
        <View style={{flex: 1}}>
          <WebView
            source={{ html: '<div>COTENT OF WEBVIEW HERE</div>' }}
            // source={{ uri: 'https://infinite.red/react-native' }}
            style={{margin: 20, flex :1, height: 250, width: 300, backgroundColor: 'red'}}
          />
        </View>
        <View style={{backgroundColor: 'yellow', height: 100, width: 300, alignItems: 'center', justifyContent: 'center', padding: 10 }}>
          <Text>TEXT COMPONENT 3</Text>
         </View>
      </ScrollView>
    );
  }
}

React native 0.56 and the webview from 0.56 works perfect.

But since 0.57 the RN integrated webview or used as external dependency seems to mess all the other siblings at each render on android device.

I have tried many options to adjust styles with flex and even using zIndex to force some views to be displayed. They appear but the rendered view is still a mess.

I added also a question here:

https://github.com/react-native-community/react-native-webview/issues/101

Answer 1

Adding overflow hidden to the view which is the parent of the webview seems to fix the issue:

        <View style={{flex: 1, overflow: 'hidden'}}>
          <WebView
            source={{ html: '<div>COTENT OF WEBVIEW HERE</div>' }}
            style={{margin: 20, flex :1, height: 250, width: 300, backgroundColor: 'red'}}
          />
        </View>

Source: Titozzz's answer from here:

https://github.com/react-native-community/react-native-webview/issues/101

Answer 2

I just found that this approach can cause crash on some Android devices (tested on Pixel 1, Android Pie)

Same issue can be fixed by setting 0.99 opacity to WebView component <WebView style={{ opacity: 0.99 }} />

Screen blinks once when rendering a WebView on Android