🎬 Demo

🦴 rn-skeleton-loading

A lightweight, customizable, and fast skeleton loading component for React Native.
🔥 Supports shimmer animation & fully customizable UI elements.

🚀 Installation

You can install it using npm or yarn:

npm install rn-skeleton-loading

or

yarn add rn-skeleton-loading

🔥 Usage

Here is a basic usage example:

import { Skeleton } from "rn-skeleton-loading";
import { View } from "react-native";

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <Skeleton width="90%" height={20} />
      <Skeleton width="80%" height={20} />
      <Skeleton width={60} height={60} borderRadius={30} />
    </View>
  );
}

🎨 Customization

You can customize the skeleton UI by passing props.

| Prop | Type | Default | Description | |---------------|----------|----------|-------------| | width | string / number | "100%" | Width of the skeleton | | height | number | 20 | Height of the skeleton | | borderRadius| number | 4 | Border radius | | color | string | "#E0E0E0" | Base color of the skeleton | | highlightColor | string | "#F5F5F5" | Shimmer effect color | | duration | number | 1000 | Duration of shimmer animation in ms |

🌟 Advanced Example (With Custom Props)

import { Skeleton } from "rn-skeleton-loading";
import { View } from "react-native";

export default function ProfileSkeleton() {
  return (
    <View style={{ padding: 20 }}>
      <Skeleton width={100} height={100} borderRadius={50} color="#ccc" />
      <Skeleton width="80%" height={15} style={{ marginTop: 10 }} />
      <Skeleton width="60%" height={15} style={{ marginTop: 5 }} />
    </View>
  );
}

✅ Features

✔ Lightweight & Fast
✔ Customizable Width, Height, Colors, Border Radius
✔ Works on both iOS & Android
✔ Supports shimmer animation
✔ Perfect for loading states in lists, cards, and avatars

🤝 Contributing

Pull requests are welcome! If you find a bug or have a feature request, please open an issue. 🚀

📜 License

MIT License – You are free to use, modify, and distribute this package!

🎉 💡 Happy Coding 🚀😊 😎