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.
@nlazzos/react-native-skeleton
Advanced tools
Readme
React Native Skeleton is a react-native and react-native-web library to easily create a loading effect.
Using yarn:
yarn add @nlazzos/react-native-skeleton
Using npm:
npm install @nlazzos/react-native-skeleton --save
Note: Only if you are using this package on
react-native
it requires the dependency @react-native-masked-view/masked-view for thewave
animation (only available on mobile).
If your project includes the react-navigation >= 4.x you probably already have it installed and you can SKIP this step.
Using yarn:
yarn add @react-native-masked-view/masked-view
Using npm:
npm install @react-native-masked-view/masked-view --save
If you are running a react-native version below 0.60:
react-native link @react-native-masked-view/masked-view
Otherwise:
cd ios
pod install
Check the following example to see it in action and try changing the default props to see how it works.
You always need to wrap the skeletons with the SkeletonContainer
like in the following example.
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { SkeletonContainer, Skeleton } from '@nlazzos/react-native-skeleton';
const App = () => {
return (
<SkeletonContainer>
<View style={styles.container}>
<Skeleton style={styles.avatar} />
<View style={styles.textContainer}>
<Skeleton style={styles.title} />
<Skeleton style={styles.subtitle} />
</View>
<Skeleton style={styles.icon} />
</View>
</SkeletonContainer>
);
};
const styles = StyleSheet.create({
container: { flexDirection: 'row', alignItems: 'center', marginBottom: 16 },
avatar: { height: 40, width: 40, borderRadius: 0 },
textContainer: { flex: 1, marginLeft: 16 },
title: { width: '90%', height: 14, borderRadius: 7, marginBottom: 5 },
subtitle: { width: '70%', height: 14, borderRadius: 7 },
icon: { height: 16, width: 16, borderRadius: 4 },
});
Also you can do things like this.
import React from "react";
import { View } from "react-native";
import { SkeletonContainer, Skeleton } from "@nlazzos/react-native-skeleton";
const App = () => {
return (
<SkeletonContainer>
<ListItem />
<ListItem />
<ListItem />
</SkeletonContainer>
);
};
const ListItem = () => {
return (
<View style={styles.container}>
<Skeleton style={styles.avatar} />
<View style={styles.textContainer}>
<Skeleton style={styles.title} />
<Skeleton style={styles.subtitle} />
</View>
<Skeleton style={styles.icon} />
</View>
);
};
const styles = StyleSheet.create({
container: { flexDirection: 'row', alignItems: 'center', marginBottom: 16 },
avatar: { height: 40, width: 40, borderRadius: 0 },
textContainer: { flex: 1, marginLeft: 16 },
title: { width: '90%', height: 14, borderRadius: 7, marginBottom: 5 },
subtitle: { width: '70%', height: 14, borderRadius: 7 },
icon: { height: 16, width: 16, borderRadius: 4 },
});
Prop | Description | Type | Default |
---|---|---|---|
backgroundColor | Determines the color of placeholder | string | #E1E9EE |
highlightColor | Determines the highlight color of placeholder | string | #EDF3F7 |
speed | Determines the animation speed in milliseconds | number | 800 |
animation | Determines type of animation for the skeletons | wave , pulse or none | pulse |
Note: The
wave
animaton is only available for mobile, because it makes use of the@react-native-masked-view/masked-view
package.
Accepts any View
prop.
FAQs
A skeleton component for react-native and react-native-web.
The npm package @nlazzos/react-native-skeleton receives a total of 190 weekly downloads. As such, @nlazzos/react-native-skeleton popularity was classified as not popular.
We found that @nlazzos/react-native-skeleton 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.