### Start Metro Server for Example App (Yarn)

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/CONTRIBUTING.md

Starts the Metro bundler, which is required to run the example application. This command is executed from the project's root directory.

```sh
yarn example start
```

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

### Install CocoaPods Dependencies (Ruby)

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/example/README.md

Commands to manage native dependencies for iOS applications using CocoaPods. Run 'bundle install' once to install the bundler, and 'bundle exec pod install' to install project dependencies.

```ruby
bundle install

bundle exec pod install
```

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

### Build and Run iOS App (npm/Yarn)

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/example/README.md

Commands to build and run the React Native application on an iOS device or simulator. This includes installing CocoaPods dependencies.

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

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

### Start Metro Dev Server (npm/Yarn)

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/example/README.md

Commands to start the Metro bundler, which is essential for the React Native development workflow. This server bundles JavaScript code and serves it to the app during development.

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

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

### Run Example App on iOS (Yarn)

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/CONTRIBUTING.md

Builds and runs the example application on a connected iOS device or simulator. This command is executed from the project's root directory.

```sh
yarn example ios
```

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

### Run Example App on Android (Yarn)

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/CONTRIBUTING.md

Builds and runs the example application on an connected Android device or emulator. This command is run from the project's root directory.

```sh
yarn example android
```

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

### Build and Run Android App (npm/Yarn)

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/example/README.md

Commands to build and run the React Native application on an Android device or emulator. Requires Metro server to be running.

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

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

### Install Project Dependencies (Yarn)

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/CONTRIBUTING.md

Installs all necessary dependencies for the monorepo using Yarn workspaces. This command must be run in the root directory of the project. Note that npm is not supported for development.

```sh
yarn
```

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

### Full Example of AutoSkeletonView with Data Fetching

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/README.md

A comprehensive example showcasing the integration of AutoSkeletonView with asynchronous data fetching in a React Native component. It demonstrates how to manage loading states and conditionally render UI elements with and without skeleton loading.

```tsx
import { AutoSkeletonView } from 'react-native-auto-skeleton';
import React, { useState, useEffect } from 'react';
import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';

interface IProfile {
  name: string;
  jobTitle: string;
  avatar: string;
}

const getProfile = async (): Promise<IProfile> => {
  // Fetch profile data from your API
  // Placeholder for actual API call
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        name: 'John Doe',
        jobTitle: 'Software Engineer',
        avatar: 'https://via.placeholder.com/150'
      });
    }, 2000);
  });
};

const styles = StyleSheet.create({
  avatarWithName: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
    marginRight: 15
  },
  name: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 5
  },
  jobTitle: {
    fontSize: 16,
    color: '#666'
  },
  buttons: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 20
  },
  button: {
    backgroundColor: '#007bff',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5
  },
  buttonTitle: {
    color: '#fff',
    fontSize: 16
  }
});

export default function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [profile, setProfile] = useState<IProfile>({} as IProfile);

  useEffect(() => {
    (async () => {
      const res = await getProfile();
      setProfile(res);
      setIsLoading(false);
    })();
  }, []);

  return (
     <AutoSkeletonView isLoading={isLoading}>
      <View style={styles.avatarWithName}>
        <Image style={styles.avatar} source={{ uri: profile.avatar }} />
        <View style={{ flex: 1 }}>
          <Text style={styles.name}>{profile.name}</Text>
          <Text style={styles.jobTitle}>{profile.jobTitle}</Text>
        </View>
      </View>

      {/* This buttons block will have skeleton applied */}
      <View style={styles.buttons}>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonTitle}>Add</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonTitle}>Delete</Text>
        </TouchableOpacity>
      </View>

      {/* Alternatively, to exclude buttons from skeleton rendering: */}
      <AutoSkeletonIgnoreView>
        <View style={styles.buttons}>
           <TouchableOpacity style={styles.button}>
             <Text style={styles.buttonTitle}>Add</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.button}>
             <Text style={styles.buttonTitle}>Delete</Text>
           </TouchableOpacity>
        </View>
      </AutoSkeletonIgnoreView>
    </AutoSkeletonView>
  );
}

```

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

