How to install react-native-shine-button on iOS?

You need to add entries to your Podfile, including use_frameworks! and pod 'WCLShineButton', then run pod update. The README provides version-specific steps, which can vary for RN61+ or older versions.

Can I use my own images with react-native-shine-button?

Yes, but you must manually copy image assets to Android drawable and iOS resources folders, as the library doesn't support React Native's image system directly. This bypasses standard asset management workflows.

React Native Shine Button vs Lottie for animations?

Shine Button is optimized for simple, performant shine effects with native performance, ideal for buttons. Lottie offers more complex, vector-based animations but can have higher JavaScript overhead and less native integration.

How to change the shine color in react-native-shine-button?

Use the color prop for the inactive state and fillColor for the active state, both accepting HEX color strings. Adjust the size prop to control dimensions, as shown in the usage examples.

Does react-native-shine-button work with Expo?

No, it requires native code configuration and linking, which isn't supported in Expo's managed workflow without ejecting. You'd need a bare React Native project or Expo eject to use it.

Why is pod install failing for this library?

Common issues include missing use_frameworks! in Podfile or pod repo updates. The README suggests running pod repo update before pod install, and notes that the iOS setup involves verifying Pods folder existence.

Open-Awesome

react-native-shine-button

Apache-2.0Javav2.0.0

A React Native button component with native shine animation effects for Android and iOS.

GitHub

352 stars36 forks0 contributors

What is react-native-shine-button?

React Native Shine Button is a React Native library that provides animated button components with shining visual effects. It solves the need for high-performance, visually appealing interactive elements in mobile applications by bridging native Android and iOS animation libraries. The component offers customizable shapes, colors, and smooth transitions between states.

Target Audience

React Native developers building mobile applications for Android and iOS who need polished, animated UI components with native performance. Particularly useful for developers creating social apps, rating systems, or any interface requiring engaging interactive elements.

Value Proposition

Developers choose this library because it delivers truly native animation performance by wrapping established native libraries rather than implementing animations in JavaScript. It provides consistent cross-platform behavior with minimal configuration and leverages battle-tested native implementations for reliability.

Overview

React Native: Native Shine Button - Effects like shining

Use Cases

Best For

Adding animated like/heart buttons in social media apps
Creating interactive rating systems with star animations
Building engaging toggle switches with visual feedback
Implementing mood selection interfaces with animated smiley buttons
Enhancing mobile game UIs with responsive button effects
Developing premium-feeling onboarding screens with animated interactions

Not Ideal For

Projects needing rapid prototyping without native code configuration
Apps that rely heavily on custom iconography integrated via React Native's asset system
Teams without access to or familiarity with iOS/Android native development tools

Pros & Cons

Pros

Native Animation Performance

Leverages mature Android and iOS libraries for smooth, jank-free animations that outperform JavaScript-based alternatives, as highlighted in the README's focus on native bridging.

Cross-Platform Consistency

Wraps established native implementations to ensure identical shine effects and behavior on both Android and iOS, providing a unified user experience.

Easy Visual Customization

Offers simple props for shapes, colors, and sizes, with built-in support for react-native-vector-icons, allowing quick styling changes without deep coding.

Interactive Controls

Includes onChange callbacks, disabled states, and default values, making it suitable for interactive UIs like rating systems or social buttons.

Cons

Cumbersome Setup

Requires manual edits to Podfile and build.gradle, with separate instructions for different React Native versions, increasing setup time and complexity.

Limited Custom Icon Support

Custom images must be manually copied to platform-specific asset folders, breaking from React Native's standard asset management and adding maintenance overhead.

Dependency on Native Libraries

Relies on specific forks or versions of native libraries, which may not receive frequent updates, potentially leading to compatibility issues with newer React Native versions.

Frequently Asked Questions

Related Projects

react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.

Stars17,917

Forks2,105

Last commit21 hours ago

lottie-react-native

Lottie wrapper for React Native.

Stars17,211

Forks1,801

Last commit5 days ago

react-native-maps

React Native Mapview component for iOS + Android

Material Design for React Native (Android & iOS)

Stars14,457

Forks2,244

Last commit16 hours ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub