@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

Property	Type	Default	Description
visible	Bool	false	show/hide loading
indicatorColor	String	white
indicatorSize	large/small	large
backgroundColor	String	rgba(0, 0, 0, 0.4)
renderIndicator	func	undefined	Custom loading component
containerStyle	ViewStyle

LoadingService property

Property	Type	Default	Description
defaultProps	LoadingViewProperty

Spinner property

Property	Type	Default	Description
show	(params: LoadingViewProperty) => void		show loading when call
hide	func		hide loading when call