react-native-webview

Basic WebView

This feature allows you to embed a basic web page within your React Native application. The WebView component takes a source prop that specifies the URL of the web page to be loaded.

import React from 'react';
import { WebView } from 'react-native-webview';

const MyWebView = () => (
  <WebView
    source={{ uri: 'https://www.example.com' }}
    style={{ marginTop: 20 }}
  />
);

export default MyWebView;

Injecting JavaScript

This feature allows you to inject JavaScript into the web page being loaded. The injectedJavaScript prop takes a string of JavaScript code that will be executed once the page has loaded.

import React from 'react';
import { WebView } from 'react-native-webview';

const MyWebView = () => (
  <WebView
    source={{ uri: 'https://www.example.com' }}
    injectedJavaScript={"document.body.style.backgroundColor = 'red';"}
    style={{ marginTop: 20 }}
  />
);

export default MyWebView;

Handling Navigation Events

This feature allows you to handle navigation events within the WebView. The onNavigationStateChange prop takes a function that will be called whenever the navigation state changes, providing details about the navigation event.

import React from 'react';
import { WebView } from 'react-native-webview';

const MyWebView = () => (
  <WebView
    source={{ uri: 'https://www.example.com' }}
    onNavigationStateChange={(navState) => {
      console.log('Navigation state changed:', navState);
    }}
    style={{ marginTop: 20 }}
  />
);

export default MyWebView;