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

Webview In React Native

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

4 comments:

  1. A well informative blog which speaks about Mobile applications hands-on experience like these helps us to become an Android application developer.

    ReplyDelete
  2. Thank you for your post. This is excellent information. It is amazing and wonderful to visit your site. For more info:- React native App Development

    ReplyDelete