how could I add the splashscreen in my code

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’
}
});
`

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.