How to use the react-native-redash.interpolateColor function in react-native-redash

To help you get started, we’ve selected a few react-native-redash examples, based on popular ways it is used in public projects.

github wcandillon / can-it-be-done-in-react-native / season2 / bbc-iplayer / components / ChannelIcon.tsx View on Github external
index,
  currentIndex
}: ChannelIconProps) => {
  const clock = new Clock();
  const value = new Value(0);
  useCode(
    block([
      cond(and(not(isActive), approximates(index, currentIndex)), [
        set(value, runSpring(clock, 0, 1)),
        cond(not(clockRunning(clock)), set(isActive, 0))
      ]),
      cond(isActive, [stopClock(clock), set(value, 0)])
    ]),
    []
  );
  const backgroundColor = interpolateColor(
    value,
    {
      inputRange: [0, 1],
      outputRange: [nonActiveColor, activeColor]
    },
    "rgb"
  );
  return (
    <View
      style={{
        width: radius * 2,
        height: radius * 2,
        justifyContent: "center",
        alignItems: "center"
      }}
    >
github nazarireza / Emoji-Feedback / App.js View on Github external
render() {
    let color = interpolateColor(
      this._translateX,
      {
        inputRange: [
          0,
          2 * THUMB_EMOJI_WIDTH + 2 * EMOJI_PADDING,
          4 * THUMB_EMOJI_WIDTH + 4 * EMOJI_PADDING
        ],
        outputRange: [
          { r: 253, g: 161, b: 143 },
          { r: 255, g: 220, b: 140 },
          { r: 255, g: 220, b: 140 }
        ],
        extrapolate: Extrapolate.CLAMP
      },
      'rgb'
    );
github wcandillon / can-it-be-done-in-react-native / season3 / src / Things / Search.tsx View on Github external
export default memo(({ translateY }: SearchProps) => {
  const chevronTranslateY = translateY;
  const searchTranslateY = clamp(chevronTranslateY, 0, THRESHOLD);
  const backgroundColor = interpolateColor(translateY, {
    inputRange: [CONTAINER_HEIGHT, THRESHOLD],
    outputRange: [grey, primary]
  }) as Animated.Node<number>;
  const opacity = interpolate(translateY, {
    inputRange: [CONTAINER_HEIGHT, THRESHOLD],
    outputRange: [1, 0],
    extrapolate: Extrapolate.CLAMP
  });
  const oppositeOpacity = sub(1, opacity);
  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.search,
          {
            backgroundColor,
github nazarireza / Emoji-Feedback / App.js View on Github external
const EmojiPlaceholder = ({ d: { eye1, eye2, lip }, scale, text, onPress }) => {
  let bottom = interpolate(scale, {
    inputRange: [0, 1],
    outputRange: [115, 90],
    extrapolate: Extrapolate.Clamp
  });

  let color = interpolateColor(
    scale,
    {
      inputRange: [0, 1],
      outputRange: [{ r: 52, g: 58, b: 67 }, { r: 183, g: 185, b: 191 }],
      extrapolate: Extrapolate.Clamp
    },
    'rgb'
  );

  return (
    <View>
      <Animated.View
        style={[styles.emojiContainer, { transform: [{ scale }] }]}
      >
        <TouchableOpacity
          activeOpacity={1}