react-native-ease/example/src/demos/TextColorDemo.tsx at 6c8264045a546b2baf472605b695e98b8d6e5a21 · AppAndFlow/react-native-ease · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import { useState } from 'react';
import { StyleSheet } from 'react-native';
import { EaseText } from 'react-native-ease';

import { Section } from '../components/Section';
import { Button } from '../components/Button';

export function TextColorDemo() {
  const [focused, setFocused] = useState(false);

  return (
    <Section title="Text Color">
      <EaseText
        interpolateColor={focused ? '#e94560' : '#8892b0'}
        transition={{ type: 'timing', duration: 300 }}
        style={styles.label}
      >
        Smooth color transition (300ms)
      </EaseText>

      <EaseText
        interpolateColor={focused ? '#e94560' : '#8892b0'}
        animate={{ scale: focused ? 1.05 : 1 }}
        transition={{ type: 'spring', damping: 15, stiffness: 120 }}
        style={styles.heading}
      >
        Color + Scale
      </EaseText>

      <EaseText
        interpolateColor={focused ? '#e94560' : '#8892b0'}
        animate={{
          opacity: focused ? 1 : 0.5,
          translateX: focused ? 10 : 0,
        }}
        transition={{ type: 'timing', duration: 400 }}
        style={styles.subtitle}
      >
        Color + Opacity + TranslateX
      </EaseText>

      <EaseText
        style={[
          styles.instant,
          focused ? styles.instantActive : styles.instantIdle,
        ]}
      >
        Instant color (style.color, zero JS cost)
      </EaseText>

      <Button
        label={focused ? 'Blur' : 'Focus'}
        onPress={() => setFocused((v) => !v)}
      />
    </Section>
  );
}

const styles = StyleSheet.create({
  label: {
    fontSize: 16,
    marginBottom: 16,
  },
  heading: {
    fontSize: 28,
    fontWeight: '700',
    marginBottom: 16,
  },
  subtitle: {
    fontSize: 14,
    marginBottom: 16,
  },
  instant: {
    fontSize: 14,
    marginBottom: 24,
  },
  instantIdle: {
    color: '#8892b0',
  },
  instantActive: {
    color: '#e94560',
  },
});