Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error when attempting to animate Slider #10158

randycoulman opened this issue Sep 28, 2016 · 2 comments


None yet
3 participants
Copy link

commented Sep 28, 2016

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

    const { value } = props

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

  componentWillReceiveProps(nextProps) {
    const { value } = nextProps

      { duration: 300, toValue: value }

  render() {
    return (
            value={this.state.value} />

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

This comment has been minimized.

Copy link

commented Oct 3, 2016

Duplicated #7335


This comment has been minimized.

Copy link

commented Oct 12, 2016

Awesome, thanks! 👍

@facebook facebook locked as resolved and limited conversation to collaborators May 24, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.