https://github.com/pioner92/react-native-auto-skeleton
🚀 Automatically generates skeleton based on your existing UI layout without manual configuration.
https://github.com/pioner92/react-native-auto-skeleton
expo fabric loader native-component react-native react-native-loader react-native-placeholder react-native-skeleton react-native-ui rn-placeholder rn-skeleton skeleton skeleton-loader
Last synced: 4 months ago
JSON representation
🚀 Automatically generates skeleton based on your existing UI layout without manual configuration.
- Host: GitHub
- URL: https://github.com/pioner92/react-native-auto-skeleton
- Owner: pioner92
- License: mit
- Created: 2025-03-22T12:15:43.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-11-25T10:54:30.000Z (6 months ago)
- Last Synced: 2025-11-28T16:53:32.393Z (6 months ago)
- Topics: expo, fabric, loader, native-component, react-native, react-native-loader, react-native-placeholder, react-native-skeleton, react-native-ui, rn-placeholder, rn-skeleton, skeleton, skeleton-loader
- Language: Kotlin
- Homepage:
- Size: 14.4 MB
- Stars: 318
- Watchers: 5
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-auto-skeleton - Automatically generates skeleton loaders based on existing UI layout. (UI Components / Progress, Loaders & Skeletons)
README
# React Native Auto Skeleton – Lightweight Skeleton Loader for React Native
**`react-native-auto-skeleton`** is a modern **skeleton loader for React Native**, designed to automatically render **loading placeholders** (shimmer-style) based on your existing layout.
> Ideal replacement for `react-native-skeleton-placeholder` and other manual solutions.
## Demo
## ✅ Platform Support
| Platform | Old Arch | Fabric |
|----------|----------|--------|
| iOS | ✅ | ✅ |
| Android | ✅ | ✅ |
## Installation
Using npm:
```bash
npm install react-native-auto-skeleton
```
Using yarn:
```bash
yarn add react-native-auto-skeleton
```
### Expo
This library works in Expo (with `expo prebuild`) without additional configuration.
## Usage
> ⚠️ **Warning:** On Android, automatic detection of a view’s border-radius is not supported. You can override it manually via the defaultRadius prop.
Here's a quick example to get started:
```tsx
import { AutoSkeletonView, AutoSkeletonIgnoreView } from 'react-native-auto-skeleton';
...
...YOUR VIEWS
// Content that will be ignored by the skeleton
... Views without skeleton
```
Full example
```tsx
import { AutoSkeletonView } from 'react-native-auto-skeleton';
interface IProfile {
name: string;
jobTitle: string;
avatar: string;
}
const getProfile = async (): Promise => {
// Fetch profile data from your API
};
export default function App() {
const [isLoading, setIsLoading] = useState(true);
const [profile, setProfile] = useState({} as IProfile);
useEffect(() => {
(async () => {
const res = await getProfile();
setProfile(res);
setIsLoading(false);
})();
}, []);
return (
{profile.name}
{profile.jobTitle}
{/* This buttons block will have skeleton applied */}
Add
Delete
{/* Alternatively, to exclude buttons from skeleton rendering: */}
...
);
}
```
## API
| Prop | type | Description |
|---|---|---|
| **isLoading** | boolean | Enables or disables the skeleton state|
| **shimmerSpeed** | number | Duration of one shimmer animation cycle in seconds. Lower values = faster shimmer |
| **shimmerBackgroundColor** | string | Background color for animation types: `pulse` and `none` |
| **gradientColors** | [string,string] | Gradient colors for the skeleton gradient |
| **defaultRadius** | number | Default corner radius for skeleton elements that don't have a defined `borderRadius` | |
| **animationType** | `"gradient"` \| `"pulse"` \| `"none"` | Skeleton animation | |
## Best Practices
- For rapid implementation, wrap entire UI sections with ``.
- For precise control, wrap individual UI components or groups separately.
- Ensure components have clearly defined dimensions, backgrounds, or styles for optimal skeleton rendering.
- To exclude specific components from skeleton rendering, wrap them with ``. Any content inside this wrapper will not be processed by the skeleton system.
## 🔁 Alternative Solutions
You may also know:
- [`react-native-skeleton-placeholder`](https://github.com/chramos/react-native-skeleton-placeholder)
- [`react-content-loader`](https://github.com/danilowoz/react-content-loader)
If you're looking for a **React Native skeleton loader** that works **automatically**, with **Fabric support**, and no manual configuration, `react-native-auto-skeleton` is your go-to solution.
## License
[MIT](LICENSE)
---
## 📌 Keywords
React Native Skeleton, React Native Placeholder, react-native skeleton loader, react native shimmer, loading indicator React Native, Fabric placeholder view, auto skeleton view, react native content loader.