Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
react-native-gradient-shimmer
Advanced tools
⚛ A pure JavaScript, performant, typed shimmer component for Android and iOS.
⚛ A pure JavaScript, performant, typed shimmer component for Android, iOS and Web.
It uses React Native Animated API for animation, and expo-linear-gradient or react-native-linear-gradient for the gradient effect.
Take a look at the Online demo.
Android | iOS | Web |
---|---|---|
Install dependency package
yarn add react-native-gradient-shimmer
Or
npm i -S react-native-gradient-shimmer
Render the GradientShimmer
directly:
import LinearGradient from 'react-native-linear-gradient'; // or 'expo-linear-gradient'
import GradientShimmer from 'react-native-gradient-shimmer';
const App = () => {
return (
<SafeAreaView style={{flex: 1}}>
<GradientShimmer
LinearGradientComponent={LinearGradient}
backgroundColor="red"
highlightColor="blue"
height={120}
width={120}
style={{
borderRadius: 60,
margin: 8,
}}
/>
</SafeAreaView>
);
}
export default App;
Or create your own GradientShimmer
instance with default props:
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 (
<SafeAreaView style={{flex: 1}}>
<CustomGradientShimmer
height={120}
width={120}
style={{
borderRadius: 60,
margin: 8,
}}
/>
</SafeAreaView>
);
}
export default App;
See more in the Sample project.
For more complex layouts, you can use the ShimmerLayout
component.
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 (
<SafeAreaView style={{flex: 1}}>
<ShimmerLayout
LinearGradientComponent={LinearGradient}
layout={layoutExample}
/>
</SafeAreaView>
);
}
export default App;
See more in the Sample project.
Name | Type | Default | Description |
---|---|---|---|
LinearGradientComponent | ComponentType | Linear gradient component from expo-linear-gradient or 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 | Styles passed to the LinearGradient component |
Inherits most of GradientShimmer
props
Name | Type | Description |
---|---|---|
layout | ShimmerLayoutContainerType | Layout config tree |
defaultShimmerProps | GradientShimmer props | Default props for GradientShimmer |
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<ShimmerLayoutItemType | ShimmerLayoutContainerType> | Children content layout |
Name | Type | Description |
---|---|---|
width | number | Item width in DPI |
height | number | Item height in DPI |
New features, bug fixes and improvements are welcome! For questions and suggestions use the issues.
The MIT License (MIT)
Copyright (c) 2023 Douglas Nassif Roma Junior
See the full license file.
FAQs
⚛ A pure JavaScript, performant, typed shimmer component for Android and iOS.
The npm package react-native-gradient-shimmer receives a total of 215 weekly downloads. As such, react-native-gradient-shimmer popularity was classified as not popular.
We found that react-native-gradient-shimmer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.