React Native - WebView - Mobile Application development

Congratulations! You are standing in the right place! In this article, we will learn how to utilize WebView. It is utilized when you want to render a web page to your mobile app inline.

React Native WebView is a modern, well-fortified, and cross-platform WebView for React Native. It is intended to be a supersession for the built-in WebView



Implementation:

First, You must set up your local development environment. Follow the below link to set up your local environment.


After executing the commands mentioned in this link, a folder with a specified name is created with the following contents.


Install react-native-webview

npm i react-native-webview

Next, we are going to edit the App.js file and write the below code.

Import WebView, StyleSheet, View component in our project.

import React from 'react';

import {
StyleSheet, View,
} from 'react-native';
import { WebView } from 'react-native-webview';

View

const App = () => {
return (
<View style = {styles.container}>
<WebView
source = {{ uri:
'https://www.google.com/' }}
/>
</View>
)
}

Style Sheet

const styles = StyleSheet.create({
container: {
height: 350,
}
})

Complete source code for App.js File

import React from 'react';

import {
StyleSheet, View,
} from 'react-native';
import { WebView } from 'react-native-webview';

const App = () => {
return (
<View style = {styles.container}>
<WebView
source = {{ uri:
'https://www.google.com/' }}
/>
</View>
)
}
export default App;

const styles = StyleSheet.create({
container: {
height: 350,
}
})

Run

sibinmuhammed@ladmin-H310M-S2:~$ react-native start
sibinmuhammed@ladmin-H310M-S2:~/knf-reactnative/KnowledgeFactoryDemo$ react-native run-android



Popular posts from this blog

Spring boot video streaming example-HTML5

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Spring Boot + Mockito simple application with 100% code coverage

Spring Boot + OpenCSV Export Data to CSV Example

Custom Exception Handling in Quarkus REST API

DataTable-Pagination example with Spring boot, jQuery and ajax

Registration and Login with Spring Boot + Spring Security + Thymeleaf

Node JS mini projects with source code - free download

Spring boot web project free download:User Registration System

Java - Blowfish Encryption and decryption Example