WebView inconsistently showing white screen react-native

user_6523381 0
Viewed 1765

I'm using a WebView to show an iframe of a twitch-stream in my react-native app, however at some points when it renders the WebView only shows up as a blank white screen until you scroll/move the UI and at other times it works as intended. There are no errors emitted when the WebView is blank, it seems to load as intended so not really sure why it just shows a blank white screen.

Here is the WebView code:

 <Animated.View
   style={{
     height: anim,
     width: width,
     overflow: 'hidden',
   }}
 >
   <WebView
     onLoadEnd={() => {
       useAnimation()
     }}
     source={{
       uri: `https://host.com/iframe/?channel=${channelName}`,
     }}
     style={{
       height: heightByRatio,
       width: width,
       flex: 0,
     }}
     mediaPlaybackRequiresUserAction={false}
     allowsInlineMediaPlayback={true}
   />
</Animated.View>
react-native webview
1 Answers

I had a very similar issue of webviews sometimes loading blank on android devices. I can't say I figured out why it was happening, but I solved it by delaying the load of the webview and putting a 2px border around the container wrapping the webview. Neither solution worked on its own, both were needed.

export default class WebviewExample extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {};
        
    }
    
    componentDidMount() {
        setTimeout(() => {
            this.setState({loadWebview: true});
        });
    }


    render() {
        return (
            <View style={styles.view}>
                {this.state.loadWebview && 
                    <WebView />
                }
               
            </View>
        );
    }
}

const styles = StyleSheet.create({
    
    view: {
        borderWidth: 2,
        borderColor: 'transparent',
    }

});

user_48256490
Related