3.8 KiB

Raw Blame History

React Native WebView Getting Started Guide

Here's how to get started quickly with the React Native WebView.

1. Add react-native-webview to your dependencies

$ yarn add react-native-webview

(or)

For npm use

$ npm install --save react-native-webview

2. Link native dependencies

From react-native 0.60 autolinking will take care of the link step but don't forget to run pod install

React Native modules that include native Objective-C, Swift, Java, or Kotlin code have to be "linked" so that the compiler knows to include them in the app.

$ react-native link react-native-webview

NOTE: If you ever need to uninstall React Native WebView, run react-native unlink react-native-webview to unlink it.

iOS & macOS:

If using CocoaPods, in the ios/ or macos/ directory run:

$ pod install

While you can manually link the old way using react-native own tutorial, we find it easier to use CocoaPods. If you wish to use CocoaPods and haven't set it up yet, please instead refer to that article.

Android:

Android - react-native-webview version <6: This module does not require any extra step after running the link command 🎉

Android - react-native-webview version >=6.X.X: Please make sure AndroidX is enabled in your project by editting android/gradle.properties and adding 2 lines:

android.useAndroidX=true
android.enableJetifier=true

For Android manual installation, please refer to this article where you can find detailed step on how to link any react-native project.

Windows:

Autolinking is not yet supported for ReactNativeWindows. Make following additions to the given files manually:

windows/myapp.sln

Add the ReactNativeWebView and WebViewBridgeComponent project to your solution.

Open the solution in Visual Studio 2019
Right-click Solution icon in Solution Explorer > Add > Existing Project Select node_modules\react-native-webview\windows\ReactNativeWebView\ReactNativeWebView.vcxproj Select node_modules\react-native-webview\windows\WebViewBridgeComponent\WebViewBridgeComponent.vcxproj

windows/myapp/myapp.vcxproj

Add a reference to ReactNativeWebView to your main application project. From Visual Studio 2019:

Right-click main application project > Add > Reference... Check ReactNativeWebView from Solution Projects.
Modify files below to add the package providers to your main application project

pch.h

Add #include "winrt/ReactNativeWebView.h".

app.cpp

Add PackageProviders().Append(winrt::ReactNativeWebView::ReactPackageProvider()); before InitializeComponent();.

Note if you want to enable scroll with Touch for the WebView component you must disable perspective for your app using ReactRootView.IsPerspectiveEnabled.

3. Import the webview into your component

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

class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{ uri: 'https://infinite.red' }}
        style={{ marginTop: 20 }}
      />
    );
  }
}

Minimal example with inline HTML:

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

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>Hello world</h1>' }}
      />
    );
  }
}

Next, check out the API Reference or In-Depth Guide.

3.8 KiB Raw Blame History