Impossibile aggiungere _tracking proprietà, oggetto non è estendibile

Question

USO CASE

Ho una lista di carte e sto cercando di creare un colpo di sinistra funzionalità stile esca/destra. Ho acquistato la strisciata di lavorare con panResponder, ma sono in esecuzione in problemi di animare la 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> 
    ) 
    } 

ERRORE

Appena comincio a trascinare la scheda ottengo

"Impossibile aggiungere la proprietà _tracking, l'oggetto non è estensibile"

NOTE AGGIUNTIVE

Se sostituisco l'incarico di interpolazione per bgColor con il codice qui sotto non ottengo l'errore, ma ovviamente mancare le animatrice del colore.

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

DOMANDA

E idee su perché viene gettata l'errore e come risolverlo?

Answer 1

Per utilizzare animato, è necessario uno speciale componente, "animatable" (sia Animated.View, Animated.Text o Animated.Image, che sono costruiti in, o fare uno nuovo utilizzando Animated.createAnimatedComponent()). Potrebbe essere il tuo problema?