Unable to add _tracking property, object is not expanding

Question

USING CASE

I have a list of maps, and I'm trying to create a left / right scroll. I got swiping to work with panResponder, but I have problems with backgroundColor animation

SETTINGS

constructor() { super(); this.state = { bgColor: new Animated.Value(0), }; } onPanResponderMove: (evt, gestureState) => { Animated.timing(this.state.bgColor, { toValue: 1, duration: 100, }).start(); } render() { const s = this.state; const p = this.props; const bgColor = s.bgColor.interpolate({ inputRange: [0, 1], outputRange: [colors.gray.one, colors.primary.light] }) return( <View style={ [styles.wrapper, pushLeft(s.dx)] }> <View {...this._panResponder.panHandlers} style={ styles.content } onLayout={ this.onLayout }> { this.props.children } <View style={ [styles.overlay, { backgroundColor: bgColor } ]}/> </View> </View> ) } 

MISTAKE

As soon as I start dragging the map, I get

"Cannot add _tracking property, object is not expanding"

ADDITIONAL NOTES

If I replace the interpolation assignment with bgColor code below, I will not get the error, but obviously will lose when the color is animated.

 const bgColor = s.bgColor._value === 0 ? colors.gray.one : colors.primary.light; 

Question

And ideas on why the error occurs and how to solve it?

Answer 1

To use Animated, you need a special “animation” component (either Animated.View , Animated.Text or Animated.Image ), either built-in, or creating a new one using Animated.createAnimatedComponent() ). Could this be your problem?