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

2019 © Kazushi Kawamura.