3.4 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 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

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();.

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.4 KiB Raw Blame History