### Install React Native Auto Skeleton (npm/yarn)

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/README.md

Installs the react-native-auto-skeleton library using either npm or yarn package managers. This is the first step to integrating the skeleton loader into your React Native project.

```bash
npm install react-native-auto-skeleton
```

```bash
yarn add react-native-auto-skeleton
```

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

### Basic Usage of AutoSkeletonView in React Native

Source: https://context7.com/pioner92/react-native-auto-skeleton/llms.txt

Demonstrates the fundamental use of AutoSkeletonView to wrap a component and display a skeleton state while data is loading. This example shows how to conditionally render content based on a loading state.

```tsx
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { AutoSkeletonView } from 'react-native-auto-skeleton';

interface ArticleData {
  title: string;
  author: string;
  content: string;
}

const ArticleDetail = () => {
  const [loading, setLoading] = useState(true);
  const [article, setArticle] = useState<ArticleData | null>(null);

  useEffect(() => {
    // Simulate data fetching
    setTimeout(() => {
      setArticle({
        title: 'Example Article Title',
        author: 'Jane Doe',
        content: 'This is the content of the example article...'
      });
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <View style={styles.container}>
      <AutoSkeletonView isLoading={loading}>
        <View style={styles.articleContainer}>
          <Text style={styles.title}>{article?.title}</Text>
          <Text style={styles.author}>By {article?.author}</Text>
          <Text style={styles.content}>{article?.content}</Text>
        </View>
      </AutoSkeletonView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#FFFFFF',
  },
  articleContainer: {
    padding: 16,
    backgroundColor: '#FFFFFF',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  author: {
    fontSize: 16,
    color: '#666',
    marginBottom: 16,
  },
  content: {
    fontSize: 14,
    lineHeight: 22,
    color: '#333',
  },
  actionButton: {
    flex: 1,
    padding: 12,
    backgroundColor: '#F0F0F0',
    borderRadius: 8,
    alignItems: 'center',
  },
});

export default ArticleDetail;

```

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

### Implement AutoSkeletonView for Profile Loading (React Native)

Source: https://context7.com/pioner92/react-native-auto-skeleton/llms.txt

This example demonstrates how to use the AutoSkeletonView component to display shimmer-style placeholders while fetching profile data. It wraps the UI components and automatically applies the skeleton effect when the `isLoading` prop is true. Dependencies include React Native core components and the AutoSkeletonView from the library.

```tsx
import React, { useState, useEffect } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { AutoSkeletonView } from 'react-native-auto-skeleton';

interface Profile {
  name: string;
  jobTitle: string;
  avatar: string;
}

const ProfileScreen = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [profile, setProfile] = useState<Profile | null>(null);

  useEffect(() => {
    fetch('https://api.example.com/profile')
      .then(res => res.json())
      .then(data => {
        setProfile(data);
        setIsLoading(false);
      })
      .catch(error => {
        console.error('Failed to load profile:', error);
        setIsLoading(false);
      });
  }, []);

  return (
    <AutoSkeletonView
      isLoading={isLoading}
      shimmerSpeed={1.5}
      gradientColors={['#E0E0E0', '#F5F5F5']}
      defaultRadius={8}
      animationType="gradient"
    >
      <View style={styles.container}>
        <Image
          style={styles.avatar}
          source={{ uri: profile?.avatar }}
        />
        <View style={styles.info}>
          <Text style={styles.name}>{profile?.name}</Text>
          <Text style={styles.job}>{profile?.jobTitle}</Text>
        </View>
      </View>
    </AutoSkeletonView>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: 20,
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
  },
  info: {
    marginLeft: 16,
    flex: 1,
  },
  name: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  job: {
    fontSize: 16,
    color: '#666',
    marginTop: 4,
  },
});

export default ProfileScreen;

```

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

### Configure Expo Project for react-native-auto-skeleton

Source: https://context7.com/pioner92/react-native-auto-skeleton/llms.txt

This JSON snippet illustrates how to integrate the react-native-auto-skeleton library into an Expo project by adding a config plugin in the `app.json` or `package.json` file. It is followed by bash commands for installing the library within an Expo project, prebuilding native projects, and running development builds on iOS and Android.

```json
{
  "name": "my-expo-app",
  "version": "1.0.0",
  "expo": {
    "plugins": [
      "react-native-auto-skeleton"
    ]
  }
}

```

```bash
# Install in Expo project
npx expo install react-native-auto-skeleton

# Prebuild native projects
npx expo prebuild

# Run development build
npx expo run:ios
# or
npx expo run:android

```

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

### Configure AutoSkeletonView Props in React Native

Source: https://context7.com/pioner92/react-native-auto-skeleton/llms.txt

Demonstrates how to use the AutoSkeletonView component with different props to customize skeleton loading animations, including gradient, pulse, and static states. It showcases adjusting shimmer speed, colors, and radius for various visual effects. This example requires React Native and the react-native-auto-skeleton library.

```tsx
import React, { useState } from 'react';
import { View, Text, Switch, StyleSheet } from 'react-native';
import { AutoSkeletonView } from 'react-native-auto-skeleton';

type AnimationType = 'gradient' | 'pulse' | 'none';

const SkeletonConfigDemo = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [animationType, setAnimationType] = useState<AnimationType>('gradient');

  // Cycle through animation types
  const toggleAnimation = () => {
    setAnimationType(prev => {
      if (prev === 'gradient') return 'pulse';
      if (prev === 'pulse') return 'none';
      return 'gradient';
    });
  };

  return (
    <View style={styles.container}>
      <View style={styles.controls}>
        <Text>Loading: </Text>
        <Switch value={isLoading} onValueChange={setIsLoading} />
        <Text style={styles.label}>Animation: {animationType}</Text>
        <TouchableOpacity onPress={toggleAnimation} style={styles.toggle}>
          <Text>Toggle</Text>
        </TouchableOpacity>
      </View>

      {/* Example 1: Gradient animation (default) */}
      <AutoSkeletonView
        isLoading={isLoading}
        animationType="gradient"
        shimmerSpeed={1.0}
        gradientColors={['#D3D3D3', '#FFFFFF']}
        defaultRadius={4}
      >
        <View style={styles.card}>
          <View style={styles.box} />
          <Text style={styles.text}>Gradient Animation</Text>
        </View>
      </AutoSkeletonView>

      {/* Example 2: Pulse animation */}
      <AutoSkeletonView
        isLoading={isLoading}
        animationType="pulse"
        shimmerSpeed={0.8}
        shimmerBackgroundColor="#E8E8E8"
        defaultRadius={8}
      >
        <View style={styles.card}>
          <View style={styles.box} />
          <Text style={styles.text}>Pulse Animation</Text>
        </View>
      </AutoSkeletonView>

      {/* Example 3: No animation (static) */}
      <AutoSkeletonView
        isLoading={isLoading}
        animationType="none"
        shimmerBackgroundColor="#CCCCCC"
        defaultRadius={12}
      >
        <View style={styles.card}>
          <View style={styles.box} />
          <Text style={styles.text}>No Animation</Text>
        </View>
      </AutoSkeletonView>

      {/* Example 4: Fast shimmer with custom colors */}
      <AutoSkeletonView
        isLoading={isLoading}
        animationType="gradient"
        shimmerSpeed={0.5}
        gradientColors={['#FFE0E0', '#FFCCCC']}
        defaultRadius={16}
      >
        <View style={styles.card}>
          <View style={styles.box} />
          <Text style={styles.text}>Fast Custom Shimmer</Text>
        </View>
      </AutoSkeletonView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  controls: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
    gap: 8,
  },
  label: {
    fontSize: 14,
    marginLeft: 16,
  },
  toggle: {
    padding: 8,
    backgroundColor: '#E0E0E0',
    borderRadius: 4,
  },
  card: {
    padding: 16,
    backgroundColor: 'white',
    borderRadius: 8,
    marginBottom: 12,
    flexDirection: 'row',
    alignItems: 'center',
  },
  box: {
    width: 60,
    height: 60,
    backgroundColor: '#F0F0F0',
    borderRadius: 8,
    marginRight: 16,
  },
  text: {
    fontSize: 16,
    fontWeight: '500',
  },
});

export default SkeletonConfigDemo;

```

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

