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 OverflowHi 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.
React Native) How to display website using React Native Expo? - Stack Overflow
How to use the Expo module to extend and wrap a custom WebView?
Is react-native-webview broken for expo 51.x ?
RNCWebView.isFileUploadSupported Error on Expo EAS Android Build SDK 47
Videos
» npm install react-native-webview