interpolateColor issue

I’ve been watching react native fashion tutorial and I’ve stucked in this section.

const { scrollHandler, x, y } = useScrollHandler();
 const backgroundColor=interpolateColor(x,{
   inputRange:[0,width,width*2,width*3],
   outputRange:["#BFEAF5","#BEECC4","#FFE4D9","#FFDDDD"]

 })

After implementing this in style all my backgrounds are white. How can I fix this ?

[ahoopen]

Its important that the Animated import is from “react-native-reanimated” instead of “react-native”. And also don’t forget to remove the backgroundColor on slider in your styles. And ofcourse you have to set the backgroundColor on the Animated.ScrollView

<Animated.View style={[styles.slider, { backgroundColor }]}>

Hope this helps 😃

[ahoopen]

I had the same issue. The problem for me was the wrong way the scrollHandler was set on the Animated.ScrollView. So do this, {…scrollHandler} instead of {…{scrollHandler} }

<Animated.ScrollView
          {...scrollHandler}
/>