1.2.1 • Published 2 years ago
@mahmoudaliibrahim/react-native-loading-view v1.2.1
@mahmoudaliibrahim/react-native-loading-view
Getting started
A simple loading view for react-native apps, can be used while fetching data from remote server.
npm:
$ npm install @mahmoudaliibrahim/react-native-loading-view --save
yarn:
$ yarn add @mahmoudaliibrahim/react-native-loading-view
PropTypes
| Prop | Description | Type |
|---|---|---|
| containerStyle | the containing view style | Object |
| children | view to be wrapped by the loading view | React Component |
| isLoading | current loading view state | Boolean |
| backgroundColor | loading view background color | String |
| text | optional text to show during loading | String |
| textStyle | optional text style | Object |
| loaderStyle | loader container style | Object |
| indicatorColor | color of the loading indicator | String |
| indicatorSize | loading indicator size (React native ActivityIndicator size) | String or Number |
| unmount | boolean to unmount the children view while isLoading is true | Boolean |
| renderLoader | prop for using custom loader instead of default one | Function |
Usage
import React, { useState } from "react";
import { Text, StyleSheet } from "react-native";
import LoadingView from "@mahmoudaliibrahim/react-native-loading-view";
const App = () => {
const [loading, setLoading] = useState(true);
setTimeout(() => {
setLoading(false);
}, 2000);
return (
<LoadingView
containerStyle={styles.container}
isLoading={loading}
size={"small"}
unmount
>
<Text>Hello React</Text>
</LoadingView>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});