Error when attempting to animate Slider #10158

Closed
randycoulman opened this Issue Sep 28, 2016 · 2 comments

Projects

None yet

2 participants

@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
Contributor
leeight commented Oct 3, 2016

Duplicated #7335

@facebook-github-bot facebook-github-bot pushed a commit that closed this issue Oct 12, 2016
@leeight leeight + Facebook Github Bot Add viewConfig to RCTSlider Component, fix #10158
Summary:
And check componet.viewConfig before call component.setNativeProps method.

FIX #10158
Closes #10238

Differential Revision: D4008640

Pulled By: javache

fbshipit-source-id: 1bf9b34c0e56f1ffbcd31ae64b3cbafe77a9a1fd
c996081
@randycoulman

Awesome, thanks! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment