DOCSEARCHbyAlgolia
Submit Docs

react-native-shimmer

repository·master·Indexed 20 days ago

https://github.com/oblador/react-native-shimmer

A React Native library that provides a simple shimmering effect for applications, based on Facebook's Shimmer implementations for iOS and Android. It allows developers to wrap a single child component with the Shimmer component to create skeleton screens, with customizable properties for animation direction, duration, opacity, and platform-specific settings for iOS and Android.

Tokens
1.5K
Snippets
7
Records
8
Agent score
69%

What's inside react-native-shimmer

  2. Install react-native-shimmer for React Native <= 0.59 (Android)

    master

    For manual Android installation on older React Native versions:

    1. Edit android/settings.gradle:
    rootProject.name = 'MyApp'
include ':app'
include ':react-native-shimmer'
project(':react-native-shimmer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-shimmer/android')
    1. Edit android/app/build.gradle: Add the project to your dependencies:
    dependencies {
  compile fileTree(dir: 'libs', include: ['*.jar'])
  compile "com.android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+"
  compile project(':react-native-shimmer')
}
    1. Edit MainApplication.java: Import the package and add it to the list of React packages:
    import com.oblador.shimmer.RNShimmerPackage;

// ... inside getPackages()
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new RNShimmerPackage()
  );
}
    import com.oblador.shimmer.RNShimmerPackage;

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new RNShimmerPackage()
  );
}

  3. Install react-native-shimmer for React Native <= 0.59

    master

    If you are using an older version of React Native (<= 0.59), follow these steps:

    Using CocoaPods (iOS)

    Add the following to your Podfile and run pod update:

    pod 'react-native-shimmer', :path => 'node_modules/react-native-shimmer'

    Using react-native link

    Run the following command:

    $ react-native link react-native-shimmer

    Manual Installation (iOS)

    1. Add ios/RNShimmer.xcodeproj to Libraries.
    2. Add libRNShimmer.a to Link Binary With Libraries under Build Phases.

  5. Configure Metro transformer options

    master

    The metro.config.js file defines how the Metro bundler transforms files. In this project's example configuration, the transformer.getTransformOptions function is used to set specific transformation behaviors:

    • experimentalImportSupport: Set to false.
    • inlineRequires: Set to true, which enables inline requires to improve startup performance by delaying the execution of modules until they are actually needed.
    module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

  6. Shimmer component properties

    master

    The Shimmer component accepts the following props:

    PropDescriptionDefault
    animatingWhether or not to show shimmering effect.true
    directionThe direction of shimmering animation (up, down, left, right).right
    durationThe shimmering animation duration in milliseconds.1000
    pauseDurationThe time interval between shimmerings in milliseconds.400
    animationOpacityThe opacity of the content while it is shimmering.1
    opacityThe opacity of the content before it is shimmering.0.5
    highlightLengthThe highlight length of shimmering (Range 0–1). iOS only1
    beginFadeDurationThe duration of the fade used when shimmer begins. iOS only0
    endFadeDurationThe duration of the fade used when shimmer ends. iOS only0
    tiltThe tilt angle of the highlight, in degrees. Android only0
    intensityThe intensity of the highlight mask (Range 0–1). Android only0

  7. Use the Shimmer component

    master

    The Shimmer component provides a shimmering animation effect used for skeleton screens in React Native. It wraps a native component RNShimmeringView. You can control the animation direction, opacity, speed, and visual intensity via props.

    import Shimmer from 'react-native-shimmer';

// Basic usage
<Shimmer style={{ width: 200, height: 20 }} />

// Advanced usage with custom properties
<Shimmer
  style={{ width: 200, height: 20 }}
  animating={true}
  direction="left"
  duration={1500}
  opacity={0.6}
  tilt={15}
/>

  8. Configure Shimmer properties

    master

    The Shimmer component accepts the following props to customize the animation effect:

    {
  animating: boolean (default: true),
  direction: 'up' | 'down' | 'left' | 'right' (default: undefined),
  duration: number (default: 1000),
  pauseDuration: number (default: 400),
  animationOpacity: number (default: 1),
  opacity: number (default: 0.5),
  tilt: number (default: 0),
  intensity: number,
  highlightLength: number,
  beginFadeDuration: number (default: 0),
  endFadeDuration: number (default: 0),
}