@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 |