https://github.com/iagormoraes/react-native-skelleton
A simple skeleton component view
https://github.com/iagormoraes/react-native-skelleton
Last synced: about 1 year ago
JSON representation
A simple skeleton component view
- Host: GitHub
- URL: https://github.com/iagormoraes/react-native-skelleton
- Owner: iagormoraes
- License: mit
- Created: 2021-04-18T02:23:32.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-18T16:49:11.000Z (about 5 years ago)
- Last Synced: 2025-03-24T05:45:25.940Z (about 1 year ago)
- Language: TypeScript
- Size: 19.7 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-skelleton
A skelleton solution done in native view, with it you can wrap any view component to enhance your user experience.
## Installation
##### NPM
```sh
npm install react-native-skelleton
```
##### Yarn
```sh
yarn add react-native-skelleton
```
## Usage
```typescript jsx
import SkelletonView from 'react-native-skelleton';
...
render() {
return(
)
}
```
### With SkelletonGroupView
```typescript jsx
import SkelletonView, { SkelletonGroupView } from 'react-native-skelleton';
render() {
return (
)
}
```
This component accepts any children component class, it will search recursively for the SkelletonView class and animate them.
⚠️ Use this if you to animate a group of skeletons in sync, without it they will not be in sync as the timer is not controlled by the AnimatorSet.
## Props and types
```typescript
export enum SkelletonRepeatMode {
RESTART = 1,
REVERSE = 2,
}
// default is AccelerateDecelerateInterpolator
export type SkelletonInterpolator =
| 'AccelerateDecelerateInterpolator'
| 'AccelerateInterpolator'
| 'AnticipateInterpolator'
| 'AnticipateOvershootInterpolator'
| 'BounceInterpolator'
| 'CycleInterpolator'
| 'DecelerateInterpolator'
| 'LinearInterpolator'
| 'OvershootInterpolator';
export type SkelletonGroupProps = {
children?: React.ReactElement | React.ReactElement[];
duration?: number;
startDelay?: number;
interpolator?: SkelletonInterpolator;
style?: ViewStyle;
};
export type SkelletonProps = {
children?: React.ReactElement | React.ReactElement[];
color?: string;
autoStart?: boolean;
duration?: number;
startDelay?: number;
repeatDelay?: number;
repeatMode?: SkelletonRepeatMode.RESTART | SkelletonRepeatMode.REVERSE;
repeatCount?: number;
interpolator?: SkelletonInterpolator;
style?: ViewStyle;
};
```
## Known Issues
- animation between views that are not wrapped with SkelletonGroupView is not 100% in sync.
- repeatDelay only works without using SkelletonGroupView.
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT