I am creating a webview but before it loads it is a white screen and I don’t know how I could do it until the url is loaded
`import { StatusBar } from ‘expo-status-bar’;
import React, {useState} from ‘react’;
import { WebView } from ‘react-native-webview’;
import { StyleSheet, Text, TouchableOpacity, View,Image,LogBox } from ‘react-native’;
import { FontAwesome } from ‘@expo/vector-icons’
import logo from ‘./logo.png’;
export default function App() {
LogBox.ignoreAllLogs(true);
const [reca,setReca] = useState(true);
const recarregar = () =>{
setReca(!reca);
}
return(
<View style={{flex:1}}>
<StatusBar hidden/>
{
(reca)?
< WebView
source = { { uri : 'https://treinamento.viashopmoda.com.br/' } }
renderError={() =>
<View style={styles.loadingOrErrorView}>
<View style={styles.container}>
<Image source={logo} style={{width:280,height:200}}/>
<Text style={{fontSize:20,marginTop:15}}>Você está sem conexão</Text>
<TouchableOpacity style={styles.botao} onPress={()=>recarregar()}>
<Text style={{color:'white',fontSize:18}}>Tentar novamente <FontAwesome name="repeat" size={18} color="white" /></Text>
</TouchableOpacity>
</View>
</View>
}
/>
:
<View style={{flex:1}}>
< WebView
source = { { uri : 'https://treinamento.viashopmoda.com.br/' } }
renderError={() =>
<View style={styles.loadingOrErrorView}>
<View style={styles.container}>
<Image source={logo} style={{width:280,height:200}}/>
<Text style={{fontSize:20,marginTop:15}}>Você está sem conexão</Text>
<TouchableOpacity style={styles.botao} onPress={()=>recarregar()}>
<Text style={{color:'white',fontSize:18}}>Tentar novamente <FontAwesome name="repeat" size={18} color="white" /></Text>
</TouchableOpacity>
</View>
</View>
}
/>
</View>
}
</View>
);
}
const styles = StyleSheet.create({
container: {
height:‘100%’,
width:‘100%’,
flex: 1,
justifyContent: ‘center’,
backgroundColor: ‘#fff’,
alignItems:‘center’
},
botao:{
backgroundColor:‘#9411F5’,
padding:8,
marginTop:20,
borderRadius:20
},
loadingOrErrorView:{
position:‘absolute’,
flex:1,
justifyContent:‘center’,
alignItems:‘center’,
height:‘100%’,
width:‘100%’,
backgroundColor:‘white’
}
});
`