React Native Shimmer

screenshot of React Native Shimmer
react
react-native

Simple shimmering effect for any view in 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.

Option 1: With CocoaPods

Add the following to your Podfile and run pod update:

Option 2: With react-native link

$ 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.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

react-native
React Native

React Native is a framework for building mobile applications using React and JavaScript. It enables developers to write once and deploy to multiple platforms, including iOS, Android, and the web, while providing a native app-like experience to users.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.