react-native-loader2
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    React Native Loader 2

    A React Native Overlay Loader, powered by React Hooks.

    npm version Actions Status MIT License

    Example

    hero

    You can see the full example Here.

    Install

    yarn add react-native-loader2
    

    or

    npm install react-native-loader2 --save
    

    Usage

    Wrap the Provider component in the root of your project. After that you can useLoader in any of your child components.

    // App.tsx
    import React from "react";
    import { Provider } from "react-native-loader2";
     
    import LoaderButton from './LoaderButton';
     
    export default function App() {
      return (
        <Provider>
          <View>
            <LoaderButton />
          </View>
        </Provider>
      );
    }
     
    // LoaderButton.tsx
    import React from "react";
    import { Button } from "react-native";
    import { useLoader } from "react-native-loader2";
     
    export default () => {
      const { showLoader, hideLoader } = useLoader();
      return (
        <Button
          title="Show Loader"
          onPress={async () => {
            showLoader();
            await somethingAsyncThatCanTakeTime();
            hideLoader();
          }}
        />
      );
    };
     

    Show loader with text:

    showLoader("Loading...");

    Configurations

    React Native Loader 2 has simple configuration system. You need to pass the optional config to the Provider.

    const config = {
      size: 100,
      backgroundColor: "#444a",
      foregroundColor: "#fff",
      spinnerColor: "gray",
      cornerRadius: 4
    }
     
    export default function App() {
      return (
        <Provider config={config}>
          <App />
        </Provider>
      );
    }

    List of Configurations

    Configurations Type Default Value
    size number 100
    backgroundColor string "#444a"
    foregroundColor string "#fff"
    spinnerColor string "gray"
    corderRadius number 4
    titleColor string "#444"
    spinnerComponent React.FunctionalComponent <ActivityIndicator />

    Licence

    MIT

    Install

    npm i react-native-loader2

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    8.67 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar