@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