### Run Unit Tests with Jest (Yarn)

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/CONTRIBUTING.md

Executes the unit tests for the project using Jest. This command should be run from the root directory to verify code functionality.

```sh
yarn test
```

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

### Publish New Versions (Yarn)

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/CONTRIBUTING.md

Utilizes release-it to automate the process of publishing new versions of the library to npm. This includes version bumping, tag creation, and release generation. Run from the root directory.

```sh
yarn release
```

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

### Platform-Specific Skeleton Configuration in React Native

Source: https://context7.com/pioner92/react-native-auto-skeleton/llms.txt

Shows how to apply different skeleton configurations for iOS and Android platforms using `Platform.select`. This allows for tailored loading animations and styles based on the operating system.

```tsx
import React, { useState, useEffect } from 'react';
import { View, Text, Platform, StyleSheet } from 'react-native';
import { AutoSkeletonView } from 'react-native-auto-skeleton';

interface UserData {
  username: string;
  email: string;
  bio: string;
}

const UserProfile = () => {
  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState<UserData | null>(null);

  useEffect(() => {
    setTimeout(() => {
      setUser({
        username: 'johndoe',
        email: 'john@example.com',
        bio: 'Software developer',
      });
      setLoading(false);
    }, 2000);
  }, []);

  // Platform-specific skeleton configuration
  const skeletonConfig = Platform.select({
    ios: {
      shimmerSpeed: 1.0,
      gradientColors: ['#E8E8E8', '#F5F5F5'] as [string, string],
      defaultRadius: 8,
      animationType: 'gradient' as const,
    },
    android: {
      shimmerSpeed: 1.5,
      shimmerBackgroundColor: '#E0E0E0',
      // Note: Android doesn't auto-detect border-radius
      defaultRadius: 12,
      animationType: 'pulse' as const,
    },
    default: {
      shimmerSpeed: 1.0,
      shimmerBackgroundColor: '#CCCCCC',
      defaultRadius: 4,
      animationType: 'none' as const,
    },
  });

  return (
    <View style={styles.container}>
      <AutoSkeletonView
        isLoading={loading}
        {...skeletonConfig}
      >
        <View style={styles.profileCard}>
          <View style={styles.avatar} />
          <View style={styles.info}>
            <Text style={styles.username}>{user?.username}</Text>
            <Text style={styles.email}>{user?.email}</Text>
            <Text style={styles.bio}>{user?.bio}</Text>
          </View>
        </View>
      </AutoSkeletonView>

      {Platform.OS === 'android' && (
        <Text style={styles.note 저}>
          ⚠️ Android: Border radius set to {skeletonConfig.defaultRadius}px
        </Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  profileCard: {
    flexDirection: 'row',
    padding: 16,
    backgroundColor: 'white',
    borderRadius: 12,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
      },
      android: {
        elevation: 4,
      },
    }),
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: '#F0F0F0',
    marginRight: 16,
  },
  info: {
    flex: 1,
    justifyContent: 'center',
  },
  username: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  email: {
    fontSize: 14,
    color: '#666',
    marginBottom: 8,
  },
  bio: {
    fontSize: 14,
    color: '#999',
  },
  note: {
    marginTop: 16,
    fontSize: 12,
    color: '#FF9800',
    textAlign: 'center',
  },
});

export default UserProfile;

```

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

### Lint Code with ESLint (Yarn)

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/CONTRIBUTING.md

Runs ESLint to check for code style and potential errors. This command is executed from the root directory.

```sh
yarn lint
```

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

### Basic Usage of AutoSkeletonView in React Native

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/README.md

Demonstrates the basic usage of AutoSkeletonView and AutoSkeletonIgnoreView components. AutoSkeletonView wraps the content that should display the skeleton loader when isLoading is true. AutoSkeletonIgnoreView is used to exclude specific child views from the skeleton effect.

