Menu
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;
546
React Native WebView is a modern, well-supported, and cross-platform WebView for React Native. It is intended to be a replacement for the built-in WebView (which will be removed from core).
A WebView is an embedded browser that can be used to display web pages inside your React Native applications. It can display anything (from custom HTML elements to entire web applications) inside React Native. In React Native, we can use WebView by using a third-party package called react-native-webview.
Use injectJavaScript as per (Guide > Communicating between JS and Native > The injectJavaScript method)[https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#the-injectjavascript-method"]. In your case, that would be something like this. webview. injectJavaScript(jsCode)
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
