
Research
Security News
Malicious npm Package Wipes Codebases with Remote Trigger
A malicious npm typosquat uses remote commands to silently delete entire project directories after a single mistyped install.
react-native-auto-skeleton
Advanced tools
🚀 Automatically generates skeleton based on your existing UI layout without manual configuration.
react-native-auto-skeleton
Provides automatic skeleton loading indicators based on your existing UI components, without manual configuration..
Using npm:
npm install react-native-auto-skeleton
Using yarn:
yarn add react-native-auto-skeleton
Here's a quick example to get started:
import { AutoSkeletonView, AutoSkeletonIgnoreView } from 'react-native-auto-skeleton';
...
<AutoSkeletonView isLoading={isLoading}>
...YOUR VIEWS
<AutoSkeletonIgnoreView> // Content that will be ignored by the skeleton
... Views without skeleton
</AutoSkeletonIgnoreView>
</AutoSkeletonView>
Full example
import { AutoSkeletonView } from 'react-native-auto-skeleton';
interface IProfile {
name: string;
jobTitle: string;
avatar: string;
}
const getProfile = async (): Promise<IProfile> => {
// Fetch profile data from your API
};
export default function App() {
const [isLoading, setIsLoading] = useState(true);
const [profile, setProfile] = useState<IProfile>({} as IProfile);
useEffect(() => {
(async () => {
const res = await getProfile();
setProfile(res);
setIsLoading(false);
})();
}, []);
return (
<AutoSkeletonView isLoading={isLoading}>
<View style={styles.avatarWithName}>
<Image style={styles.avatar} source={{ uri: profile.avatar }} />
<View style={{ flex: 1 }}>
<Text style={styles.name}>{profile.name}</Text>
<Text style={styles.jobTitle}>{profile.jobTitle}</Text>
</View>
</View>
{/* This buttons block will have skeleton applied */}
<View style={styles.buttons}>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonTitle}>Add</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonTitle}>Delete</Text>
</TouchableOpacity>
</View>
{/* Alternatively, to exclude buttons from skeleton rendering: */}
<AutoSkeletonIgnoreView>
<View style={styles.buttons}>
...
</View>
</AutoSkeletonIgnoreView>
</AutoSkeletonView>
);
}
Prop | Type | Default | Description |
---|---|---|---|
isLoading | boolean | — | Enables or disables the skeleton state. When true , skeleton placeholders will be shown. |
shimmerSpeed | Float | 1.0 | Duration of one shimmer animation cycle in seconds. Lower values = faster shimmer. |
shimmerBackgroundColor | string | #C7C7CC | Background color of skeleton shapes in hex format (e.g., #E0E0E0 ). |
defaultRadius | Float | 4 | Default corner radius for skeleton elements that don't have a defined borderRadius . |
<AutoSkeletonView>
.<AutoSkeletonIgnoreView>
. Any content inside this wrapper will not be processed by the skeleton system.FAQs
🚀 Automatically generates skeleton based on your existing UI layout without manual configuration.
The npm package react-native-auto-skeleton receives a total of 327 weekly downloads. As such, react-native-auto-skeleton popularity was classified as not popular.
We found that react-native-auto-skeleton demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Research
Security News
A malicious npm typosquat uses remote commands to silently delete entire project directories after a single mistyped install.
Research
Security News
Malicious PyPI package semantic-types steals Solana private keys via transitive dependency installs using monkey patching and blockchain exfiltration.
Security News
New CNA status enables OpenJS Foundation to assign CVEs for security vulnerabilities in projects like ESLint, Fastify, Electron, and others, while leaving disclosure responsibility with individual maintainers.