Add viewConfig to RCTSlider Component, fix #10158

Summary:
And check componet.viewConfig before call component.setNativeProps method.

FIX #10158
Closes https://github.com/facebook/react-native/pull/10238

Differential Revision: D4008640

Pulled By: javache

fbshipit-source-id: 1bf9b34c0e56f1ffbcd31ae64b3cbafe77a9a1fd

Examples/UIExplorer/js/RTLExample.js

@@ -47,8 +47,6 @@ const {
 const UIExplorerPage = require('./UIExplorerPage');
 const UIExplorerBlock = require('./UIExplorerBlock');
 
-const AnimatedImage = Animated.createAnimatedComponent(Image);
-
 type State = {
   toggleStatus: any,
   pan: Object,
@@ -116,7 +114,7 @@ function AnimationBlock(props) {
   return (
     <View style={styles.block}>
       <TouchableWithoutFeedback onPress={props.onPress}>
-        <AnimatedImage
+        <Animated.Image
           style={[styles.img, props.imgStyle]}
           source={require('./Thumbnails/poke.png')}
         />

Libraries/Animated/src/AnimatedImplementation.js

@@ -1715,6 +1715,12 @@ function createAnimatedComponent(Component: any): any {
       var callback = () => {
         if (this._component.setNativeProps) {
           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._component.setNativeProps(
               this._propsAnimated.__getAnimatedValue()
             );

Libraries/Components/Slider/Slider.js

@@ -13,6 +13,7 @@
 
 var Image = require('Image');
 var NativeMethodsMixin = require('react/lib/NativeMethodsMixin');
+var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var Platform = require('Platform');
 var PropTypes = require('react/lib/ReactPropTypes');
 var React = require('React');
@@ -139,6 +140,14 @@ var Slider = React.createClass({
     };
   },
 
+  viewConfig: {
+    uiViewClassName: 'RCTSlider',
+    validAttributes: {
+      ...ReactNativeViewAttributes.RCTView,
+      value: true
+    }
+  },
+
   render: function() {
     const {style, onValueChange, onSlidingComplete, ...props} = this.props;
     props.style = [styles.slider, style];