Error when attempting to animate Slider

[randycoulman]

Issue Description

I am using the React Native Slider component, and in my application, it is possible for the value that the slider represents to be changed external to the slider. I want to animate those changes so that the slider moves smoothly to the new value rather than jumping.

However, when I try this, I get the error: Cannot read property 'validAttributes' of undefined.

Here is the stacktrace:

setNativeProps (NativeMethodsMixin.js:105)
proxiedMethod (createPrototypeProxy.js:44)
callback (AnimatedImplementation.js:1625)
update (AnimatedImplementation.js:1530)
(anonymous function) (AnimatedImplementation.js:207)
_flush (AnimatedImplementation.js:207)
_updateValue (AnimatedImplementation.js:866)
animation.start._this8._animation (AnimatedImplementation.js:833)
onUpdate (AnimatedImplementation.js:318)
callTimer (JSTimersExecution.js:101)
callTimers (JSTimersExecution.js:140)
__callFunction (MessageQueue.js:228)
(anonymous function) (MessageQueue.js:105)
guard (MessageQueue.js:44)
callFunctionReturnFlushedQueue (MessageQueue.js:104)
message (debuggerWorker.js:49)

I'm not sure what the right approach to fixing this is, but I'd be happy to take a run at it with some guidance and/or direction.

It seems as though only a few components supply validAttributes, and Slider doesn't seem to be one that does. I'm not sure if it should, or if the code should never get to this point at all.

Steps to Reproduce / Code Snippets

I start by wrapping the Slider with Animated.createAnimatedComponent, and then I pass an Animated.Value into it as the value property.

Here is a pared-down version of my component:

import React from 'react'
import { Animated, Slider, View } from 'react-native'

const AnimatedSlider = Animated.createAnimatedComponent(Slider)

export default class MySlider extends React.Component {
  constructor(props) {
    super(props)

    const { value } = props

    this.state = {
        value: new Animated.Value(value)
    }
  }

  componentWillReceiveProps(nextProps) {
    const { value } = nextProps

    Animated.timing(
      this.state.value,
      { duration: 300, toValue: value }
    ).start()
  }

  render() {
    return (
      <View>
        <AnimatedSlider
            maximumValue={100}
            minimumValue={0}
            value={this.state.value} />
      </View>
    )
  }
}

RNPlay seems to be down, but if necessary, I can try to put together a standalone runnable example.

Expected Results

I expect that animating the value property of the Slider should work without raising an exception.

Additional Information

• React Native version: 0.34.0
• Platform(s) (iOS, Android, or both?): iOS
• Operating System (macOS, Linux, or Windows?): MacOS 10.11.6

[leeight]

Duplicated #7335

[randycoulman]

Awesome, thanks! 👍