@nghinv/react-native-loading v1.0.3

@nghinv/react-native-loading

Loading an overlay when running long tasks in the react-native application.

Installation

Installing the package

• Use yarn

yarn add @nghinv/react-native-loading

• Use npm

npm install @nghinv/react-native-loading

How to use

1. Wrapper LoadingService in the Root Component

  ...
  return (
    <LoadingService>
      <RootComponent />
    </LoadingService>
  );
  ...

2. Use Spinner.show() and Spinner.hide()

import React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { Spinner, LoadingService, LoadingView } from '@nghinv/react-native-loading';

export default function Example() {
  const onPress = () => {
    Spinner.show();
    setTimeout(() => {
      Spinner.hide();
    }, 2000);
  };

  return (
    <LoadingService>
      <View style={styles.container}>
        <Button title='Show loading' onPress={onPress} />
      </View>
    </LoadingService>
  );
}

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

• Show loading with custom property

  ...
  onShow = () => {
    Spinner.show({ indicatorColor: 'red' });
  }
  ...

Property

LoadingView property

LoadingService property

Spinner property