Package Exports

@nghinv/react-native-loading

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nghinv/react-native-loading) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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

Wrapper LoadingService in the Root Component

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

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