```tsx
import { AutoSkeletonView, AutoSkeletonIgnoreView } from 'react-native-auto-skeleton';
...

<AutoSkeletonView isLoading={isLoading}>
    ...YOUR VIEWS
  <AutoSkeletonIgnoreView> // Content that will be ignored by the skeleton
    ... Views without skeleton
  </AutoSkeletonIgnoreView>
</AutoSkeletonView>
```

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

### Fix Linting Errors with ESLint (Yarn)

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/CONTRIBUTING.md

Attempts to automatically fix code formatting and linting errors using ESLint. Run this command from the project's root directory.

```sh
yarn lint --fix
```

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

### TypeScript Type Checking (Yarn)

Source: https://github.com/pioner92/react-native-auto-skeleton/blob/main/CONTRIBUTING.md

Performs type checking on the project files using TypeScript. This command should be run from the root directory to ensure code quality.

```sh
yarn typecheck
```

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

### Complex Layout with Nested Skeletons in React Native

Source: https://context7.com/pioner92/react-native-auto-skeleton/llms.txt

This snippet demonstrates handling nested components and mixed skeleton/non-skeleton areas in a React Native article detail view. It utilizes `AutoSkeletonView` for content that should display a skeleton loader and `AutoSkeletonIgnoreView` for content that should always be visible, such as tags or action bars. The `isLoading` prop controls the skeleton's visibility, and various props like `shimmerSpeed` and `gradientColors` customize the skeleton's appearance. Dependencies include React, React Native core components, and `react-native-auto-skeleton`.

```tsx
import React, { useState, useEffect } from 'react';
import { View, Text, Image, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';
import { AutoSkeletonView, AutoSkeletonIgnoreView } from 'react-native-auto-skeleton';

interface Article {
  id: string;
  title: string;
  author: string;
  date: string;
  content: string;
  image: string;
  tags: string[];
}

const ArticleDetail = ({ articleId }: { articleId: string }) => {
  const [loading, setLoading] = useState(true);
  const [article, setArticle] = useState<Article | null>(null);

  useEffect(() => {
    const fetchArticle = async () => {
      setLoading(true);
      try {
        const response = await fetch(`https://api.example.com/articles/${articleId}`);
        if (!response.ok) throw new Error('Failed to fetch');
        const data = await response.json();
        setArticle(data);
      } catch (error) {
        console.error('Error loading article:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchArticle();
  }, [articleId]);

  return (
    <ScrollView style={styles.container}>
      <AutoSkeletonView
        isLoading={loading}
        shimmerSpeed={1.2}
        gradientColors={['#E8E8E8', '#F8F8F8']}
        defaultRadius={6}
        animationType="gradient"
      >
        {/* Hero image with skeleton */}
        <Image
          source={{ uri: article?.image }}
          style={styles.heroImage}
        />

        {/* Article header */}
        <View style={styles.header}>
          <Text style={styles.title}>{article?.title}</Text>
          <View style={styles.meta}>
            <Text style={styles.author}>By {article?.author}</Text>
            <Text style={styles.date}>{article?.date}</Text>
          </View>
        </View>

        {/* Tags - always visible, no skeleton */}
        <AutoSkeletonIgnoreView>
          <View style={styles.tags}>
            {article?.tags?.map(tag => (
              <View key={tag} style={styles.tag}>
                <Text style={styles.tagText}>{tag}</Text>
              </View>
            ))}
          </View>
        </AutoSkeletonIgnoreView>

        {/* Article content with skeleton */}
        <View style={styles.content}>
          <Text style={styles.body}>{article?.content}</Text>
        </View>

        {/* Related articles section */}
        <View style={styles.related}>
          <AutoSkeletonIgnoreView>
            <Text style={styles.sectionTitle}>Related Articles</Text>
          </AutoSkeletonIgnoreView>

          <View style={styles.relatedList}>
            {[1, 2, 3].map(index => (
              <View key={index} style={styles.relatedItem}>
                <View style={styles.relatedThumb} />
                <Text style={styles.relatedTitle}>Related Article {index}</Text>
              </View>
            ))}
          </View>
        </View>
      </AutoSkeletonView>

      {/* Bottom action bar - never shows skeleton */}
      <AutoSkeletonIgnoreView>
        <View style={styles.actionBar}>
          <TouchableOpacity style={styles.actionButton}>
            <Text>Share</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.actionButton}>
            <Text>Save</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.actionButton}>
            <Text>Comment</Text>
          </TouchableOpacity>
        </View>
      </AutoSkeletonIgnoreView>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  heroImage: {
    width: '100%',
    height: 250,
    backgroundColor: '#F0F0F0',
  },
  header: {
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 12,
  },
  meta: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  author: {
    fontSize: 14,
    color: '#666',
  },
  date: {
    fontSize: 14,
    color: '#999',
  },
  tags: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingHorizontal: 16,
    gap: 8,
    marginBottom: 16,
  },
  tag: {
    backgroundColor: '#E8F4F8',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 16,
  },
  tagText: {
    color: '#0066CC',
    fontSize: 12,
    fontWeight: '500',
  },
  content: {
    padding: 16,
  },
  body: {
    fontSize: 16,
    lineHeight: 24,
    color: '#333',
  },
  related: {
    marginTop: 24,
    padding: 16,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  relatedList: {
    gap: 12,
  },
  relatedItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 12,
    backgroundColor: '#F8F8F8',
    borderRadius: 8,
  },
  relatedThumb: {
    width: 60,
    height: 60,
    backgroundColor: '#E0E0E0',
    borderRadius: 6,
    marginRight: 12,
  },
  relatedTitle: {
    flex: 1,
    fontSize: 14,
    fontWeight: '500',
  },
  actionBar: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingVertical: 12,
    borderTopWidth: 1,
    borderTopColor: '#EEE',
  },
  actionButton: {
    padding: 10,
  }
});

