Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/douglasjunior/react-native-gradient-shimmer
⚛ A pure JavaScript, performant, typed shimmer component for Android, iOS and Web
https://github.com/douglasjunior/react-native-gradient-shimmer
android animated ios linear-gradient placeholder react-native shimmer skeleton web
Last synced: 4 days ago
JSON representation
⚛ A pure JavaScript, performant, typed shimmer component for Android, iOS and Web
- Host: GitHub
- URL: https://github.com/douglasjunior/react-native-gradient-shimmer
- Owner: douglasjunior
- License: mit
- Created: 2023-04-03T16:29:52.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-28T00:33:31.000Z (30 days ago)
- Last Synced: 2024-12-28T01:20:43.838Z (30 days ago)
- Topics: android, animated, ios, linear-gradient, placeholder, react-native, shimmer, skeleton, web
- Language: TypeScript
- Homepage:
- Size: 15.5 MB
- Stars: 47
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React-Native Gradient Shimmer
[](https://github.com/douglasjunior/react-native-gradient-shimmer/blob/master/LICENSE)
[](https://www.npmjs.com/package/react-native-gradient-shimmer?activeTab=versions)
[](https://www.npmjs.com/package/react-native-gradient-shimmer)
⚛ A pure JavaScript, performant, typed shimmer component for Android, iOS and Web.
It uses React Native [Animated](https://reactnative.dev/docs/animated) API for animation, and [expo-linear-gradient](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://github.com/react-native-linear-gradient/react-native-linear-gradient) for the gradient effect.
Take a look at the [Online demo](https://snack.expo.dev/@douglasjunior/react-native-gradient-shimmer).
|Android|iOS|Web|
|-|-|-|
|
|
|
## Requirements
- React Native >= 0.60.0
- [expo-linear-gradient](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://github.com/react-native-linear-gradient/react-native-linear-gradient)
## Install
Install dependency package
```bash
yarn add react-native-gradient-shimmer
```
Or
```bash
npm i -S react-native-gradient-shimmer
```
## Basic usage
Render the `GradientShimmer` directly:
```jsx
import LinearGradient from 'react-native-linear-gradient'; // or 'expo-linear-gradient'
import GradientShimmer from 'react-native-gradient-shimmer';
const App = () => {
return (
);
}
export default App;
```
Or create your own `GradientShimmer` instance with default props:
```jsx
import LinearGradient from 'react-native-linear-gradient'; // or 'expo-linear-gradient'
import {createGradientShimmer} from 'react-native-gradient-shimmer';
const CustomGradientShimmer = createGradientShimmer({
backgroundColor: 'red',
highlightColor: 'blue',
LinearGradientComponent: LinearGradient,
})
const App = () => {
return (
);
}
export default App;
```
See more in the [Sample project](https://github.com/douglasjunior/react-native-gradient-shimmer/blob/main/Sample/App.tsx).
## Shimmer layout
For more complex layouts, you can use the `ShimmerLayout` component.
```jsx
import LinearGradient from 'react-native-linear-gradient'; // or 'expo-linear-gradient'
import {ShimmerLayout, ShimmerLayoutContainerType} from 'react-native-gradient-shimmer';
const layoutExample: ShimmerLayoutContainerType = {
content: [
{
flexDirection: 'row',
content: [
{
height: 150,
width: 100,
marginRight: 16,
},
{
justifyContent: 'space-between',
content: [
{
height: 40,
width: 250,
},
{
height: 40,
width: 250,
},
{
height: 40,
width: 120,
},
],
},
],
},
// ....
],
};
const App = () => {
return (
);
}
export default App;
```
See more in the [Sample project](https://github.com/douglasjunior/react-native-gradient-shimmer/blob/main/Sample/App.tsx).
## Props and types
### GradientShimmer props
|Name|Type|Default|Description|
|-|-|-|-|
|LinearGradientComponent|`ComponentType`||Linear gradient component from [expo-linear-gradient](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://github.com/react-native-linear-gradient/react-native-linear-gradient)|
|width|`number`||Component `width` in DPI|
|height|`number`||Component `height` in DPI|
|backgroundColor|`string`|`'rgb(200,200,200)'`|Background color in HEX or RGB|
|highlightColor|`string`|`'rgb(210,210,210)'`|Highlight color in HEX or RGB|
|highlightWidth|`number`|`200`|The size of the highlight effect in DPI|
|duration|`number`|`1500`|Duration of the animation in milliseconds|
|animating|`boolean`|`true`|Start or stop the animation|
|easing|`(value: number) => number`|`Easing.linear`|Easing function used by `Animated.timing()` to convey physically believable motion in animations. Read more at https://reactnative.dev/docs/easing|
|style|[ViewStyle](https://reactnative.dev/docs/view-style-props)||Styles passed to the LinearGradient component|
### ShimmerLayout props
*Inherits most of [`GradientShimmer` props](#gradientshimmer-props)*
|Name|Type|Description|
|-|-|-|
|layout|[`ShimmerLayoutContainerType`](#shimmerlayoutcontainertype)|Layout config tree|
|defaultShimmerProps|[`GradientShimmer` props](#gradientshimmer-props)|Default props for GradientShimmer|
### ShimmerLayoutContainerType
|Name|Type|Description|
|-|-|-|
|flexDirection|'row' \| 'column' \| 'row-reverse' \| 'column-reverse' \| undefined|FlexBox flexDirection|
|alignItems|`FlexAlignType`|FlexBox alignItems|
|justifyContent|`FlexAlignType`|FlexBox justifyContent|
|gap|`number`|Set the gaps (gutters) between rows and columns|
|rowGap|`number`|Set the size of the gap (gutter) between an element's rows|
|columnGap|`number`|Set the size of the gap (gutter) between an element's columns|
|content|`Array`|Children content layout|
### ShimmerLayoutItemType
|Name|Type|Description|
|-|-|-|
|width|`number`|Item `width` in DPI|
|height|`number`|Item `height` in DPI|
## Contribute
New features, bug fixes and improvements are welcome! For questions and suggestions use the [issues](https://github.com/douglasjunior/react-native-gradient-shimmer/issues).
[](https://paypal.me/douglasnassif)
## Star History
[](https://star-history.com/#douglasjunior/react-native-gradient-shimmer)
## License
```
The MIT License (MIT)
Copyright (c) 2023 Douglas Nassif Roma Junior
```
See the full [license file](https://github.com/douglasjunior/react-native-gradient-shimmer/blob/master/LICENSE).