How to integrate React into React Native WebView?

Question

I'm developing a React Native project. I have a (only) React component and I must integrate it into my React Native app. I have tried with React Native WebView, but i get an error on ReactDOM.

Is there a way for integration with React Native Web View? Thanks

React Native

import React from "react"
import { WebView } from 'react-native'

class TVView extends React.Component{
    render(){
        return (
            <WebView
                source={require('../TV/Resources/public/index.html')}
                injectedJavaScript={require('../TV/Resources/src/index.html')}
                style={{flex: 1}}
                />
        );
    }
}

export default TVChartView

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">      
        <title>Demo</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

index.js

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
    React.createElement(App),
    document.getElementById('root')
);

App.js

import * as React from 'react';
import './App.css';
import { TVContainer } from './components/TVContainer/index';

class App extends React.Component {
    render() {
        return (
            <div className={ 'App' }>
                <header className={ 'App-header' }>
                    <h1 className={ 'App-title' }>
                       Example
                    </h1>
                </header>
                <TVContainer />
            </div>
        );
    }
}

export default App;

I never done this, but I think you should probably compile your react dom project and injected via the injectedJavaScript prop. And pass the root html to the source prop — Luis Gurmendez
– Luis Gurmendez, Commented Mar 13, 2020 at 14:30
NOTE that you are passingan html to the injectedJavaScript prop — Luis Gurmendez
– Luis Gurmendez, Commented Mar 13, 2020 at 14:32

Force Bolt · Accepted Answer · 2021-04-26 15:13:06Z

1

First you run React project on localhost then you download library react-native-webview (https://www.npmjs.com/package/react-native-webview) because react-native deprecated WebView. Example:-

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

class TVView extends React.Component{
    render(){
        return (
            <WebView
                source={{uri:'localhost:3000/}}
                injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `}

                style={{flex: 1}}
                />
        );
    }
}

export default TVChartView

answered Apr 26, 2021 at 15:13

Force Bolt

1,23111 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to integrate React into React Native WebView?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related