@danielsledz/react-native-skeleton-placeholder

🧪 Fork of react-native-skeleton-placeholder, rewritten in TypeScript with improvements.

🚀 Features

• ✅ Full TypeScript support
• ✅ Improved performance
• ✅ Customizable animation
• ✅ Shimmer effect
• ✅ Easy to use API
• ✅ React Native 0.63+ compatible

📦 Installation

npm install @danielsledz/react-native-skeleton-placeholder
# or
yarn add @danielsledz/react-native-skeleton-placeholder

📋 Prerequisites

This library requires the following peer dependencies:

npm install @react-native-masked-view/masked-view react-native-linear-gradient
# or
yarn add @react-native-masked-view/masked-view react-native-linear-gradient

🎯 Usage (Quick Example)

import React from "react";
import { View, Text } from "react-native";
import { SkeletonPlaceholder } from "@danielsledz/react-native-skeleton-placeholder";

const MyComponent = () => {
  const [isLoading, setIsLoading] = React.useState(true);

  if (isLoading) {
    return (
      <SkeletonPlaceholder>
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <View style={{ width: 60, height: 60, borderRadius: 50 }} />
          <View style={{ marginLeft: 20 }}>
            <View style={{ width: 120, height: 20, borderRadius: 4 }} />
            <View
              style={{ marginTop: 6, width: 80, height: 20, borderRadius: 4 }}
            />
          </View>
        </View>
      </SkeletonPlaceholder>
    );
  }

  return (
    <View>
      <Text>Your actual content here</Text>
    </View>
  );
};

Using SkeletonPlaceholder.Item

import React from "react";
import { View } from "react-native";
import { SkeletonPlaceholder } from "@danielsledz/react-native-skeleton-placeholder";

const MyComponent = () => {
  return (
    <SkeletonPlaceholder>
      <SkeletonPlaceholder.Item width={60} height={60} borderRadius={50} />
      <SkeletonPlaceholder.Item width={120} height={20} borderRadius={4} />
      <SkeletonPlaceholder.Item width={80} height={20} borderRadius={4} />
    </SkeletonPlaceholder>
  );
};

Custom Animation

import React from "react";
import { SkeletonPlaceholder } from "@danielsledz/react-native-skeleton-placeholder";

const MyComponent = () => {
  return (
    <SkeletonPlaceholder
      backgroundColor="#E1E9EE"
      highlightColor="#F2F8FC"
      speed={1200}
      direction="left"
      borderRadius={8}
      shimmerWidth={100}
    >
      {/* Your skeleton content */}
    </SkeletonPlaceholder>
  );
};

📚 API Reference

SkeletonPlaceholder Props

| Prop | Type | Default | Description | | ----------------- | ------------------- | ----------- | ---------------------------------------------- | | children | React.ReactNode | - | The content to render as skeleton | | backgroundColor | string | "#E1E9EE" | Background color of skeleton | | highlightColor | string | "#F2F8FC" | Highlight color for shimmer effect | | speed | number | 800 | Animation speed in milliseconds (0 to disable) | | direction | "left" \| "right" | "right" | Animation direction | | enabled | boolean | true | Enable/disable skeleton | | borderRadius | number | - | Default border radius for all items | | shimmerWidth | number | - | Width of the shimmer highlight |

SkeletonPlaceholder.Item Props

SkeletonPlaceholder.Item accepts all ViewStyle props plus:

| Prop | Type | Description | | ---------- | ---------------------- | ----------------- | | children | React.ReactNode | Optional children | | style | StyleProp<ViewStyle> | Additional styles |

🎨 Customization

Colors

You can customize the skeleton appearance by changing colors:

<SkeletonPlaceholder backgroundColor="#f0f0f0" highlightColor="#e0e0e0">
  {/* Content */}
</SkeletonPlaceholder>

Animation

Control animation behavior:

<SkeletonPlaceholder
  speed={1000} // Slower animation
  direction="left" // Left-to-right animation
  enabled={false} // Disable animation
>
  {/* Content */}
</SkeletonPlaceholder>

🔧 Development

# Install dependencies
npm install

# Build the package
npm run build

# Clean build artifacts
npm run clean

# Type check only
npm run typecheck

🤝 Contributing

Contributions, issues and feature requests are welcome! Feel free to check issues page or submit a pull request.

1. Fork the repo
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

MIT © Daniel Śledź

📝 Changelog

See full Changelog