Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-native-js-shimmer-placeholder
Advanced tools
Readme
Shimmering effect using react-native-reanimated, react-native-linear-gradient and react-native-masked-view
Make sure you have already installed react-native-reanimated, react-native-linear-gradient and react-native-masked-view or install it from their links
npm install react-native-js-shimmer-placeholder --save
or using yarn
yarn add react-native-js-shimmer-placeholder
To use shimmering effect for View
import {
ViewPlaceholder,
Direction,
} from "react-native-js-shimmer-placeholder";
<ViewPlaceholder
show={true}
width={100}
height={100}
style={{
borderWidth: 1,
borderColor: "lightgrey",
borderRadius: 50,
}}
direction={Direction.UP}
gradientContainerStyle={{ borderRadius: 50 }}
>
<View
style={{
height: 100,
backgroundColor: "#318fb5",
borderRadius: 50,
alignItems: "center",
justifyContent: "center",
}}
>
<Text style={{ fontSize: 30 }}>🚀</Text>
</View>
</ViewPlaceholder>;
To use shimmering effect for Text
import { TextPlaceholder } from "react-native-js-shimmer-placeholder";
<TextPlaceholder
show={true}
textStyle={{ fontSize: 24, fontWeight: "bold" }}
style={{
flex: 1,
width: "100%",
justifyContent: "center",
alignItems: "center",
}}
textColor={"#318fb5"}
>
Hey React Native devs!
</TextPlaceholder>;
Prop | Description | Default |
---|---|---|
baseColor | The base color of the linear gradient | white |
boomerangMode | After reaching the end of animation, either restart from the beginning or reverse back towards it | false |
canTriggerAnimationCompletion | Conditional trigger of Animation completion (useful for lists) | true |
canUseProc | Should use proc function from reanimated | true |
direction | Sets the direction of the Shimmer to move | Direction.RIGHT |
gradientStyle | Style for the Linear Gradient itself | {} |
highlightColor | The highlight color for the shimmer | rgba(211,211,211,0.5) |
locations | Same as the prop used in Linear Gradient | [0, 0.5, 1] |
onAnimationComplete | Triggers on animation completion | emptyFn |
repeatCount | Number of times to repeat the animation | Depends on show prop |
repeatDelay * | Delay after which the current animation will repeat | 0 |
show | Whether to show the shimmer effect | true |
totalDuration | Duration of the single shimmer cycle | 1500 |
*Set
canUseProc
prop to true for the maximum number of items with samerepeatDelay
and false to others if you use differentrepeatDelay
's.
Prop | Description | Default |
---|---|---|
children | Child to render inside placeholder | null |
childrenWrapperStyle | Wrapper style for the children | {} |
style | Container style for shimmer which wraps the Linear Gradient and the children you pass | {} |
gradientContainerStyle | Container style for gradient | {} |
height | Height of the shimmer | 100% |
width | Width of the Shimmer | Required |
To pass View props just pass the props as you do for a View Component
Prop | Description | Default |
---|---|---|
children | Text to be shimmered | undefined |
style | Style for the MaskedView | { flex:1 } |
viewBehindMaskStyle | Children of MaskedView which gives the actual color for the Text | { flex:1, width:"100%" } |
textStyle | Style for Text to be rendered | {} |
textColor | Text color of the children | #5F717B |
To pass Text Props just pass the props as you do for a Text Component
Any help to improve the module is appreciated
react-native-js-shimmer-placeholder is licensed under The MIT License
FAQs
A Shimmer using React Native Reanimated
The npm package react-native-js-shimmer-placeholder receives a total of 11 weekly downloads. As such, react-native-js-shimmer-placeholder popularity was classified as not popular.
We found that react-native-js-shimmer-placeholder demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.