Menu
I am trying to use WebView Component inside View component, for a react native application I am working on. When I embed WebView inside View, I am not seeing the content I am displaying in WebView. Is this the expected behavior with react native?
755
WebViews offer developers opportunities to render any web components in a React Native application. A web component can be anything from a whole webpage/application or just a simple HTML file. The package react-native-webview makes it super simple to embed WebViews into your React Native apps!
Create a function called webviewRef and attach it to the WebView component. Next, create a function called sendDataToWebView and add the code below to it. Inside the “script” tag, use window. addEventListener to listen to the event from the React Native app.
In React Native WebViews enable access to any web portal in the mobile app itself. In other words, a web view allows us to open the web URLs inside the app interface. While React Native provides us with a built-it web view component, but we are going to use react-native-webview plugin in this tutorial, since it is more powerful.
The WebView component requires a source prop. This prop loads the static HTML or a URI ( which is the current case if you look closely at the above snippet ). A URI is a remote location for a web page to exist. A static HTML will be some internal HTML file that embeds some content to display.
A static HTML will be some internal HTML file that embeds some content to display. The style prop is basic React Native inline styling that allows you to customize a WebView. If your simulator is still running, you will get the following result.
Note that, by default, react-native-cli uses yarn as the package manager. To use a WebView component, you have to install the react-native-webview package. Also, make sure you link the native bindings with the newly installed dependency. An iOS application does not require any further steps to make this work.
You should specify a width and height for your webview. Do it as follow:
render() { return ( <WebView source={{uri: 'https://github.com/facebook/react-native'}} style={{flex: 1}} // OR style={{height: 100, width: 100}} /> );} When it's nested inside a View component, you need to set both view and webview flex to 1.
eg. -
<View style={{flex:1}}> <WebView source={{ uri: url }} style={{flex:1}} /> </View> 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
