react-native-auto-skeleton

The library uses a hierarchical approach to skeleton rendering. AutoSkeletonView acts as a controller for a UI subtree. It scans its children to create matching placeholders.

To create a mixed UI where some elements are loading and others are interactive/visible, use AutoSkeletonIgnoreView inside an AutoSkeletonView. The AutoSkeletonIgnoreView acts as a 'hole' in the skeleton layer, preventing the library from processing its children as skeleton targets.

If you need to perform a full reload to reset the app state, use the following platform-specific commands:

• Android: Press the <kbd>R</kbd> key twice, or open the Dev Menu via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS) and select "Reload".
• iOS: Press <kbd>R</kbd> in the iOS Simulator.

Before building the app, you must start Metro, the JavaScript build tool for React Native. Run the following command from the root of your project:

# Using npm
npm start

# OR using Yarn
yarn start

With Metro running, open a new terminal window and run the command for your preferred package manager to launch the app on an Android Emulator or connected device.

# Using npm
npm run android

# OR using Yarn
yarn android

For iOS, you must first install CocoaPods dependencies. If this is your first time or you have updated native dependencies, run bundle install and then bundle exec pod install. Once dependencies are installed, run the following to launch the app on an iOS Simulator or connected device:

# Install CocoaPods dependencies
bundle install
bundle exec pod install

# Run the app
# Using npm
npm run ios

# OR using Yarn
yarn ios

Install the library using npm or yarn. This library supports both Old Architecture and Fabric on iOS and Android. It also works in Expo using expo prebuild without additional configuration.

# Using npm
npm install react-native-auto-skeleton

# Using yarn
yarn add react-native-auto-skeleton

To use react-native-auto-skeleton in an Expo project that requires native module configuration, you can use the withAutoSkeleton config plugin. This plugin is designed to be used within your app.json or app.config.js file under the plugins array to ensure the native side of the library is correctly configured during the prebuild process.

{
  "expo": {
    "plugins": [
      "react-native-auto-skeleton"
    ]
  }
}

If you want certain parts of your UI to remain visible (not replaced by a skeleton) even when isLoading is true, wrap those specific components in AutoSkeletonIgnoreView. This is useful for elements like buttons or navigation items that should not be obscured by the loading state.

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

<AutoSkeletonView isLoading={isLoading}>
  {/* This part will show a skeleton */}
  <View style={styles.content} />

  {/* This part will remain visible even during loading */}
  <AutoSkeletonIgnoreView>
    <TouchableOpacity style={styles.button}>
      <Text>Click Me</Text>
    </TouchableOpacity>
  </AutoSkeletonIgnoreView>
</AutoSkeletonView>

Wrap your UI components with AutoSkeletonView to automatically generate shimmer-style loading placeholders based on your existing layout. When isLoading is true, the library renders skeletons over the children. When false, the actual content is shown.

import { AutoSkeletonView } from 'react-native-auto-skeleton';

// ... inside your component
<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>

  <View style={styles.buttons}>
    <TouchableOpacity style={styles.button}>
      <Text style={styles.buttonTitle}>Add</Text>
    </TouchableOpacity>
  </View>
</AutoSkeletonView>

The AutoSkeletonView component accepts several props to customize the loading appearance and behavior:

The react-native.config.js file provides specific configuration for the Android platform to ensure the React Native CLI can locate the generated JNI files. This is necessary for the library's native C++ components to build correctly via CMake.

If you are integrating this library into a project and encounter build issues related to codegen or JNI, ensure the cmakeListsPath is correctly pointed to build/generated/source/codegen/jni/CMakeLists.txt within the Android platform configuration.

module.exports = {
  dependency: {
    platforms: {
      android: {
        cmakeListsPath: 'build/generated/source/codegen/jni/CMakeLists.txt',
      },
      ios: {},
    },
  },
};

The AutoSkeletonView component is a wrapper that automatically applies skeleton loading effects to its children. When isLoading is set to true, skeleton placeholders are rendered over the eligible views within the component. It supports different animation types like gradient and pulse.

import { AutoSkeletonView } from 'react-native-auto-skeleton';

<AutoSkeletonView 
  isLoading={true} 
  animationType="gradient"
>
  <YourContentComponent />
</AutoSkeletonView>