v2 How does one use color interpolation and withTiming hook

Description

I am using Android Studio’s adb to test my app. As per code, when the button is clicked, i would like to change the backgroundColor of the View “interpolate-ly” from tomato to teal.

1. Using the code directly below will not change the color, but when Fast Reload is initiated from my code editor, the color did change to teal.
2. Using the commented backgroundColorInterpolation to style={[anyOtherStyle, backgroundColorInterpolation]} will crash my app upon entering the screen

Is that not how it works or has i been implementing them the wrong way?

Code

import {  Button,  } from 'react-native';
import Animated ,{
        useAnimatedStyle,
	useSharedValue,
	withTiming,
	interpolateColors
} from 'react-native-reanimated';

function testScreen(){

	const colorAnim = useSharedValue(0)
    
	const backgroundColorInterpolation = interpolateColors(colorAnimDerivedValue.value, {
		inputRange:[0,15],
		outputColorRange:["tomato","teal"]
	}) 

       // tried to use the one below, but app would crash without throwing any error
    
	// const backgroundColorInterpolation = useAnimatedStyle(() => {
       // 	const interpolation = interpolateColors(colorAnim.value, {
       //         inputRange:[0,15],
       //         outputColorRange:["tomato","teal"]
       //     }) 

	// 	return {
	// 	  backgroundColor: interpolation
	// 	};
	// });

	return (
			<Animated.View style={{   flex:1, backgroundColor:backgroundColorInterpolation}}>
                             <Button 
                                     onPress={() => {
                                         colorAnim.value = withTiming(15, {
                                             duration: 1000,
                                     });
                                    }
                              }/>
		      </Animated.View>
	);
};

export default testScreen

Package versions

• React: 16.13.1
• React Native:0.63.0
• React Native Reanimated:^2.0.0-alpha.5

[terrysahaidak]

Hi there, in order to pass some animated values to the styles, you need to use useAnimatedStyle hook. Passing values directly is no longer supported with Reanimated v2 API (You can still use Reanimated v1 with new Value and all the cond, set, add etc though).

This particular example @atcode-soft provided is not working because the provided interpolateColor API is only compatible with Reanimated v1.

Unfortunately, there is no API for that in the core, but you can use the one react-native-redash provides.

import Animated, {
  useSharedValue,
  useAnimatedScrollHandler,
  useAnimatedStyle
} from "react-native-reanimated";
import { interpolateColors } from "react-native-radash";

const ComponentName = () => {
  const scrollOffset = useSharedValue(0);

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: event => {
      scrollOffset.value = event.contentOffset.x;
    }
  });

  const backgroundStyles = useAnimatedStyle(() => {
    // make sure to run any interpolations inside the worklet
    // callback of useAnimatedStyle is a worklet
    // but also it knows you has access the scrollOffset value
    // so now it will re-run on each scroll change change
	
    // usage https://wcandillon.gitbook.io/redash/colors#interpolatecolor
    const backgroundColor = interpolateColors(
      scrollOffset.value,
      [0, width, width * 2, width * 3],
      ["#BFEAF5", "#BEECC4", "#FFE4D9", "#FFDDDD"]
    );
  }, []);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.slider, backgroundStyles]}>
        <Animated.ScrollView
          horizontal
          snapToInterval={width}
          decelerationRate="fast"
          showsHorizontalScrollIndicator={false}
          bounces={false}
          onScroll={scrollHandler}
          scrollEventThrottle={1}
        >
          ...
        </Animated.ScrollView>
      </Animated.View>
    </View>
  );
};

[danielanthonyl]

import Animated, {
  useSharedValue,
  useAnimatedScrollHandler,
  useAnimatedStyle
} from "react-native-reanimated";
import { interpolateColors } from "react-native-radash";

const ComponentName = () => {
  const scrollOffset = useSharedValue(0);

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: event => {
      scrollOffset.value = event.contentOffset.x;
    }
  });

  const backgroundStyles = useAnimatedStyle(() => {
    // make sure to run any interpolations inside the worklet
    // callback of useAnimatedStyle is a worklet
    // but also it knows you has access the scrollOffset value
    // so now it will re-run on each scroll change change
	
    // usage https://wcandillon.gitbook.io/redash/colors#interpolatecolor
    const backgroundColor = interpolateColors(
      scrollOffset.value,
      [0, width, width * 2, width * 3],
      ["#BFEAF5", "#BEECC4", "#FFE4D9", "#FFDDDD"]
    );
  }, []);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.slider, backgroundStyles]}>
        <Animated.ScrollView
          horizontal
          snapToInterval={width}
          decelerationRate="fast"
          showsHorizontalScrollIndicator={false}
          bounces={false}
          onScroll={scrollHandler}
          scrollEventThrottle={1}
        >
          ...
        </Animated.ScrollView>
      </Animated.View>
    </View>
  );
};

useAnimatedStyle has to return an object, found undefined instead.