1.0.0 • Published 5 years ago
react-native-loader2 v1.0.0
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