HomeOur TeamContact

Loading

By Utkarsh Lubal
Published in UI
April 01, 2023
1 min read
Loading

Table Of Contents

01
Introduction
02
Installation
03
Example
04
Tutorial

Introduction

Import module using import Loader from 'react-native-modal-loader';, then place component at the top of your view container.

Properties

PropDefaultisRequiredTypeDescription
loadingfalsetrueboolWhether to show the loader or hide it
colorgreyfalsecolorColor of the spinner
sizesmallfalse‘small’ or ‘large’Size of the spinner
opacity0.4falsenumberBackground opacity value between 0 and 1
title""falsestringDescription for loader

Installation

npm install react-native-modal-loader --save.

Example

import React, { Component } from "react";
import { StyleSheet, Button, Text, View } from "react-native";
import Loader from "react-native-modal-loader";

export default class App extends Component {
  state = {
    isLoading: false
  };

  showLoader = () => {
    this.setState({ isLoading: true });
  };

  render() {
    return (
      <View style={styles.container}>
        <Loader loading={this.state.isLoading} color="#ff66be" />
        <Button title="Press me!" onPress={this.showLoader} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  }
});

Tutorial

Coming Soon…


Previous Article
Simple E-charts wrapper
Utkarsh Lubal

Utkarsh Lubal

Full Stack Developer

Related Posts

Vertical Step indicator
Vertical Step indicator
May 06, 2023
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media