React Templates & Themes Logo React Templates & Themes
React Native Shimmer screenshot

React Native Shimmer

Author Avatar Theme by Oblador
Updated: 5 Oct 2022
710 Stars

Simple shimmering effect for any view in React Native

Github

Categories

React native

Overview:

The react-native-shimmer is a library that provides a simple shimmering effect in React Native. It is based on Shimmer/shimmer-android, offering an easy way to incorporate shimmer animations into React Native applications.

Features:

  • Easy Installation: Provides multiple installation options including CocoaPods, react-native link, and manual setup for both iOS and Android.
  • Customizable Parameters: Allows customization of properties like animating, direction, duration, pauseDuration, animationOpacity, opacity, highlightLength, beginFadeDuration, endFadeDuration, tilt, and intensity.
  • Cross-Platform Compatibility: Supports both iOS and Android platforms for creating shimmer effects in React Native applications.

Installation:

Option 1: With CocoaPods

Add the following to your Podfile and run pod update:

$ react-native link react-native-shimmer

Option 3: Manually

iOS

  1. Add ios/RNShimmer.xcodeproj to Libraries.
  2. Add libRNShimmer.a to Link Binary With Libraries under Build Phases.
  3. Update MainApplication.java in android/app/src/main/java/… as specified.

Android

  1. Edit android/settings.gradle and android/app/build.gradle as specified.

Summary:

The react-native-shimmer library offers an efficient way to incorporate shimmer animations in React Native projects. With easy installation options and customizable parameters, developers can enhance their applications with subtle shimmering effects to provide a more dynamic user experience. The cross-platform compatibility ensures that developers can utilize this library for both iOS and Android platforms seamlessly.