# React Native Loading Placeholder [![npm version](https://img.shields.io/npm/v/react-native-loading-placeholder.svg?style=flat)](https://www.npmjs.com/package/react-native-loading-placeholder) A customizable loading placeholder component for React Native. ## Features - Highly customizable design - Async feature to resolve whole PlaceholderContainer content or just Placeholder elements. ## Demo

## Installation ```sh npm install react-native-loading-placeholder ``` ## Example ```js import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; import { PlaceholderContainer, Placeholder } from 'react-native-loading-placeholder'; import LinearGradient from 'react-native-linear-gradient'; export default class Test extends Component { loadingComponent: Promise>; loadingComponent1: Promise<*>; constructor(props) { super(props); } componentWillMount(): void { this.loadingComponent = new Promise(resolve => { setTimeout(() => { resolve( Resolved ); }, 6000); }); this.loadingComponent1 = new Promise(resolve => { setTimeout(() => { resolve(); }, 8000); }); } render() { return ( ); } } const Gradient = (): React.Element<*> => { return ( ); }; const PlaceholderExample = ({ loader }: { loader: Promise<*> }): React.Element<*> => { return ( } duration={1000} delay={1000} loader={loader} > ); }; const PlaceholderExample1 = ({ loader }: { loader: Promise<*> }): React.Element<*> => { return ( } duration={1000} delay={1000} loader={loader} replace={true} > Name John Doe Age 47 ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', paddingTop: 25, backgroundColor: '#f6f7f8' }, placeholderContainer: { width: '90%', backgroundColor: '#fff', height: 200 }, placeholder: { height: 8, marginTop: 6, marginLeft: 15, alignSelf: 'flex-start', justifyContent: 'center', backgroundColor: '#eeeeee' }, row: { flexDirection: 'row', width: '100%' } }); ``` ## API The package exposes the following components, ### `` Container component responsible for orchestrating animations in placeholder components. #### Props - `duration` - Animated timing 'speed' - `delay` - Delay before starting next placeholder animation - `style` - Container style, - `animatedComponent` - Animated component (example: gradient component) - `loader` - Promise that resolves to React Component that is going to be displayed instead placeholders. Note: If replace props is set to true loader just need to resolve. - `replace` - Flag to indicate if placeholder elements are going to be replaced with its child elements on loader status resolved ### `` Component that displays animated component #### Props - `style` - Object

			Stars	Issues	Version	Updated	Created	Size
	react-native-loading-placeholder		176	4	0.0.6	7 years ago	7 years ago
	react-native-loading-spinner-overlay		1,583	19	3.0.1	2 years ago	9 years ago

react-native-loading-placeholder vs react-native-loading-spinner-overlay

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past