Can't add property _tracking, object is not extensible
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?
ken4z
Updated on June 16, 2022Comments
-
ken4z almost 2 years
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?