https://github.com/deriifirgiawan/react-native-skeleton-views
https://github.com/deriifirgiawan/react-native-skeleton-views
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/deriifirgiawan/react-native-skeleton-views
- Owner: deriifirgiawan
- License: mit
- Created: 2024-01-18T06:11:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-18T06:12:05.000Z (over 1 year ago)
- Last Synced: 2025-02-06T22:34:48.758Z (4 months ago)
- Language: TypeScript
- Size: 187 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# react-native-skeleton-view
This is simple loading skeleton for React Native
## Installation
> Note: This package is required **react-native-linear-gradient**
#### Step 1
Install **react-native-linear-gradient**
Using npm :
```sh
npm install react-native-linear-gradient
```
If you are running a **react-native** version below 0.60:
```bash
react-native link react-native-linear-gradient
```
#### Step 2
```sh
npm install react-native-skeleton-view
```
## Usage
### Simple Usage
```javascript
import SkeletonView from 'react-native-skeleton-view';
// ...
```
### Full usage
```javascript
import React from 'react';
import {StyleSheet, View} from 'react-native';
import SkeletonView from 'react-native-skeleton-view';
const App = () => {
return (
);
};
export default App;
const styles = StyleSheet.create({
Wrapper: {padding: 16},
SkeletonProfile: {
width: 80,
height: 80,
borderRadius: 80
},
Card: {
padding: 24,
borderWidth: 1,
borderColor: '#DEDEDE',
borderRadius: 20,
flexDirection: 'row',
alignItems: 'center'
}
})
```
## Props
| Name | Description | Default |
| -------- | -------- | -------- |
| backgroundColor | For change background color skeleton | #E2E9ED |
highlightColor | For change highlight color skeleton | #D9E0E3 |
duration | For change duration animation skeleton | 1000 |
style | For custom style skeleton | None |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT