Creating a WebView app in React Native using Expo is a straightforward process. Below is a step-by-step guide on how to achieve this, including the installation, setting up a WebView, and building the app.
Know More :- https://codexdindia.blogspot.com/2024/07/creating-webview-app-in-react-native.html
Prerequisites
Basic knowledge of JavaScript and React
Node.js and npm installed on your system
Expo CLI installed globally (npm install -g expo-cli)
An Expo account
Step 1: Initialize a New Expo Project
First, create a new Expo project using the Expo CLI.
cd WebViewApp
Step 2: Install React Native WebView
Install the react-native-webview package, which provides the WebView component.
Step 3: Create the WebView Component
Create a new component to handle the WebView. Open App.js and replace its content with the following code:
import { SafeAreaView, StyleSheet, Platform, ActivityIndicator } from ‘react-native‘;
import { WebView } from ‘react-native-webview‘;
const App = () => {
return (
<SafeAreaView style={styles.container}>
<WebView
source={{ uri: ‘https://www.example.com‘ }}
startInLoadingState={true}
renderLoading={() => <ActivityIndicator color=‘blue‘ size=‘large‘ />}
style={{ marginTop: Platform.OS === ‘ios‘ ? 20 : 0 }}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default App;
Step 4: Customize the WebView
You can customize the WebView further to add more functionalities, such as handling navigation gestures, showing a splash screen, or handling file downloads.
Showing a Splash Screen
To show a splash screen while the WebView loads, install the Expo Splash Screen package.
Then, modify App.js to use the splash screen:
import { SafeAreaView, StyleSheet, Platform, ActivityIndicator } from ‘react-native‘;
import { WebView } from ‘react-native-webview‘;
import * as SplashScreen from ‘expo-splash-screen‘;
SplashScreen.preventAutoHideAsync();
const App = () => {
const [loading, setLoading] = useState(true);
useEffect(() => {
if (!loading) {
SplashScreen.hideAsync();
}
}, [loading]);
return (
<SafeAreaView style={styles.container}>
<WebView
source={{ uri: ‘https://www.example.com‘ }}
onLoadEnd={() => setLoading(false)}
startInLoadingState={true}
renderLoading={() => <ActivityIndicator color=‘blue‘ size=‘large‘ />}
style={{ marginTop: Platform.OS === ‘ios‘ ? 20 : 0 }}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default App;
Step 5: Build and Run Your App
To build and run your app on a physical device, use the following command:
Scan the QR code with the Expo Go app on your device to see your WebView in action.
Additional Customizations
Navigation Gestures: Enable iOS navigation gestures with allowsBackForwardNavigationGestures={true} in the WebView component.
File Downloads: Handle file downloads with the onFileDownload prop and use the expo-file-system and expo-sharing packages for saving files.
External Links: Open external links in the system’s browser using expo-web-browser.
Resources
Expo Documentation【10†source】
React Native WebView Documentation【9†source】
LogRocket Guide on React Native WebView【8†source】
By following these steps, you can create a fully functional WebView app in React Native using Expo, with capabilities to handle various web-related functionalities and customizations.
