Deepshikha Puri, the young Indian Entrepreneur heading the mobile development trade from years to successive extent, has worked with numerous clients and many tremendous brands in this industry of mobile encompassing in India and overseas maintaining promising work relationships with each of them with an impression to manage it's whole thing.

Friday, April 19, 2019

Video Demo:

Basically a WebView is a view while display the web pages in our native applications. We are also able to load our local HTML in this WebView. Download Source code from below.

webview in react native webview in react native example react native webview npm

STEPS TO CREATE A REACT NATIVE PROJECT:

Step 1-> To create your project run this command:
sudo npm install -g react-native-cli
Step 2-> 
Now initialise your project name. Replace your project name with MovingScreen:
react-native init MovingScreen
Now you can start work on your React native project 

HomeScreen.js
import React, {Component} from 'react' import {View,StyleSheet,Text, StatusBar,WebView, ActivityIndicator} from 'react-native'

export default class HomeScreen extends Component{ state ={ loader: true, }
hideSpinner(){ this.setState({ loader:false, }) }
showSpinner(){ this.setState({ loader:true, }) } render(){ return( <View style={styles.container}> <StatusBar backgroundColor="#FF7043"></StatusBar> <View style={styles.headerContainer}> <Text style={styles.headerTxt}>HomeScreen</Text> </View> <View style={styles.mainContainer}> <WebView source={{uri:'http://deepshikhapuri.blogspot.com/'}} onLoadStart={this.showSpinner.bind(this)} onLoad={this.hideSpinner.bind(this)}></WebView> {this.state.loader? <View style={this.state.loader?styles.spinnerContainer: null}> <ActivityIndicator size={this.state.loader?'large':null} color='white' ></ActivityIndicator> </View> :null} </View> </View> ) } }
const styles = StyleSheet.create({ container:{ flex:1, },
headerContainer:{ height:40, backgroundColor:'#FF5722', justifyContent:'center', alignItems:'center', },
headerTxt:{ fontSize:13, color:'white', }, mainContainer:{ flex:1, justifyContent:'center', backgroundColor:'green', },
spinnerContainer:{ width:50, height:50, backgroundColor:'#FF5722', justifyContent:'center', alignSelf:'center', position:'absolute', }
})

Download Source code from here