redash reanimated color interpolation spring loop

redash-example.tsx

import { useNavigation } from '@react-navigation/native';
import React from 'react';
import Animated, { Easing, set, useCode } from 'react-native-reanimated';
import { interpolateColor, loop, useValues } from 'react-native-redash';
import { scale } from 'react-native-size-matters';
import { Container, Touchable } from '../../components';
import { COLORS } from '../../utils';

const Line: React.FC<{ color: Animated.Node<number> }> = ({ color }) => (
  <Animated.View
    style={{ backgroundColor: color, height: scale(2), width: scale(18) }}
  />
);

// TODO: get rid of this

export const DrawerButton: React.FC<{}> = () => {
  const [animation] = useValues([0], []);
  useCode(
    set(
      animation,
      loop({
        duration: 15000,
        easing: Easing.linear,
        autoStart: true,
        boomerang: true,
      }),
    ),
    [animation],
  );

  const interpolate = (colors: string[]) =>
    interpolateColor(animation, {
      inputRange: [0, 0.5, 1],
      outputRange: colors,
    });
  const color1 = interpolate(['#ffa229', '#e8716d', '#46d0e4']);
  const color2 = interpolate(['#46d0e4', '#ffa229', '#e8716d']);
  const color3 = interpolate(['#e8716d', '#46d0e4', '#ffa229']);

  const navigation = useNavigation();
  return (
    <Touchable onPress={navigation.toggleDrawer}>
      <Container
        justify="center"
        items="center"
        height={36}
        width={36}
        bgColor={COLORS.primary}
        borderRadius={8}>
        {/* {notificationCount && notificationCount > 0 ? (
          <View style={styles.badge}>
            <Text style={styles.badgeCount}>
              {notificationCount < 10 ? notificationCount : '9+'}
            </Text>
          </View>
        ) : null} */}
        <Line color={color1} />
        <Container height={5} />
        <Line color={color2} />
        <Container height={5} />
        <Line color={color3} />
      </Container>
    </Touchable>
  );
};