React Native Shimmer(Skeleton) Loader

# ShimmerPlaceholder Component Documentation

## Overview
The `ShimmerPlaceholder` component provides a skeleton loading effect using an animated shimmer. It is used as a placeholder while content is loading, improving user experience by visually indicating ongoing data retrieval.

## Features
- Customizable width, height, and border radius.
- Adjustable shimmer colors and animation direction.
- Supports automatic and manual animation control.
- Visibility toggling to switch between shimmer and actual content.
- Uses `react-native-linear-gradient` for smooth shimmer effects.

## Installation
Ensure you have `react-native-linear-gradient` installed in your project:
```sh
npm install react-native-linear-gradient
```
If using Expo, install it via:
```sh
expo install react-native-linear-gradient
```

## Props

| Prop Name              | Type           | Default Value | Description |
|------------------------|---------------|---------------|-------------|
| `width`               | number        | `200`         | Width of the shimmer effect. |
| `height`              | number        | `15`          | Height of the shimmer effect. |
| `borderRadius`        | number        | `5`           | Border radius of the shimmer box. |
| `shimmerColors`       | string[]      | `['#ebebeb', '#c5c5c530', '#ebebeb']` | Colors used in the shimmer gradient. |
| `location`            | number[]      | `[0.3, 0.5, 0.7]` | Location of color transitions in the gradient. |
| `isReversed`         | boolean       | `false`       | Controls if the shimmer animation should be reversed. |
| `stopAutoRun`         | boolean       | `false`       | Disables automatic shimmer animation. |
| `visible`             | boolean       | `false`       | Toggles visibility of the shimmer effect. |
| `style`               | ViewStyle     | `undefined`   | Additional styling for the component. |
| `contentStyle`        | ViewStyle     | `undefined`   | Styles applied when actual content is visible. |
| `shimmerStyle`        | ViewStyle     | `undefined`   | Styles applied to the shimmer container. |
| `children`            | ReactNode     | `undefined`   | Content displayed when `visible` is `true`. |
| `containerProps`      | ViewProps     | `undefined`   | Additional props for the outermost `View`. |
| `shimmerContainerProps` | ViewProps   | `undefined`   | Props for the shimmer effect container. |
| `childrenContainerProps` | ViewProps   | `undefined`   | Props for the content container. |

## Usage

### Basic Example
```tsx
import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import ShimmerPlaceholder from './ShimmerPlaceholder';

const ExampleScreen = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 3000); // Simulate data fetch
  }, []);

  return (
    <View>
      <ShimmerPlaceholder width={300} height={20} visible={!loading}>
        <Text>Loaded Content</Text>
      </ShimmerPlaceholder>
    </View>
  );
};

export default ExampleScreen;
```

### Custom Styling Example
```tsx
<ShimmerPlaceholder
  width={250}
  height={50}
  borderRadius={10}
  shimmerColors={['#f0f0f0', '#e0e0e0', '#f0f0f0']}
  isReversed
/>
```

## How It Works
1. **Animation Setup:**
   - An `Animated.Value` is used to control the shimmer translation.
   - `Animated.loop` continuously runs the shimmer effect.
   
2. **Shimmer Effect Rendering:**
   - If `visible` is `false`, a shimmer gradient is shown using `LinearGradient`.
   - The `translateX` property shifts the gradient to create a shimmer effect.

3. **Content Rendering:**
   - If `visible` is `true`, the actual content is displayed inside the component.

## Best Practices
- Use `ShimmerPlaceholder` in lists to provide a better UX while fetching data.
- Adjust `shimmerColors` to match your app’s theme.
- Utilize `stopAutoRun` for manual animation control when necessary.

## Conclusion
The `ShimmerPlaceholder` component is a lightweight and customizable solution for skeleton loading in React Native applications. It enhances perceived performance by keeping users engaged while waiting for content to load.