Welcome, Guest: Join Nairaland / LOGIN! / Trending / Recent / New
Stats: 2,775,298 members, 6,611,118 topics. Date: Wednesday, 01 December 2021 at 07:31 AM

React Native Activityindicator Andriod IOS Example - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / React Native Activityindicator Andriod IOS Example (668 Views)

Tech Guys/girls IOS Vs Andriod Which Do You Use And Why / I Need An Andriod Ios App / Full-stack Andriod/ios Developer At Rimuda Technologies Limited (2) (3) (4)

(1) (Reply)

React Native Activityindicator Andriod IOS Example by skptricks: 6:49am On Aug 22, 2019
React Native ActivityIndicator Andriod IOS Example

This tutorial explains how to display loading screen or activity indicator in react native application for android and ios device. ActivityIndicator is the common circular loading indicator used in both android and iOS devices. This type of loader which is basically used to display a loading dotted moving circle on android and iPhone devices, When user trying to loading something from server.

React Native ActivityIndicator Andriod IOS Example


React Native ActivityIndicator Example
Lets see the complete source code that helps to display loading screen or activity indicator in react native application for android and ios device.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native packages import all required components.
import React, { Component } from 'react';
import { StyleSheet, View, ActivityIndicator, Button } from 'react-native';

Step 4: Lets create constructor block inside your App component. In the constructor block we have created state variables that helps to hide and show activity indicator from the device screen.

constructor(props) {
super(props);
this.state = {
isLoading: true
}
}

Step 5: Lets create function named as ShowHideActivityIndicator. This function would change the isLoading state value on button click.
ShowHideActivityIndicator = () => {
if (this.state.isLoading == true) {
this.setState({ isLoading: false })
}
else {
this.setState({ isLoading: true })
}
}

Step 6: Implement render method inside the App class and wrapped the below layout design inside the root View component.
render() {
return (
<View style={styles.Container}>
{this.state.isLoading ? <ActivityIndicator size="large" color="#0000ff" style={{ padding: 20 }} /> : null}
<Button title="Hide ActivityIndicator" onPress={this.ShowHideActivityIndicator} />
</View>
);
}

Step 7 : Apply the below style sheet design.
const styles = StyleSheet.create({
Container: {
justifyContent: 'center',
flex: 1,
margin: 10
},

});

(1) (Reply)

Which Is The Best Erp To Use For Bottle Water And Sachet Water Company / What To Do About My Hacked Facebook Account / What Are The Best Free Bitcoin Price API To Use ?

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2021 Oluwaseun Osewa. All rights reserved. See How To Advertise. 35
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.