@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",
  },
});