### Expo Installation

Source: https://github.com/marcuzgabriel/react-native-reanimated-skeleton/blob/main/README.md

Instructions for installing and configuring the Skeleton component in an Expo project, addressing compatibility with react-native-linear-gradient.

```APIDOC
## Expo Install

### Description

This section provides instructions for integrating the Skeleton component into an Expo project. It specifically addresses the compatibility issue with `react-native-linear-gradient` by outlining the necessary steps to use `expo-linear-gradient` instead, including a postinstall script.

### Steps

1.  **Add Postinstall Script**: Ensure you have the provided postinstall script from the repository: [https://github.com/marcuzgabriel/react-native-reanimated-skeleton/tree/main/packages/expo/scripts](https://github.com/marcuzgabriel/react-native-reanimated-skeleton/tree/main/packages/expo/scripts)
2.  **Configure package.json**: Add the postinstall script to your `package.json` file. Refer to the example provided: [https://github.com/marcuzgabriel/react-native-reanimated-skeleton/blob/main/packages/expo/package.json](https://github.com/marcuzgabriel/react-native-reanimated-skeleton/blob/main/packages/expo/package.json)
3.  **Install Dependencies**: Run `npm install` and then restart your application.

### Import Transformation Example

The postinstall script ensures that the following import transformation occurs:

```ts
import LinearGradient from 'react-native-linear-gradient';

... transforms into ...

import { LinearGradient } from 'expo-linear-gradient';
```
```

--------------------------------

### Enable Fade-In Animation for Content

Source: https://context7.com/marcuzgabriel/react-native-reanimated-skeleton/llms.txt

Set `hasFadeIn` to `true` to make the children container smoothly fade in from opacity 0 to 1 over 250ms when `isLoading` changes to `false`. This requires no additional setup.

```tsx
import React, { useState, useEffect } from "react";
import { Text } from "react-native";
import Skeleton from "react-native-reanimated-skeleton";

export default function FadeInContent() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then((res) => res.json())
      .then(() => setLoading(false));
  }, []);

  return (
    <Skeleton
      isLoading={loading}
      hasFadeIn                            // ← smooth reveal
      layout={[{ width: 200, height: 24, borderRadius: 6 }]} 
    >
      <Text style={{ fontSize: 18 }}>Data loaded!</Text>
    </Skeleton>
  );
  // When loading becomes false, <Text> fades in over 250ms
}
```

--------------------------------

### Custom Layout with Shiver Animation

Source: https://context7.com/marcuzgabriel/react-native-reanimated-skeleton/llms.txt

Demonstrates a full example using a custom layout, shiver animation, and fade-in reveal for children. Configure animation type, direction, duration, colors, and bone geometry via props.

```tsx
import React, { useState, useEffect } from "react";
import { Text, StyleSheet, SafeAreaView } from "react-native";
import Skeleton from "react-native-reanimated-skeleton";

// Full example: custom layout, shiver animation, fade-in reveal
export default function ProfileCard() {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Simulate a network request
    const timer = setTimeout(() => setIsLoading(false), 2000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Skeleton
        isLoading={isLoading}
        hasFadeIn                          // fade-in children when loading stops
        containerStyle={styles.container}
        animationType="shiver"             // "shiver" | "pulse" | "none"
        animationDirection="horizontalLeft"// direction for shiver gradient
        duration={1200}                    // ms per animation cycle
        boneColor="#E1E9EE"
        highlightColor="#F2F8FC"
        layout={[
          // Avatar placeholder
          { key: "avatar", width: 80, height: 80, borderRadius: 40, marginBottom: 12 },
          // Title line
          { key: "title", width: 180, height: 18, borderRadius: 4, marginBottom: 8 },
          // Subtitle line
          { key: "subtitle", width: 120, height: 14, borderRadius: 4, marginBottom: 16 },
          // Nested layout: two side-by-side tags
          {
            key: "tags",
            flexDirection: "row",
            children: [
              { key: "tag1", width: 60, height: 24, borderRadius: 12, marginRight: 8 },
              { key: "tag2", width: 60, height: 24, borderRadius: 12 },
            ],
          },
        ]}
      >
        {/* Real content — shown when isLoading is false *//*}
        <Text style={styles.name}>Jane Doe</Text>
        <Text style={styles.role}>Senior Engineer</Text>
      </Skeleton>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { alignItems: "center", padding: 20 },
  name: { fontSize: 18, fontWeight: "bold" },
  role: { fontSize: 14, color: "#666" },
});
```

--------------------------------

### Skeleton with Dynamic Loading State

Source: https://github.com/marcuzgabriel/react-native-reanimated-skeleton/blob/main/packages/npm/README.md

Control the visibility of the skeleton by dynamically updating the `isLoading` prop based on your application's state, such as data fetching status. This example shows how to sync `isLoading` with a React state variable.

```jsx
export default function Placeholder () {
  const [loading, setLoading] = useState(true);
  return (
    <Skeleton
       containerStyle={{flex: 1, width: 300}}
        isLoading={isLoading}> 
        {...otherProps}
    />
  )
}
```

--------------------------------

### Customize Skeleton Animation Duration and Easing

Source: https://context7.com/marcuzgabriel/react-native-reanimated-skeleton/llms.txt

Control the animation speed with `duration` (in ms) and customize the timing curve using `easing` with a Reanimated `Easing` factory. The first example uses a fast shimmer with ease-in-out, and the second shows a slow, linear pulse.

```tsx
import { Easing } from "react-native-reanimated";
import Skeleton from "react-native-reanimated-skeleton";

<Skeleton
  isLoading
  duration={600}                               // fast shimmer
  easing={Easing.bezier(0.42, 0, 0.58, 1)}     // ease-in-out cubic
  layout={[{ width: 300, height: 20, borderRadius: 4 }]} 
/>

// Slow, linear pulse
<Skeleton
  isLoading
  animationType="pulse"
  duration={2000}
  easing={Easing.linear}
  layout={[{ width: 300, height: 20, borderRadius: 4 }]} 
/>
```

--------------------------------

### TypeScript Interface for Skeleton Props

Source: https://context7.com/marcuzgabriel/react-native-reanimated-skeleton/llms.txt

Utilize the exported `ISkeletonProps` interface from `react-native-reanimated-skeleton` to type wrapper components or custom skeleton factories. This example shows a reusable typed skeleton wrapper for card components.

```tsx
import Skeleton, { ISkeletonProps } from "react-native-reanimated-skeleton";

// Reusable typed skeleton wrapper
function CardSkeleton(props: Partial<ISkeletonProps> & { isLoading: boolean }) {
  const defaultLayout: ISkeletonProps["layout"] = [
    { key: "img",   width: "100%", height: 180, borderRadius: 12 },
    { key: "title", width: 200,    height: 18,  borderRadius: 4, marginTop: 12 },
    { key: "body",  width: "100%", height: 14,  borderRadius: 4, marginTop: 8 },
  ];

  return (
    <Skeleton
      layout={defaultLayout}
      animationType="shiver"
      boneColor="#EBEBEB"
      highlightColor="#F7F7F7"
      {...props}           // caller can override any prop
    />
  );
}

// Usage
<CardSkeleton isLoading={isFetching} animationDirection="horizontalRight" />
```

--------------------------------

### Set Skeleton Bone and Highlight Colors

Source: https://context7.com/marcuzgabriel/react-native-reanimated-skeleton/llms.txt

Use `boneColor` and `highlightColor` to define the gradient stop colors for shiver animations or interpolation endpoints for pulse animations. The first example shows dark-mode colors, while the second demonstrates branded colors with a pulse animation.

```tsx
import Skeleton from "react-native-reanimated-skeleton";

// Dark-mode skeleton
<Skeleton
  isLoading
  boneColor="#2A2A2A"
  highlightColor="#3D3D3D"
  layout={[
    { key: "line1", width: 300, height: 16, borderRadius: 4 },
    { key: "line2", width: 220, height: 16, borderRadius: 4, marginTop: 10 },
  ]} 
/>

// Branded skeleton (matches brand palette)
<Skeleton
  isLoading
  boneColor="#EDE7F6"      // light purple
  highlightColor="#B39DDB" // mid purple
  animationType="pulse"
  layout={[{ width: 160, height: 40, borderRadius: 20 }]} 
/>
```

