Package Exports

react-native-loader2

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-loader2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native Loader 2

A React Native Overlay Loader, powered by React Hooks.

Example

hero

You can see the full example Here.

Install

yarn add react-native-loader2

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