You can use WebView to display web pages on React Native Expo apps.
First, install react-native-webview by this command.
expo install react-native-webview
Then you could add this WebView as shown below.
import * as React from 'react';
import { WebView } from 'react-native-webview';
export default function App() {
return (
<WebView
style={styles.container}
source={{ uri: 'https://expo.dev' }}
/>
);
}
You can also insert custom web (html) page like this:
import * as React from 'react';
import { WebView } from 'react-native-webview';
export default function App() {
return (
<WebView
style={styles.container}
originWhitelist={['*']}
source={{ html: '<h1><center>Hello world</center></h1>' }}
/>
);
}
To know more you can read this doc expo webview
Answer from Make Real on Stack OverflowVideos
» npm install react-native-webview
Hi guys,
I have been working with React Native for 2 years. This is the first time I use the react-native-webview with Expo because my client wants his app with webview on App Store until we finish the hybrid app. I followed the example from here: https://blog.logrocket.com/react-native-webview-complete-guide/
This is my expo app link: https://expo.dev/preview/update?message=Changed%20it%20to%20google&updateRuntimeVersion=1.0.0&createdAt=2024-10-18T13%3A09%3A42.241Z&slug=exp&projectId=48e95bbb-058c-4956-afbc-f2ddefa1ecb9&group=66d1567f-6701-4230-a070-e1eb0e1c4cf3
This is my code:
import { Image, StyleSheet, Platform } from "react-native";
import { View } from "react-native";
import { WebView } from "react-native-webview";
export default function HomeScreen() {
return (
<View style={styles.container}>
<WebView source={{ uri: "https://www.google.com" }} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 50,
},
});When I tried to tab in Search input box of Google. Nothing happens. Web page is showing like an image. Is it normal or am I missing something? I've tried with/without <View>, none of them works.
Update: my wife just got home. I installed Expo Go on her phone and tried the app. It works on her phone. Her phone is iPhone 16 pro max. It also works on my friend’s iPhone 11 Pro Max. My phone is iPhone 13 Pro Max. It must be something to do with the app permission or just this iPhone model.
Did you try in web only? try this snack: https://snack.expo.io/@djalik/webview-demo
For me the answer was to wrap it with a View:
<View style={styles.container}>
<StatusBar style="auto" />
<View style={styles.webviewContainer}>
<WebView
originWhitelist={['*']}
source={{ uri: currentURI }}
ref={webViewRef}
style={styles.webview}
/>
</View>
</View>
// Styles
const styles = StyleSheet.create({
container: {
marginTop: Constants.statusBarHeight,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
webview: {
flex: 1,
},
webviewContainer: {
flex: 1,
alignSelf: 'stretch',
},
});