react-native-reanimated-skeleton

In Custom Layout mode, you provide a layout prop to the Skeleton component. This prop is an array of objects where each object specifies the dimensions and styling for a specific bone. It is highly recommended to provide a unique key for each object in the layout array. This mode is useful when you want the skeleton to look different from the actual content being loaded.

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

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>
  );
}

In Child Layout mode, the Skeleton component automatically determines the dimensions and positions of the skeleton bones based on the dimensions of its direct children. You simply wrap your content inside the Skeleton component and toggle the isLoading prop.

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

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

Because react-native-linear-gradient is not supported in Expo, you must use a postinstall script to transform the library's imports to use expo-linear-gradient.

1. Obtain the required script from the official repository scripts folder.
2. Add the postinstall script to your package.json.
3. Run npm install and restart your app.

The script performs the following transformation: import LinearGradient from 'react-native-linear-gradient'; $\rightarrow$ import { LinearGradient } from 'expo-linear-gradient';

Install the package using npm:

npm install react-native-reanimated-skeleton

The project uses a flat configuration file (eslint.config.mjs) based on typescript-eslint. It integrates several plugins including React, React Native, Jest, Prettier, and the React Compiler.

Key configuration features include:

• TypeScript Support: Uses recommendedTypeChecked, strict, and stylistic configurations.
• React Native: Uses eslint-plugin-react-native (wrapped with fixupPluginRules for ESLint 9 compatibility).
• React Hooks: Enforces rules-of-hooks and exhaustive-deps.
• Prettier: Integrated via eslint-plugin-prettier to treat formatting issues as ESLint errors.
• React Compiler: Includes the react-compiler/react-compiler rule set to an error level.

The Metro configuration for the @rnrs/app package uses @rnx-kit/metro-config to define transformation options. Specifically, it disables experimentalImportSupport and inlineRequires within the getTransformOptions transformer setting. This configuration is used to manage how files are transformed during the bundling process in the React Native environment.

const { makeMetroConfig } = require('@rnx-kit/metro-config');

module.exports = makeMetroConfig({
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
});

The Skeleton component renders a placeholder layout (bones) while content is loading. When isLoading is true, it displays animated shapes based on the provided layout prop. When isLoading is false, it renders the children component. If hasFadeIn is enabled, the children will fade in smoothly using a 250ms duration.

import Skeleton from 'react-native-reanimated-skeleton';

<Skeleton
  isLoading={loading}
  layout={[
    { width: 100, height: 20, borderRadius: 4 },
    { width: 200, height: 100, borderRadius: 8 }
  ]}
  hasFadeIn={true}
>
  <MyActualContent />
</Skeleton>

The following directories and file patterns are excluded from ESLint linting:

• utils/**
• .yarn/**
• **/.ondevice/**
• **/node_modules/**
• **/packages/app/ios/**
• **/packages/app/android/**
• **/packages/expo/android/**
• **/packages/expo/ios/**
• **/__mocks__/**
• **/*.mjs
• **/*.js