export default ArticleDetail;

```

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

### Exclude Children from Skeleton Rendering with AutoSkeletonIgnoreView (React Native)

Source: https://context7.com/pioner92/react-native-auto-skeleton/llms.txt

Demonstrates how to use AutoSkeletonIgnoreView to wrap components that should not be skeletonized. This component ensures that its children remain visible and non-skeletonized even when placed within an AutoSkeletonView parent. It is particularly useful for persistently visible UI elements like action buttons or headers.

```tsx
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, FlatList } from 'react-native';
import { AutoSkeletonView, AutoSkeletonIgnoreView } from 'react-native-auto-skeleton';

interface ListItem {
  id: string;
  title: string;
  description: string;
}

const ContentList = () => {
  const [loading, setLoading] = useState(true);
  const [items, setItems] = useState<ListItem[]>([]);

  const loadData = async () => {
    setLoading(true);
    try {
      const response = await fetch('https://api.example.com/items');
      const data = await response.json();
      setItems(data);
    } catch (error) {
      console.error('Load failed:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={styles.container}>
      <AutoSkeletonView isLoading={loading} shimmerSpeed={1.2}>
        <FlatList
          data={items}
          keyExtractor={item => item.id}
          renderItem={({ item }) => (
            <View style={styles.item}>
              <Text style={styles.title}>{item.title}</Text>
              <Text style={styles.description}>{item.description}</Text>
            </View>
          )} />
      </AutoSkeletonView>

      {/* Action buttons always visible, never show skeleton */}
      <AutoSkeletonIgnoreView>
        <View style={styles.actions}>
          <TouchableOpacity
            style={styles.button}
            onPress={loadData}>
            <Text style={styles.buttonText}>Refresh</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.button, styles.secondaryButton]}
            onPress={() => console.log('Filter')}> 
            <Text style={styles.buttonText}>Filter</Text>
          </TouchableOpacity>
        </View>
      </AutoSkeletonIgnoreView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#E0E0E0',
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
  },
  description: {
    fontSize: 14,
    color: '#666',
    marginTop: 4,
  },
  actions: {
    flexDirection: 'row',
    padding: 16,
    gap: 12,
  },
  button: {
    flex: 1,
    backgroundColor: '#007AFF',
    padding: 12,
    borderRadius: 8,
    alignItems: 'center',
  },
  secondaryButton: {
    backgroundColor: '#666',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
});

export default ContentList;

```

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