AI generated image

10 React Native Features That Feel Like Hidden Superpowers

Not a Medium Member? “Read For Free”

1. Animated.Color

You probably know Animated.Value, which animates a number. Animated.Color does the same thing for a colour.

Code:

function hexToRgba(hex: string) {
  const channel = (start: number) => parseInt(hex.slice(start, start + 2), 16);
  return { r: channel(1), g: channel(3), b: channel(5), a: 1 };
}

export function AnimatedColorDemo() {
  const color = useRef(new Animated.Color(palette[0])).current;
  const index = useRef(0);

  const next = () => {
    index.current = (index.current + 1) % palette.length;
    Animated.timing(color, {
      toValue: hexToRgba(palette[index.current]),
      duration: 600,
      useNativeDriver: false,
    }).start();
  };

  return (
    <View style={styles.stack}>
      <Pressable onPress={next}>
        <Animated.View style={[styles.swatch, { backgroundColor: color }]} />
      </Pressable>
      <DemoButton title="Next" onPress={next} />
    </View>
  );
}

The old way was to animate a number from 0 to 1 and then map it to a list of colours. That works, but…