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
npm install react-native-loading-placeholder
Example
;;;; loadingComponent: Promise<ReactElement<*>>; loadingComponent1: Promise<*>; { superprops; } : void thisloadingComponent = { ; }; thisloadingComponent1 = { ; }; { return <View style=stylescontainer> <PlaceholderExample loader=thisloadingComponent /> <PlaceholderExample1 loader=thisloadingComponent1 /> </View> ; } const Gradient = : ReactElement<*> return <LinearGradient colors='#eeeeee' '#dddddd' '#eeeeee' start= x: 10 y: 00 end= x: 00 y: 00 style= flex: 1 width: 120 /> ;; const PlaceholderExample = loader: loader: Promise<*>: ReactElement<*> return <PlaceholderContainer style=stylesplaceholderContainer animatedComponent=<Gradient /> duration=1000 delay=1000 loader=loader > <View style= flexDirection: 'row' > <Placeholder style=stylesplaceholder width: 50 height: 50 /> <View style= flexDirection: 'column' width: '100%' alignItems: 'center' justifyContent: 'center' > <Placeholder style= stylesplaceholder width: '50%' height: 10 /> <Placeholder style= stylesplaceholder width: '35%' height: 7 /> </View> </View> <Placeholder style=stylesplaceholder marginTop: 20 width: '80%' /> <Placeholder style=stylesplaceholder width: '90%' /> <Placeholder style=stylesplaceholder width: '50%' /> </PlaceholderContainer> ;; const PlaceholderExample1 = loader: loader: Promise<*>: ReactElement<*> return <PlaceholderContainer style=stylesplaceholderContainer animatedComponent=<Gradient /> duration=1000 delay=1000 loader=loader replace=true > <View style= flexDirection: 'column' > <View style=stylesrow> <Text style= width: '20%' textAlign: 'center' >Name</Text> <Placeholder style= stylesplaceholder width: '50%' height: 10 > <Text>John Doe</Text> </Placeholder> </View> <View style= flexDirection: 'row' > <View style=stylesrow> <Text style= width: '20%' textAlign: 'center' >Age</Text> <Placeholder style= stylesplaceholder width: '15%' height: 10 > <Text>47</Text> </Placeholder> </View> </View> </View> </PlaceholderContainer> ;; const styles = StyleSheet;
API
The package exposes the following components,
<PlaceholderContainer />
Container component responsible for orchestrating animations in placeholder components.
Props
duration
- Animated timing 'speed'delay
- Delay before starting next placeholder animationstyle
- 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
<Placeholder />
Component that displays animated component
Props
style
- Object