This is my first expo code which I am able to run successfully:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { WebView } from 'react-native-webview';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
return (
<WebView
style={{ marginTop: 0 }}
source={{ uri: 'https://baldeaglemall.com/' }}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
But I am unable to add a splash screen with 10 seconds time to it for display. Chasing google search is not leading me anywhere. What modifications do I need to do my code above?
Edit:
Splash screen works based on examples in expo documentation.
But the below answer causes a white screen right after the splash screen and it stays at white screen and never goes in the webview.
You could use SplashScreen.preventAutoHideAsync()
(provided by expo-splash-screen
) to make the native splash screen stay visible until SplashScreen.hideAsync()
is called.
Add the package to your dependencies
$ expo install expo-splash-screen
And then, use it like this:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { WebView } from 'react-native-webview';
import * as SplashScreen from 'expo-splash-screen'; // <-- import it
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';
// Prevent native splash screen from autohiding before App component declaration
SplashScreen.preventAutoHideAsync()
.then((result) => console.log(`SplashScreen.preventAutoHideAsync() succeeded: ${result}`))
.catch(console.warn); // it's good to explicitly catch and inspect any error
export default function App() {
React.useEffect(() => {
setTimeout(async () => {
await SplashScreen.hideAsync();
}, 5000); // <-- Set this to `5000` ms to hide it after 5 seconds
}, []);
return (
<WebView
style={{ marginTop: 0 }}
source={{ uri: 'https://baldeaglemall.com/' }}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
Disclaimer: I haven't tested this code, but it should work