White blank screen when load website WebView React Native

Question

i have a problem when i want to send data of a URL so when you go to the next page your show the spesific url, im using expo cli not react native cli

website.tsx

import React, { useState } from "react";
import { Dimensions } from "react-native";
import { Div, Text } from "react-native-magnus";
import WebView from "react-native-webview";

const Website = ({YOUR_URL}) => {
  
  return (
 
      <WebView
        rautomaticallyAdjustContentInsets={false}
        source={{uri: YOUR_URL}}
        style={{marginTop: 20, height: "100%", width: "100%"}}
        onLoad={console.log("Loaded")}
        startInLoadingState={true}
        javaScriptEnabled={true}     
      />
    
  );
};

export default Website;

and this is my button to send the data

<Button w={wp(40)} h={hp(5.5)} ml={hp(2)} 
   onPress={() => navigation.navigate('Website', {YOUR_URL:data?.external_link})}
   // onPress={() => Linking.openURL(data?.external_link)}
  >
   <Text allowFontScaling={false} fontSize={16} color="#fff">
     Selengkapnya
   </Text>

if you can help me, thank you very much

Answer 1

I used this solution to show a component while loading the webview to avoid the blank screen, I hope it helps you.

<WebView
        source={{
          uri: 'fakeurl',
        }}
        startInLoadingState={true}
        renderLoading={() => (
          <View style={styles.loaderContainer}>
            <ActivityIndicator color={'white'} />
          </View>
        )}
        style={{ backgroundColor: 'black', flex: 1 }}
        onLoadProgress={() => {}}
        onLoad={() => {
          setIsLoading(false);
        }}
        onMessage={onMessage}
/>
      
const styles = StyleSheet.create({
  loaderContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'black',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
});