Componentschevron_rightTextShimmer

TextShimmer

A text component with a shimmering gradient overlay effect.

9:41

signal_cellular_altwifibattery_full

Generating...

Preview Controls

Animation

Opacity fades from 0 to 1

This is a CSS-based preview of the animation. The actual React Native component uses physics-based springs for a more natural feel.

Installation

Usage

Example.tsx

import { TextShimmer } from './components/TextShimmer';

export default function App() {
  return (
    <View style={{ backgroundColor: '#000', padding: 20 }}>
      <TextShimmer textStyle={{ fontSize: 24 }}>Shimmer Effect</TextShimmer>
    </View>
  );
}

Full Component Code

TextShimmer.tsx

1import React, { useEffect, useState } from 'react';
2import { View, StyleSheet } from 'react-native';
3import Svg, { Defs, LinearGradient, Text as SvgText, Stop, Mask, Rect } from 'react-native-svg';
4import Animated, { useSharedValue, useAnimatedProps, withRepeat, withTiming, Easing, interpolate } from 'react-native-reanimated';
5
6const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
7
8export const TextShimmer = ({ children, duration = 2000, baseColor = '#a1a1aa', highlightColor = '#ffffff', textStyle }) => {
9  const [layout, setLayout] = useState({ width: 0, height: 0 });
10  const progress = useSharedValue(0);
11
12  useEffect(() => {
13    progress.value = withRepeat(withTiming(1, { duration, easing: Easing.linear }), -1);
14  }, []);
15
16  const animatedProps = useAnimatedProps(() => {
17    const startX = interpolate(progress.value, [0, 1], [-layout.width, layout.width]);
18    return { x1: startX, x2: startX + layout.width };
19  });
20
21  if (layout.width === 0) {
22    return <View onLayout={(e) => setLayout(e.nativeEvent.layout)} opacity={0}><Svg><SvgText>{children}</SvgText></Svg></View>;
23  }
24
25  return (
26    <View>
27      <Svg width={layout.width} height={layout.height}>
28        <Defs>
29          <Mask id="mask"><SvgText fill="white" alignmentBaseline="middle" x="0" y="50%">{children}</SvgText></Mask>
30          <AnimatedLinearGradient id="grad" y1="0" y2="0" animatedProps={animatedProps} gradientUnits="userSpaceOnUse">
31             <Stop offset="0" stopColor={baseColor} />
32             <Stop offset="0.5" stopColor={highlightColor} />
33             <Stop offset="1" stopColor={baseColor} />
34          </AnimatedLinearGradient>
35        </Defs>
36        <Rect width="100%" height="100%" fill="url(#grad)" mask="url(#mask)" />
37      </Svg>
38    </View>
39  );
40};

Props

Name	Type	Default	Description
children	string	-	Text content
duration	number	2000	Animation duration (ms)
baseColor	string	#a1a1aa	Base text color
highlightColor	string	#ffffff	Shimmer highlight color
textStyle	StyleProp<TextStyle>	-	Text styles

arrow_backSwipeableRow

TextScramblearrow_forward