--------------------------------

### Style Skeleton Container with `containerStyle`

Source: https://context7.com/marcuzgabriel/react-native-reanimated-skeleton/llms.txt

Use `containerStyle` to style the outer `View` that wraps both bones and children. The default styles are `{ alignItems: "center", flex: 1, justifyContent: "center" }`. This example demonstrates styling for a horizontal list-row container.

```tsx
import Skeleton from "react-native-reanimated-skeleton";

// Horizontal list-row container
<Skeleton
  isLoading
  containerStyle={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 16 }} 
  layout={[
    { key: "icon", width: 44, height: 44, borderRadius: 22, marginRight: 12 },
    {
      key: "text",
      flexDirection: "column",
      children: [
        { key: "t1", width: 160, height: 16, borderRadius: 4 },
        { key: "t2", width: 100, height: 12, borderRadius: 4, marginTop: 6 },
      ],
    },
  ]} 
/>
```

--------------------------------

### Basic Skeleton Usage in Expo

Source: https://context7.com/marcuzgabriel/react-native-reanimated-skeleton/llms.txt

Demonstrates the basic usage of the Skeleton component in an Expo project. Ensure the postinstall script is run for Expo compatibility.

```tsx
import React, { useState } from "react";
import Skeleton from "react-native-reanimated-skeleton";

export default function App() {
  const [loading] = useState(true);
  return (
    <Skeleton
      isLoading={loading}
      layout={[{ width: 300, height: 200, borderRadius: 16 }]} 
    />
  );
}
```

--------------------------------

### Expo Integration: Postinstall Script for Linear Gradient

Source: https://context7.com/marcuzgabriel/react-native-reanimated-skeleton/llms.txt

Expo does not natively support `react-native-linear-gradient`. A `postinstall` script in `package.json` is required to rewrite the import to `expo-linear-gradient` within `node_modules` before the package is used.

```json
// packages/expo/package.json (excerpt)
{
  "scripts": {
    "postinstall": "node scripts/postinstall.sh"
  },
  "dependencies": {
    "expo-linear-gradient": "*",
    "react-native-reanimated-skeleton": "*"
  }
}
```

```bash
# scripts/postinstall.sh rewrites the import inside node_modules:
# FROM: import LinearGradient from 'react-native-linear-gradient';
```

--------------------------------

### Import Skeleton Component

Source: https://github.com/marcuzgabriel/react-native-reanimated-skeleton/blob/main/packages/npm/README.md

Import the Skeleton component from the library to use it in your project.

```javascript
import Skeleton from "react-native-reanimated-skeleton";
```

--------------------------------

### Skeleton with Custom Layout

Source: https://github.com/marcuzgabriel/react-native-reanimated-skeleton/blob/main/packages/npm/README.md

Configure the skeleton's appearance by providing a `layout` prop with an array of objects, each defining the dimensions and margins for a bone. This is useful when you need precise control over the skeleton's structure.

```jsx
export default function Placeholder() {
  return (
    <Skeleton
      containerStyle={{ flex: 1, width: 300 }}
      isLoading={false}
      layout={[
        { key: "someId", width: 220, height: 20, marginBottom: 6 },
        { key: "someOtherId", width: 180, height: 20, marginBottom: 6 },
      ]}>
      <Text style={styles.normalText}>Your content</Text>
      <Text style={styles.bigText}>Other content</Text>
    </Skeleton>
  );
}
```

--------------------------------

### Toggle Loading State with Skeleton

Source: https://context7.com/marcuzgabriel/react-native-reanimated-skeleton/llms.txt

Demonstrates how to control the skeleton's visibility using the `isLoading` prop. The skeleton renders when `isLoading` is true, and the children are shown when it's false.

```tsx
import React, { useState } from "react";
import { Button, Text, View } from "react-native";
import Skeleton from "react-native-reanimated-skeleton";

export default function ToggleDemo() {
  const [isLoading, setIsLoading] = useState(false);

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Skeleton
        isLoading={isLoading}
        layout={[{ width: 200, height: 20, borderRadius: 4 }]}
      >
        <Text>Content is ready!</Text>
      </Skeleton>

      <Button
        title={isLoading ? "Stop Loading" : "Start Loading"}
        onPress={() => setIsLoading((v) => !v)}
      />
    </View>
  );
}
// When isLoading=true  → animated bone (200×20) is rendered
// When isLoading=false → <Text>Content is ready!</Text> is rendered
```

--------------------------------

### Custom Layout with `layout` Prop

Source: https://context7.com/marcuzgabriel/react-native-reanimated-skeleton/llms.txt

Define complex skeleton structures using an array of `ICustomViewStyle` objects. Supports nested children for multi-bone layouts. Ensure `key` is provided for each bone.

```tsx
import Skeleton, { ISkeletonProps } from "react-native-reanimated-skeleton";

// ICustomViewStyle extends React Native's ViewStyle with optional
// `children?: ICustomViewStyle[]` and `key?: string | number`

const articleLayout: ISkeletonProps["layout"] = [
  // Full-width hero image
  { key: "hero", width: "100%", height: 200, borderRadius: 8, marginBottom: 16 },
  // Two-column row
  {
    key: "row",
    flexDirection: "row",
    justifyContent: "space-between",
    children: [
      { key: "col1", width: 140, height: 16, borderRadius: 4 },
      { key: "col2", width: 80,  height: 16, borderRadius: 4 },
    ],
  },
  // Text lines
  { key: "line1", width: "100%", height: 14, borderRadius: 4, marginTop: 12 },
  { key: "line2", width: "80%",  height: 14, borderRadius: 4, marginTop: 8 },
  { key: "line3", width: "60%",  height: 14, borderRadius: 4, marginTop: 8 },
];

export default function ArticleSkeleton({ isLoading }: { isLoading: boolean }) {
  return (
    <Skeleton
      isLoading={isLoading}
      layout={articleLayout}
      containerStyle={{ flex: 1, padding: 16 }}
    />
  );
}
```

--------------------------------

### Skeleton with Child Layout

Source: https://github.com/marcuzgabriel/react-native-reanimated-skeleton/blob/main/packages/npm/README.md

Use the child layout option when the Skeleton component should infer its bone structure from its direct children's dimensions. Ensure `isLoading` is set to true to display the skeleton.

```jsx
<Skeleton isLoading={true} containerStyle={styles.container}>
  <Text style={styles.normalText}>Your content</Text>
  <Text style={styles.bigText}>Other content</Text>
</Skeleton>
```

--------------------------------

### Expo Linear Gradient Import Transformation

Source: https://github.com/marcuzgabriel/react-native-reanimated-skeleton/blob/main/packages/npm/README.md

For Expo projects, react-native-linear-gradient needs to be transformed to expo-linear-gradient. This script handles the import change and ensures LinearGradient is correctly referenced.

```typescript
import LinearGradient from 'react-native-linear-gradient';

... transforms into ...

import { LinearGradient } from 'expo-linear-gradient';
```

--------------------------------

### Skeleton Component Props

Source: https://github.com/marcuzgabriel/react-native-reanimated-skeleton/blob/main/README.md

The Skeleton component accepts the following props to customize its appearance and behavior.

```APIDOC
## Skeleton Component Props

### Description

This section details the available props for the Skeleton component, allowing for customization of its loading state, layout, animation, and styling.

### Props

- **isLoading** (boolean) - Required - Shows the Skeleton bones when true.
- **layout** (array of objects) - Optional - A custom layout for the Skeleton bones. Defaults to [].
- **duration** (number) - Optional - Duration of one cycle of animation. Defaults to 1200 ms.
- **containerStyle** (object) - Optional - The style applied to the View containing the bones. Defaults to `flex: 1`.
- **easing** (Easing) - Optional - Easing of the bones animation. Defaults to `bezier(0.5, 0, 0.25, 1)`.
- **animationType** (string) - Optional - The animation to be used for animating the bones. Defaults to "shiver".
- **animationDirection** (string) - Optional - Used only for shiver animation, describes the direction and end-point. Defaults to "horizontalLeft".
- **boneColor** (string) - Optional - Color of the bones. Defaults to "#E1E9EE".
- **highlightColor** (string) - Optional - Color of the highlight of the bones. Defaults to "#F2F8FC".
```

