React Native Loader 2

A React Native Overlay Loader, powered by React Hooks.

Example

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