ShinyText Component
ShinyText is a highly customizable React Native component that adds a beautiful, animated shimmer effect to your text. It's perfect for loading indicators, headlines, or any text that needs to grab the user's attention.
Features
- Smooth Animations: Built with
react-native-reanimatedfor high-performance, fluid animations. - Highly Customizable: Control the animation's speed, direction, colors, and more.
- Multiple Modes: Choose between a continuous "seamless" loop or a back-and-forth "ping-pong" effect.
- Dynamic Sizing: The shimmer effect intelligently adapts to the length of your text.
Installation
This component depends on @react-native-masked-view/masked-view and expo-linear-gradient. Make sure you have these packages installed in your project.
npm install @react-native-masked-view/masked-view expo-linear-gradientUsage
Here's a basic example of how to use the ShinyText component:
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { ShinyText } from './ShinyText';
export default function App() {
return (
<View style={styles.container}>
<ShinyText
style={styles.title}
duration={2000}
baseColor="#a1a1aa"
shimmerColor="#ffffff"
>
Loading...
</ShinyText>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000',
},
title: {
fontSize: 32,
fontWeight: 'bold',
},
});Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | Required | The text content to which the shimmer effect will be applied. |
as | 'text' | 'view' | 'text' | Renders the component as a <Text> or <View>. Use 'view' for non-text children or custom layouts. |
style | TextProps['style'] | ViewProps['style'] | undefined | Custom styles for the text or view. |
duration | number | 2000 | The duration of one full shimmer animation cycle in milliseconds. |
spread | number | 2 | A multiplier that adjusts the shimmer's travel distance based on the text length. A larger value creates a wider effect. |
baseColor | string | '#a1a1aa' | The color of the text when it is not shimmering. |
shimmerColor | string | '#ffffff' | The color of the shimmer highlight. |
runOnce | boolean | false | If true, the shimmer animation will run only once. |
Advanced Usage
Customizing the spread
The spread prop allows you to control how far the shimmer effect extends beyond the text. This is particularly useful for longer text where a wider shimmer can be more visually appealing.
<ShinyText
duration={3000}
spread={5} // Creates a very wide shimmer
style={{ fontSize: 24 }}
>
This is a very long text with a wide shimmer effect.
</ShinyText>Running the Animation Once
You can make the shimmer effect run only a single time by setting the runOnce prop to true. This is useful for introductory animations or one-time highlights.
<ShinyText runOnce={true}>
Welcome!
</ShinyText>Using as a View
You can also apply the shimmer effect to non-text components by setting the as prop to 'view'.
<ShinyText as="view" style={{ padding: 20, backgroundColor: '#333' }}>
<Ionicons name="sparkles" size={48} color="white" />
</ShinyText>