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.
STEPS TO CREATE A REACT NATIVE PROJECT:
Step 1-> To create your project run this command:
Step 2->
Now initialise your project name. Replace your project name with MovingScreen:
Now you can start work on your React native project
HomeScreen.js
Download Source code from here
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.
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', }
})
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
