CODEWITHSUNDEEP
react-nativewebviewreact-native-webview
s3c
s3c

Reputation: 1851

What is the right way to use WebView in React Native

Short summary:

Trying to use WebView from 'react-native-webview' to render URL content in mobile apps built with React Native is a thorn in my heel.

Long summary:

I have used PHP 7 to build approximately 10 websites for my company in the last few months. Now because of some funding from European Union, most of these companies I built the website for also need mobile apps. It is enough to have them only for Android, but it'd be nice to have them for iOS as well.

After quite some googling I (maybe foolishly) decided the best approach would be to use React Native.

Now to elaborate, these apps will be the very simplest and useless apps, only made to check a certain checkbox on some paper.

All the websites I built are already fully mobile responsive so using mobile browser to see and use all they offer is perfectly OK.

That is why it would be perfectly good to just create a mobile native wrapper with webview inside that works exactly like a browser does, albeit without functionality to surf to URLs other than direct links from the website.

What I did:

I use VS Code with internal bash terminal (OS = Windows 10)

I installed and update NPM


    $ node -v
    v12.8.0
    
    $ npm -v
    6.10.3

I opened VS Code terminal in my Projects folder and ran a few commands:


    $ npm i -g react-native-cli
    <path>\react-native -> <path>\node_modules\react-native-cli\index.js
    + [email protected]
    
    $ npm i -g yarn
    <path>\yarnpkg -> <path>\node_modules\yarn\bin\yarn.js
    <path>\yarn -> <path>\node_modules\yarn\bin\yarn.js
    + [email protected]
    
    $ react-native init test1
    /.../
    Done in 68.03s.
    /.../
    Done in 36.62s.
    /.../
    Done in 52.31s.
    
    $ cd test1
    
    $ react-native start

Opened another terminal:


    $ react-native run-android

This created a default Welcome to React app and ran it in emulated Pixel 2 mobile with Marshmallow. So far so good.

I changed the App.js content and imported Text, View, AppRegistry and some others from 'react-native', played around, and the app in the emulator accepted everything, even images. So far so good.

I did the same thing with creating a new component and everything is still OK.

Now the horcrux:

Facebook's instructions tell us to follow the new and improved react-native-community/react-native-webview


    $ yarn add react-native-webview@androidx
    yarn add v1.17.3
    /.../
    Done in 28.07s.
    
    $ react-native start

My code with just <View><Text>Hello</Text></View> in render() still works.

Now I change it to:


    import React, {Component} from 'react';
    import { AppRegistry, View, Text } from 'react-native';
    import { WebView } from 'react-native-webview';
    
    export default class test1 extends Component{
      render() {
        return (
          <WebView source={{ uri: 'https://facebook.github.io/react-native/' }} />
        );
      }
    }
    
    AppRegistry.registerComponent('test1', () => test1);

And I get an error, saying: Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager.

Trying $ react-native link changes nothing. Also tried


    $ react-native link react-native-webview
    info Linking "react-native-webview" iOS dependency
    info iOS module "react-native-webview" has been successfully linked
    info Linking "react-native-webview" Android dependency
    info Android module "react-native-webview" has been successfully linked

but no changes again.

What is the right way to use WebView in React Native?

Upvotes: 2

Views: 4600

Answers (1)

double key
double key

Reputation: 21

I think u should run :

cd android && gradlew clean && cd .. && npx react-native run-android

Upvotes: 2

Related Questions