Non-Partisan Magicians

    @nghinv/react-native-loading
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    @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>
      );
      ...
    1. 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

    Install

    npm i @nghinv/react-native-loading

    DownloadsWeekly Downloads

    9

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    1.87 MB

    Total Files

    10

    Last publish

    Collaborators

    • nghinv