rn-skeletons v1.1.1

💀 rn-skeletons

A powerful, highly customizable skeleton loading library for React Native applications.

📸 Preview

🚀 Features

• 🎨 Fully Customizable Components
• 🔬 Multiple Skeleton Types
• 🌈 Advanced Animation Options
• 📱 Responsive Design
• ♿ Accessibility Support
• 💨 Lightweight & Performance-Optimized
• 🌓 Dark/Light Mode Compatible
• 🔄 Multiple Animation Types

📦 Installation

npm install rn-skeletons
# or
yarn add rn-skeletons
# or
pnpm add rn-skeletons

🛠 Basic Usage

import React from "react";
import { SkeletonText, SkeletonImage, SkeletonButton } from "rn-skeletons";

function LoadingScreen() {
  return (
    <View>
      <SkeletonText lines={3} lineHeight={20} spacing={10} />

      <SkeletonImage width={200} height={200} borderRadius={10} />

      <SkeletonButton width="100%" height={50} />
    </View>
  );
}

🌈 Comprehensive Component List

1. Base Skeleton Props

Common props for all skeleton components:

2. Text Skeleton

Create multi-line text placeholders

Text Skeleton Props

<SkeletonText
  lines={3} // Number of lines
  lineHeight={20} // Height of each line
  spacing={10} // Space between lines
  width="90%" // Width of text
  backgroundColor="#F0F0F0"
/>

3. Image Skeleton

Placeholder for images

Image Skeleton Props

<SkeletonImage
  width={200} // Image width
  height={200} // Image height
  borderRadius={10} // Corner radius
  animationType="pulse"
/>

4. Button Skeleton

Placeholder for buttons

Button Skeleton Props

<SkeletonButton
  width="100%" // Button width
  height={50} // Button height
  borderRadius={8} // Corner radius
  backgroundColor="#E0E0E0"
/>

5. Carousel Skeleton

Horizontal/vertical carousel loader

Carousel Skeleton Props

<SkeletonCarousel
  itemCount={3} // Number of items
  itemWidth={200} // Item width
  itemHeight={150} // Item height
  horizontal={true} // Scroll direction
  spacing={10} // Space between items
/>

6. Review Skeleton

Review card placeholder

Review Skeleton Props

<SkeletonReview
  avatarSize={50} // Avatar size
  textLines={2} // Text lines
  backgroundColor="#F5F5F5"
/>

7. Grid Skeleton

Grid-based layout skeleton

Grid Skeleton Props

<SkeletonGrid
  columns={2} // Number of columns
  itemHeight={150} // Item height
  spacing={10} // Space between items
  itemWidth="45%" // Width of grid items
/>

8. List Skeleton

List-based skeleton loader

List Skeleton Props

<SkeletonList
  itemCount={5} // Number of items
  itemHeight={80} // Item height
  spacing={10} // Space between items
/>

🎨 Advanced Customization

Animation Control

Customize animation for each skeleton:

<SkeletonText
  animationType="pulse" // Options: shimmer, pulse, fade, none
  duration={1500} // Animation duration in ms
  highlightColor="#E0E0E0"
/>

🌐 Responsive Design

Support for dynamic sizing:

<SkeletonText
  width="90%" // Percentage width
  lineHeight={20} // Fixed line height
/>

🚀 Performance Optimization

• Minimal render overhead
• Native animation driver
• Lightweight implementation
• Efficient memory management

🔧 Troubleshooting

• Ensure correct package installation
• Check React Native version compatibility
• Verify import statements

🤝 Contributing

1. Fork the repository
2. Create feature branch
3. Commit changes
4. Push to branch
5. Open Pull Request

📄 License

MIT License

📞 Contact

Your Name/Organization

• GitHub: @abahadmagsi
• Twitter: @thisisahadmagsi

⭐ Star the project if you find it helpful!