0
# Animated Components
1

2
React components optimized for displaying animated values and dynamic content with React Native Reanimated.
3

4
```typescript
5
import type { TextInputProps, TextProps as RNTextProps } from "react-native";
6
```
7

8
## Capabilities
9

10
### ReText Component
11

12
An animated text component that can display SharedValue strings with smooth updates on the UI thread.
13

14
```typescript { .api }
15
/**
16
 * Props for ReText component
17
 */
18
interface TextProps extends Omit<TextInputProps, "value" | "style"> {
19
  /** SharedValue containing the text to display */
20
  text: Animated.SharedValue<string>;
21
  /** Animated style props */
22
  style?: Animated.AnimateProps<RNTextProps>["style"];
23
}
24

25
/**
26
 * Animated text component for displaying SharedValue strings
27
 * @param props - Component props
28
 * @returns React element displaying animated text
29
 */
30
function ReText(props: TextProps): React.ReactElement;
31
```
32

33
**Basic Usage:**
34

35
```typescript
36
import React from "react";
37
import { ReText } from "react-native-redash";
38
import { useSharedValue } from "react-native-reanimated";
39

40
export const BasicReText = () => {
41
  const text = useSharedValue("Hello World");
42
  
43
  // Update text programmatically
44
  const updateText = () => {
45
    text.value = `Updated at ${Date.now()}`;
46
  };
47
  
48
  return (
49
    <View>
50
      <ReText 
51
        text={text} 
52
        style={{ fontSize: 20, color: 'blue' }}
53
      />
54
      <Button title="Update" onPress={updateText} />
55
    </View>
56
  );
57
};
58
```
59

60
### Dynamic Counter Example
61

62
```typescript
63
import React, { useEffect } from "react";
64
import { View, StyleSheet } from "react-native";
65
import { ReText } from "react-native-redash";
66
import { 
67
  useSharedValue, 
68
  useDerivedValue,
69
  withRepeat,
70
  withTiming
71
} from "react-native-reanimated";
72

73
export const AnimatedCounter = () => {
74
  const count = useSharedValue(0);
75
  
76
  // Automatically increment counter
77
  useEffect(() => {
78
    count.value = withRepeat(
79
      withTiming(100, { duration: 5000 }),
80
      -1,
81
      false
82
    );
83
  }, []);
84
  
85
  // Format the counter value
86
  const formattedText = useDerivedValue(() => {
87
    return `Count: ${Math.floor(count.value)}`;
88
  });
89
  
90
  return (
91
    <View style={styles.container}>
92
      <ReText 
93
        text={formattedText}
94
        style={styles.counterText}
95
      />
96
    </View>
97
  );
98
};
99

100
const styles = StyleSheet.create({
101
  container: {
102
    flex: 1,
103
    justifyContent: 'center',
104
    alignItems: 'center'
105
  },
106
  counterText: {
107
    fontSize: 24,
108
    fontWeight: 'bold',
109
    color: '#333'
110
  }
111
});
112
```
113

114
### Real-time Data Display
115

116
```typescript
117
import React from "react";
118
import { View } from "react-native";
119
import { ReText } from "react-native-redash";
120
import { 
121
  useSharedValue, 
122
  useDerivedValue,
123
  useAnimatedGestureHandler
124
} from "react-native-reanimated";
125
import { PanGestureHandler } from "react-native-gesture-handler";
126

127
export const GestureInfo = () => {
128
  const gestureX = useSharedValue(0);
129
  const gestureY = useSharedValue(0);
130
  const velocity = useSharedValue(0);
131
  
132
  // Format gesture information
133
  const gestureText = useDerivedValue(() => {
134
    return `Position: (${gestureX.value.toFixed(1)}, ${gestureY.value.toFixed(1)})`;
135
  });
136
  
137
  const velocityText = useDerivedValue(() => {
138
    return `Velocity: ${velocity.value.toFixed(2)} px/s`;
139
  });
140
  
141
  const gestureHandler = useAnimatedGestureHandler({
142
    onActive: (event) => {
143
      gestureX.value = event.translationX;
144
      gestureY.value = event.translationY;
145
      velocity.value = Math.sqrt(
146
        event.velocityX ** 2 + event.velocityY ** 2
147
      );
148
    }
149
  });
150
  
151
  return (
152
    <View style={{ padding: 20 }}>
153
      <ReText 
154
        text={gestureText}
155
        style={{ fontSize: 16, marginBottom: 10 }}
156
      />
157
      <ReText 
158
        text={velocityText}
159
        style={{ fontSize: 16, marginBottom: 20 }}
160
      />
161
      
162
      <PanGestureHandler onGestureEvent={gestureHandler}>
163
        <Animated.View 
164
          style={{
165
            width: 200,
166
            height: 200,
167
            backgroundColor: 'lightblue',
168
            justifyContent: 'center',
169
            alignItems: 'center'
170
          }}
171
        >
172
          <Text>Drag me!</Text>
173
        </Animated.View>
174
      </PanGestureHandler>
175
    </View>
176
  );
177
};
178
```
179

180
### Formatted Number Display
181

