Skip to content

Commit

Permalink
Add viewConfig to RCTSlider Component, fix #10158
Browse files Browse the repository at this point in the history
Summary:
And check componet.viewConfig before call component.setNativeProps method.

FIX #10158
Closes #10238

Differential Revision: D4008640

Pulled By: javache

fbshipit-source-id: 1bf9b34c0e56f1ffbcd31ae64b3cbafe77a9a1fd
  • Loading branch information
leeight authored and Facebook Github Bot committed Oct 12, 2016
1 parent 4b7f84a commit c996081
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 3 deletions.
4 changes: 1 addition & 3 deletions Examples/UIExplorer/js/RTLExample.js
Expand Up @@ -47,8 +47,6 @@ const {
const UIExplorerPage = require('./UIExplorerPage'); const UIExplorerPage = require('./UIExplorerPage');
const UIExplorerBlock = require('./UIExplorerBlock'); const UIExplorerBlock = require('./UIExplorerBlock');


const AnimatedImage = Animated.createAnimatedComponent(Image);

type State = { type State = {
toggleStatus: any, toggleStatus: any,
pan: Object, pan: Object,
Expand Down Expand Up @@ -116,7 +114,7 @@ function AnimationBlock(props) {
return ( return (
<View style={styles.block}> <View style={styles.block}>
<TouchableWithoutFeedback onPress={props.onPress}> <TouchableWithoutFeedback onPress={props.onPress}>
<AnimatedImage <Animated.Image
style={[styles.img, props.imgStyle]} style={[styles.img, props.imgStyle]}
source={require('./Thumbnails/poke.png')} source={require('./Thumbnails/poke.png')}
/> />
Expand Down
6 changes: 6 additions & 0 deletions Libraries/Animated/src/AnimatedImplementation.js
Expand Up @@ -1715,6 +1715,12 @@ function createAnimatedComponent(Component: any): any {
var callback = () => { var callback = () => {
if (this._component.setNativeProps) { if (this._component.setNativeProps) {
if (!this._propsAnimated.__isNative) { if (!this._propsAnimated.__isNative) {
if (this._component.viewConfig == null) {
var ctor = this._component.constructor;
var componentName = ctor.displayName || ctor.name || '<Unknown Component>';
throw new Error(componentName + ' "viewConfig" is not defined.');

This comment has been minimized.

Copy link
@gre

gre Nov 19, 2016

Contributor

I have a lib (gl-react-native) that uses Animated.createAnimatedComponent(GLCanvas) but don't define viewConfig, how should I do it?

IMO this should have been raised as "Breaking changes" in 0.37.0

This comment has been minimized.

Copy link
@leeight

leeight Nov 19, 2016

Author Contributor

Could you cherry-pick this commit: 31b7819

This comment has been minimized.

Copy link
@gre

gre Nov 19, 2016

Contributor

oh great, thanks

}

this._component.setNativeProps( this._component.setNativeProps(
this._propsAnimated.__getAnimatedValue() this._propsAnimated.__getAnimatedValue()
); );
Expand Down
9 changes: 9 additions & 0 deletions Libraries/Components/Slider/Slider.js
Expand Up @@ -13,6 +13,7 @@


var Image = require('Image'); var Image = require('Image');
var NativeMethodsMixin = require('react/lib/NativeMethodsMixin'); var NativeMethodsMixin = require('react/lib/NativeMethodsMixin');
var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
var Platform = require('Platform'); var Platform = require('Platform');
var PropTypes = require('react/lib/ReactPropTypes'); var PropTypes = require('react/lib/ReactPropTypes');
var React = require('React'); var React = require('React');
Expand Down Expand Up @@ -139,6 +140,14 @@ var Slider = React.createClass({
}; };
}, },


viewConfig: {
uiViewClassName: 'RCTSlider',
validAttributes: {
...ReactNativeViewAttributes.RCTView,
value: true
}
},

render: function() { render: function() {
const {style, onValueChange, onSlidingComplete, ...props} = this.props; const {style, onValueChange, onSlidingComplete, ...props} = this.props;
props.style = [styles.slider, style]; props.style = [styles.slider, style];
Expand Down

0 comments on commit c996081

Please sign in to comment.