Can't add property _tracking, object is not extensible

Question

USE CASE

I have a list of cards and am trying to create a swipe left/right tinder style functionality. I have gotten the swiping to work with panResponder, but am running into issues animating the backgroundColor

SETUP

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>
    )
  }

ERROR

As soon as I start to drag the card I get

"Can't add property _tracking, object is not extensible"

ADDITIONAL NOTES

If I replace the interpolation assignment to bgColor with the code below I do not get the error, but obviously lose out on the animating of the color.

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

QUESTION

And ideas on why the error is being thrown and how to resolve it?

Answer 1

To use Animated, you need a special, "animatable" component (either Animated.View, Animated.Text or Animated.Image, which are built in, or make a new one using Animated.createAnimatedComponent()). Could that be your problem?