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

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

Comments

Projects
None yet
3 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

This comment has been minimized.

Show comment
Hide comment
@leeight

leeight Oct 3, 2016

Contributor

Duplicated #7335

Contributor

leeight commented Oct 3, 2016

Duplicated #7335

@randycoulman

This comment has been minimized.

Show comment
Hide comment
@randycoulman

randycoulman Oct 12, 2016

Awesome, thanks! 👍

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.