Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zeljkoX/react-native-loading-placeholder
React Native Loading Placeholder
https://github.com/zeljkoX/react-native-loading-placeholder
loader placeholder react-native skeletor
Last synced: 3 months ago
JSON representation
React Native Loading Placeholder
- Host: GitHub
- URL: https://github.com/zeljkoX/react-native-loading-placeholder
- Owner: zeljkoX
- License: mit
- Created: 2017-05-25T17:19:32.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-10T09:33:08.000Z (almost 7 years ago)
- Last Synced: 2024-07-14T04:43:24.478Z (4 months ago)
- Topics: loader, placeholder, react-native, skeletor
- Language: JavaScript
- Homepage:
- Size: 501 KB
- Stars: 176
- Watchers: 1
- Forks: 17
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Loading Placeholder [](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