zeljkoX / React Native Loading Placeholder
Licence: mit
React Native Loading Placeholder
Stars: ✭ 176
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Loading Placeholder
webpack-image-placeholder-loader
Generate a solid color image as placeholder
Stars: ✭ 24 (-86.36%)
Mutual labels: placeholder, loader
Ocskeleton
[OCSkeleton] - Make your loading view a little difference.
Stars: ✭ 184 (+4.55%)
Mutual labels: loader, placeholder
Rhplaceholder
Show pleasant loading view for your users 😍
Stars: ✭ 238 (+35.23%)
Mutual labels: loader, placeholder
React Image Appear
ReactJS component to make images appear with transition as they load.
Stars: ✭ 264 (+50%)
Mutual labels: loader, placeholder
Skeleton Elements
Skeleton elements - UI for improved perceived performance
Stars: ✭ 27 (-84.66%)
Mutual labels: loader, placeholder
Ng Image Appear
AngularJS Module to make images appear with transition as they load.
Stars: ✭ 120 (-31.82%)
Mutual labels: loader, placeholder
React Shimmer
🌠 Async loading, performant Image component for React.js
Stars: ✭ 990 (+462.5%)
Mutual labels: loader, placeholder
React Content Loader
⚪ SVG-Powered component to easily create skeleton loadings.
Stars: ✭ 11,830 (+6621.59%)
Mutual labels: loader, placeholder
React Native Sass Transformer
Use Sass to style your React Native apps.
Stars: ✭ 151 (-14.2%)
Mutual labels: loader
Slidingsquareloaderview
Marvelous sliding square loader view
Stars: ✭ 166 (-5.68%)
Mutual labels: loader
Vue Pretty Logger
The console is more cool to use, easier to debug, and more fun log output. Enjoy the vue-pretty-logger in the vue project.
Stars: ✭ 150 (-14.77%)
Mutual labels: loader
Httpimport
Module for remote in-memory Python package/module loading through HTTP/S
Stars: ✭ 153 (-13.07%)
Mutual labels: loader
Hgplaceholders
Nice library to show placeholders and Empty States for any UITableView/UICollectionView in your project
Stars: ✭ 2,048 (+1063.64%)
Mutual labels: placeholder
Param.macro
Partial application syntax and lambda parameters for JavaScript, inspired by Scala's `_` & Kotlin's `it`
Stars: ✭ 170 (-3.41%)
Mutual labels: placeholder
Cminputview
💪之前代码是基于UITextView进行的封装,侵入性较强,不方便使用,现使用Category重构代码,支持Cocoapods
Stars: ✭ 149 (-15.34%)
Mutual labels: placeholder
Dotloaderspack Android
Android DotsLoaders - a replacement of default android material progressbar with dots loaders
Stars: ✭ 149 (-15.34%)
Mutual labels: loader
React Loading Skeleton
Create skeleton screens that automatically adapt to your app!
Stars: ✭ 2,533 (+1339.2%)
Mutual labels: placeholder
Http Loader
A loader for ngx-translate that loads translations with http calls
Stars: ✭ 170 (-3.41%)
Mutual labels: loader
Mgs Machinery
Unity plugin for binding machinery joint in scene.
Stars: ✭ 164 (-6.82%)
Mutual labels: loader
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
npm install react-native-loading-placeholder
Example
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<React.Element<*>>;
loadingComponent1: Promise<*>;
constructor(props) {
super(props);
}
componentWillMount(): void {
this.loadingComponent = new Promise(resolve => {
setTimeout(() => {
resolve(
<View
style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
>
<Text>Resolved</Text>
</View>
);
}, 6000);
});
this.loadingComponent1 = new Promise(resolve => {
setTimeout(() => {
resolve();
}, 8000);
});
}
render() {
return (
<View style={styles.container}>
<PlaceholderExample loader={this.loadingComponent} />
<PlaceholderExample1 loader={this.loadingComponent1} />
</View>
);
}
}
const Gradient = (): React.Element<*> => {
return (
<LinearGradient
colors={['#eeeeee', '#dddddd', '#eeeeee']}
start={{ x: 1.0, y: 0.0 }}
end={{ x: 0.0, y: 0.0 }}
style={{
flex: 1,
width: 120
}}
/>
);
};
const PlaceholderExample = ({
loader
}: {
loader: Promise<*>
}): React.Element<*> => {
return (
<PlaceholderContainer
style={styles.placeholderContainer}
animatedComponent={<Gradient />}
duration={1000}
delay={1000}
loader={loader}
>
<View style={{ flexDirection: 'row' }}>
<Placeholder style={[styles.placeholder, { width: 50, height: 50 }]} />
<View
style={{
flexDirection: 'column',
width: '100%',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Placeholder
style={[
styles.placeholder,
{
width: '50%',
height: 10
}
]}
/>
<Placeholder
style={[
styles.placeholder,
{
width: '35%',
height: 7
}
]}
/>
</View>
</View>
<Placeholder
style={[styles.placeholder, { marginTop: 20, width: '80%' }]}
/>
<Placeholder style={[styles.placeholder, { width: '90%' }]} />
<Placeholder style={[styles.placeholder, { width: '50%' }]} />
</PlaceholderContainer>
);
};
const PlaceholderExample1 = ({
loader
}: {
loader: Promise<*>
}): React.Element<*> => {
return (
<PlaceholderContainer
style={styles.placeholderContainer}
animatedComponent={<Gradient />}
duration={1000}
delay={1000}
loader={loader}
replace={true}
>
<View style={{ flexDirection: 'column' }}>
<View style={styles.row}>
<Text style={{ width: '20%', textAlign: 'center' }}>Name</Text>
<Placeholder
style={[
styles.placeholder,
{
width: '50%',
height: 10
}
]}
>
<Text>John Doe</Text>
</Placeholder>
</View>
<View style={{ flexDirection: 'row' }}>
<View style={styles.row}>
<Text style={{ width: '20%', textAlign: 'center' }}>Age</Text>
<Placeholder
style={[
styles.placeholder,
{
width: '15%',
height: 10
}
]}
>
<Text>47</Text>
</Placeholder>
</View>
</View>
</View>
</PlaceholderContainer>
);
};
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,
<PlaceholderContainer />
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
<Placeholder />
Component that displays animated component
Props
-
style
- Object
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].