--------------------------------

### Child Layout Mode for Skeleton

Source: https://context7.com/marcuzgabriel/react-native-reanimated-skeleton/llms.txt

When the `layout` prop is omitted, the Skeleton component measures its direct children's styles to determine bone dimensions. This simplifies integration by matching skeleton shapes to existing component layouts.

```tsx
import React, { useState } from "react";
import { Text, Image, StyleSheet } from "react-native";
import Skeleton from "react-native-reanimated-skeleton";

export default function UserRow({ isLoading }: { isLoading: boolean }) {
  return (
    // No layout prop — bones are inferred from child dimensions
    <Skeleton isLoading={isLoading} containerStyle={styles.row}>
      <Image source={{ uri: "https://example.com/avatar.jpg" }} style={styles.avatar} />
      <Text style={styles.name}>Alice Smith</Text>
      <Text style={styles.subtitle}>alice@example.com</Text>
    </Skeleton>
  );
}

const styles = StyleSheet.create({
  row:      { flexDirection: "row", alignItems: "center", padding: 12 },
  avatar:   { width: 48, height: 48, borderRadius: 24 },
  name:     { fontSize: 16, marginLeft: 12, width: 140, height: 20 },
  subtitle: { fontSize: 12, marginLeft: 8,  width: 100, height: 16 },
});
// Skeleton renders three bones with the same dimensions as avatar, name, subtitle
```

--------------------------------

### Skeleton Animation Types

Source: https://context7.com/marcuzgabriel/react-native-reanimated-skeleton/llms.txt

Control the animation style of the skeleton bones using the `animationType` prop. Options include 'shiver' for a traveling gradient, 'pulse' for color fading, and 'none' for static bones.

```tsx
import Skeleton from "react-native-reanimated-skeleton";

// Shiver (default) — gradient sweeps across each bone
<Skeleton isLoading animationType="shiver" layout={[{ width: 200, height: 20, borderRadius: 4 }]} />
```

```tsx
import Skeleton from "react-native-reanimated-skeleton";

// Pulse — color fades in and out
<Skeleton
  isLoading
  animationType="pulse"
  boneColor="#D0D0D0"
  highlightColor="#F5F5F5"
  duration={800}
  layout={[{ width: 200, height: 20, borderRadius: 4 }]} 
/>
```

```tsx
import Skeleton from "react-native-reanimated-skeleton";

// None — static placeholder, no movement
<Skeleton
  isLoading
  animationType="none"
  boneColor="#CCCCCC"
  layout={[{ width: 200, height: 20, borderRadius: 4 }]} 
/>
```

--------------------------------

### Skeleton Animation Directions

Source: https://context7.com/marcuzgabriel/react-native-reanimated-skeleton/llms.txt

Specify the sweep direction for the 'shiver' animation using the `animationDirection` prop. Eight directions are available, including horizontal, vertical, and diagonal sweeps.

```tsx
import Skeleton from "react-native-reanimated-skeleton";

const BONE = [{ key: "b", width: 260, height: 140, borderRadius: 8 }];

// Horizontal left-to-right sweep
<Skeleton isLoading animationType="shiver" animationDirection="horizontalRight" layout={BONE} />
```

```tsx
import Skeleton from "react-native-reanimated-skeleton";

const BONE = [{ key: "b", width: 260, height: 140, borderRadius: 8 }];

// Vertical top-to-bottom sweep
<Skeleton isLoading animationType="shiver" animationDirection="verticalDown" layout={BONE} />
```

```tsx
import Skeleton from "react-native-reanimated-skeleton";

const BONE = [{ key: "b", width: 260, height: 140, borderRadius: 8 }];

// Diagonal sweep (bottom-right to top-left)
<Skeleton isLoading animationType="shiver" animationDirection="diagonalTopLeft" layout={BONE} />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.