How can i change background Color with transition using reanimated v2

Question

I new to react-native-reanimated. I'm trying to change backgorundCOlor depending on the state. For now I have such code:

const [visible, setVisible] = useState<boolean>(true)
const backgroundColor = useSharedValue(0);
const backgroundColorStyle = useDerivedValue(() => interpolateColor(backgroundColor.value, [0, 1], ['transparent', 'rgba(0, 0, 0 , .5)']) )

const backgroundInterpolate = useAnimatedStyle(() => ({
    backgroundColor: backgroundColorStyle.value
}), [])

  .... 

<Animated.View style={[{height: '65%'}, backgroundInterpolate]}> 
   ....

</Animated.View>

So with this code i got such error:

Maybe i made it too complicated for such easy task like backgroundCOlor change with transition. Any way I'll asking you for a help, cz I'm stacked.

Answer 1

I would simplify it by making the shared value itself a boolean and then using it to control the background color

const backgroundColor = useSharedValue(false) 

const backgroundInterpolate = useAnimatedStyle(() => ({
    backgroundColor: backgroundColor.value ? 'transparent': 'rgba(0, 0, 0), .5)', 
}), [])