182
```typescript
183
import React, { useEffect } from "react";
184
import { ReText } from "react-native-redash";
185
import { 
186
  useSharedValue, 
187
  useDerivedValue,
188
  withSpring
189
} from "react-native-reanimated";
190

191
export const FormattedNumbers = () => {
192
  const price = useSharedValue(1234.56);
193
  const percentage = useSharedValue(0.75);
194
  
195
  // Format as currency
196
  const priceText = useDerivedValue(() => {
197
    return `$${price.value.toFixed(2)}`;
198
  });
199
  
200
  // Format as percentage
201
  const percentText = useDerivedValue(() => {
202
    return `${(percentage.value * 100).toFixed(1)}%`;
203
  });
204
  
205
  // Format with thousand separators
206
  const formattedNumber = useDerivedValue(() => {
207
    return price.value.toLocaleString('en-US', {
208
      style: 'currency',
209
      currency: 'USD'
210
    });
211
  });
212
  
213
  useEffect(() => {
214
    // Animate values
215
    price.value = withSpring(9876.54);
216
    percentage.value = withSpring(0.95);
217
  }, []);
218
  
219
  return (
220
    <View style={{ padding: 20 }}>
221
      <ReText text={priceText} style={{ fontSize: 18, marginBottom: 10 }} />
222
      <ReText text={percentText} style={{ fontSize: 18, marginBottom: 10 }} />
223
      <ReText text={formattedNumber} style={{ fontSize: 18 }} />
224
    </View>
225
  );
226
};
227
```
228

229
### Performance Dashboard
230

231
```typescript
232
import React, { useEffect } from "react";
233
import { View, StyleSheet } from "react-native";
234
import { ReText } from "react-native-redash";
235
import { 
236
  useSharedValue, 
237
  useDerivedValue,
238
  withRepeat,
239
  withSequence,
240
  withTiming
241
} from "react-native-reanimated";
242

243
export const PerformanceDashboard = () => {
244
  const fps = useSharedValue(60);
245
  const memory = useSharedValue(45.2);
246
  const cpu = useSharedValue(23.5);
247
  
248
  // Simulate fluctuating values
249
  useEffect(() => {
250
    fps.value = withRepeat(
251
      withSequence(
252
        withTiming(58, { duration: 1000 }),
253
        withTiming(60, { duration: 800 }),
254
        withTiming(59, { duration: 1200 })
255
      ),
256
      -1
257
    );
258
    
259
    memory.value = withRepeat(
260
      withSequence(
261
        withTiming(52.1, { duration: 2000 }),
262
        withTiming(48.7, { duration: 1500 }),
263
        withTiming(45.2, { duration: 1800 })
264
      ),
265
      -1
266
    );
267
    
268
    cpu.value = withRepeat(
269
      withSequence(
270
        withTiming(35.2, { duration: 1200 }),
271
        withTiming(18.9, { duration: 900 }),
272
        withTiming(23.5, { duration: 1400 })
273
      ),
274
      -1
275
    );
276
  }, []);
277
  
278
  const fpsText = useDerivedValue(() => {
279
    return `FPS: ${fps.value.toFixed(0)}`;
280
  });
281
  
282
  const memoryText = useDerivedValue(() => {
283
    return `Memory: ${memory.value.toFixed(1)} MB`;
284
  });
285
  
286
  const cpuText = useDerivedValue(() => {
287
    return `CPU: ${cpu.value.toFixed(1)}%`;
288
  });
289
  
290
  return (
291
    <View style={styles.dashboard}>
292
      <View style={styles.metric}>
293
        <ReText text={fpsText} style={styles.metricText} />
294
      </View>
295
      <View style={styles.metric}>
296
        <ReText text={memoryText} style={styles.metricText} />
297
      </View>
298
      <View style={styles.metric}>
299
        <ReText text={cpuText} style={styles.metricText} />
300
      </View>
301
    </View>
302
  );
303
};
304

305
const styles = StyleSheet.create({
306
  dashboard: {
307
    flexDirection: 'row',
308
    justifyContent: 'space-around',
309
    padding: 20,
310
    backgroundColor: '#f5f5f5'
311
  },
312
  metric: {
313
    backgroundColor: 'white',
314
    padding: 15,
315
    borderRadius: 8,
316
    shadowColor: '#000',
317
    shadowOffset: { width: 0, height: 2 },
318
    shadowOpacity: 0.1,
319
    shadowRadius: 4,
320
    elevation: 3
321
  },
322
  metricText: {
323
    fontSize: 16,
324
    fontWeight: '600',
325
    textAlign: 'center'
326
  }
327
});
328
```
329

330
**Key Features:**
331

332
- **UI Thread Performance**: Updates happen on the UI thread without bridging
333
- **Flexible Styling**: Accepts all standard text styling props
334
- **SharedValue Integration**: Seamlessly works with Reanimated SharedValues
335
- **Automatic Updates**: Text updates automatically when SharedValue changes
336
- **Format Freedom**: Use `useDerivedValue` to format text however needed
337

338
**Important Notes:**
339

340
- ReText is based on `TextInput` to enable UI thread text updates
341
- The component is non-editable by default (`editable={false}`)
342
- It's optimized for displaying dynamic text content, not for user input
343
- For complex formatting, use `useDerivedValue` to compute the display string