WebView in React Native allows you to display web content (HTML pages, websites, or inline HTML) directly inside a mobile application. It is commonly used to render web apps, show documentation, integrate payment gateways, or display dynamic HTML content.
React Native WebView is provided by a separate package. You import the WebView component and provide a source prop that defines what content should be loaded.
// Import WebView from react-native-webview package
import React from "react";
import { SafeAreaView } from "react-native";
import { WebView } from "react-native-webview";
const App = () => {
return (
<SafeAreaView style={{ flex: 1 }}>
<WebView source={{ uri: "https://reactnative.dev" }} />
</SafeAreaView>
);
};
export default App;
The app opens a full-screen WebView and loads the official React Native website. Users can scroll, tap links, and interact with the web content like a browser.
Since React Native code requires a device to run, we have created a Simulator below. Use the controls to inject HTML directly into the simulated phone screen, mimicking how source={{ html: ... }} works.
Enter HTML to render inside the WebView:
Code Reference for above:
// Example of loading inline HTML inside WebView
import React from "react";
import { WebView } from "react-native-webview";
const htmlContent = `
<html>
<body style="font-family:Arial;text-align:center;">
<h2>Hello from WebView</h2>
<button onclick="alert('Button clicked')">Click Me</button>
</body>
</html>
`;
export default function App() {
return <WebView originWhitelist={["*"]} source={{ html: htmlContent }} />;
}