📖 Introduction

@skelon/react-native brings the power of intelligent layout inference to mobile development. It automatically maps your View, Text, and Image components to high-performance native skeleton placeholders.

Powered by the @skelon/core engine, it ensures your mobile loading states match your design system perfectly without manual trial-and-error.

🚀 Installation

pnpm add @skelon/core @skelon/react-native
# or
npm install @skelon/core @skelon/react-native

⚡ Quick Example

import { View, Text, Image } from 'react-native';
import { Skelon } from '@skelon/react-native';

export const MovieCard = ({ movie, isLoading }) => {
  return (
    <Skelon loading={isLoading}>
      <View style={{ padding: 16 }}>
        <Image source={{ uri: movie.poster }} style={{ width: 100, height: 150 }} />
        <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{movie.title}</Text>
        <Text>{movie.year}</Text>
      </View>
    </Skelon>
  );
};

✨ Features

• Native Performance: Uses Animated.View for buttery smooth 60fps shimmer effects.
• Expo Compatible: Works out of the box with Expo projects without extra configuration.
• Adaptive Sizing: Skeletons automatically resize based on device screen dimensions and flexbox rules.
• Complex UI Support: Handles nested layouts, margins, and absolute positioning with ease.

📦 Skelon Ecosystem

| Package | Role | | :--- | :--- | | @skelon/core | Core Layout Inference Engine | | @skelon/react | Official React (Web) Adapter | | @skelon/cli | CLI tool for static layout generation |

🔗 Links

• Documentation: skelon.js.org
• Repository: github.com/ingointo/skelon
• Issues: Report a Bug

📄 License

MIT © ingointo