Merge branch 'master' into patch-3

Author: DanielMSchmidt

.eslintrc

@@ -61,6 +61,7 @@
     "SyntheticEvent": false,
     "$Either": false,
     "$All": false,
+    "$ArrayBufferView": false,
     "$Tuple": false,
     "$Supertype": false,
     "$Subtype": false,

Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-js-UIExplorerApp.ios/[email protected]

@@ -28,11 +28,10 @@ - (void)setUp
 {
   [super setUp];
 
-  self.parentView = [self _shadowViewWithConfig:^(YGNodeRef node) {
-    YGNodeStyleSetFlexDirection(node, YGFlexDirectionColumn);
-    YGNodeStyleSetWidth(node, 440);
-    YGNodeStyleSetHeight(node, 440);
-  }];
+  self.parentView = [RCTRootShadowView new];
+  YGNodeStyleSetFlexDirection(self.parentView.cssNode, YGFlexDirectionColumn);
+  YGNodeStyleSetWidth(self.parentView.cssNode, 440);
+  YGNodeStyleSetHeight(self.parentView.cssNode, 440);
   self.parentView.reactTag = @1; // must be valid rootView tag
 }
 
@@ -132,6 +131,7 @@ - (void)testAncestorCheck
 - (void)testAssignsSuggestedWidthDimension
 {
   [self _withShadowViewWithStyle:^(YGNodeRef node) {
+                                   YGNodeStyleSetPositionType(node, YGPositionTypeAbsolute);
                                    YGNodeStyleSetPosition(node, YGEdgeLeft, 0);
                                    YGNodeStyleSetPosition(node, YGEdgeTop, 0);
                                    YGNodeStyleSetHeight(node, 10);
@@ -143,6 +143,7 @@ - (void)testAssignsSuggestedWidthDimension
 - (void)testAssignsSuggestedHeightDimension
 {
   [self _withShadowViewWithStyle:^(YGNodeRef node) {
+                                   YGNodeStyleSetPositionType(node, YGPositionTypeAbsolute);
                                    YGNodeStyleSetPosition(node, YGEdgeLeft, 0);
                                    YGNodeStyleSetPosition(node, YGEdgeTop, 0);
                                    YGNodeStyleSetWidth(node, 10);
@@ -154,6 +155,7 @@ - (void)testAssignsSuggestedHeightDimension
 - (void)testDoesNotOverrideDimensionStyleWithSuggestedDimensions
 {
   [self _withShadowViewWithStyle:^(YGNodeRef node) {
+                                   YGNodeStyleSetPositionType(node, YGPositionTypeAbsolute);
                                    YGNodeStyleSetPosition(node, YGEdgeLeft, 0);
                                    YGNodeStyleSetPosition(node, YGEdgeTop, 0);
                                    YGNodeStyleSetWidth(node, 10);
@@ -189,11 +191,12 @@ - (void)_withShadowViewWithStyle:(void(^)(YGNodeRef node))configBlock
                 NSStringFromCGRect(actualRect));
 }
 
-- (RCTRootShadowView *)_shadowViewWithConfig:(void(^)(YGNodeRef node))configBlock
+- (RCTShadowView *)_shadowViewWithConfig:(void(^)(YGNodeRef node))configBlock
 {
-  RCTRootShadowView *shadowView = [RCTRootShadowView new];
+  RCTShadowView *shadowView = [RCTShadowView new];
   configBlock(shadowView.cssNode);
   return shadowView;
 }
 
+
 @end

Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/IntegrationTests-IntegrationTestsApp/[email protected]

@@ -131,9 +131,9 @@ class ShareActionSheetExample extends React.Component {
       ]
     },
     (error) => alert(error),
-    (success, method) => {
+    (completed, method) => {
       var text;
-      if (success) {
+      if (completed) {
         text = `Shared via ${method}`;
       } else {
         text = 'You didn\'t share';
@@ -172,9 +172,9 @@ class ShareScreenshotExample extends React.Component {
         ]
       },
       (error) => alert(error),
-      (success, method) => {
+      (completed, method) => {
         var text;
-        if (success) {
+        if (completed) {
           text = `Shared via ${method}`;
         } else {
           text = 'You didn\'t share';

Examples/UIExplorer/UIExplorerUnitTests/RCTShadowViewTests.m

@@ -69,18 +69,27 @@ class AnExScroll extends React.Component {
         <Animated.Image
           pointerEvents="none"
           style={[styles.bunny, {transform: [
-            {translateX: this.state.scrollX.interpolate({
-              inputRange: [0, width, 2 * width],
-              outputRange: [0, 0, width / 3]}),          //  multi-part ranges
-              extrapolate: 'clamp'},                     //  default is 'extend'
-            {translateY: this.state.scrollX.interpolate({
-              inputRange: [0, width, 2 * width],
-              outputRange: [0, -200, -260]}),
-              extrapolate: 'clamp'},
-            {scale: this.state.scrollX.interpolate({
-              inputRange: [0, width, 2 * width],
-              outputRange: [0.5, 0.5, 2]}),
-              extrapolate: 'clamp'},
+            {
+              translateX: this.state.scrollX.interpolate({
+                inputRange: [0, width, 2 * width],
+                outputRange: [0, 0, width / 3],
+                extrapolate: 'clamp',
+              }),
+            },
+            {
+              translateY: this.state.scrollX.interpolate({
+                inputRange: [0, width, 2 * width],
+                outputRange: [0, -200, -260],
+                extrapolate: 'clamp',
+              }),
+            },
+            {
+              scale: this.state.scrollX.interpolate({
+                inputRange: [0, width, 2 * width],
+                outputRange: [0.5, 0.5, 2],
+                extrapolate: 'clamp',
+              }),
+            },
           ]}]}
           source={BUNNY_PIC}
         />

Examples/UIExplorer/js/ActionSheetIOSExample.js

@@ -29,7 +29,6 @@ var {
   ListView,
   TouchableHighlight,
   StyleSheet,
-  RecyclerViewBackedScrollView,
   Text,
   View,
 } = ReactNative;
@@ -64,7 +63,6 @@ var ListViewSimpleExample = React.createClass({
         <ListView
           dataSource={this.state.dataSource}
           renderRow={this._renderRow}
-          renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
           renderSeparator={this._renderSeparator}
         />
       </UIExplorerPage>

Examples/UIExplorer/js/AnimatedGratuitousApp/AnExScroll.js

@@ -30,8 +30,11 @@ const {
   Animated,
   StyleSheet,
   TouchableWithoutFeedback,
+  Slider,
 } = ReactNative;
 
+var AnimatedSlider = Animated.createAnimatedComponent(Slider);
+
 class Tester extends React.Component {
   state = {
     native: new Animated.Value(0),
@@ -228,7 +231,6 @@ exports.description = 'Test out Native Animations';
 exports.examples = [
 {
     title: 'Multistage With Multiply and rotation',
-    description: 'description',
     render: function() {
       return (
           <Tester
@@ -278,7 +280,6 @@ exports.examples = [
   },
   {
     title: 'Multistage With Multiply',
-    description: 'description',
     render: function() {
       return (
           <Tester
@@ -322,7 +323,6 @@ exports.examples = [
   },
   {
     title: 'Scale interpolation with clamping',
-    description: 'description',
     render: function() {
       return (
         <Tester
@@ -352,7 +352,6 @@ exports.examples = [
   },
   {
     title: 'Opacity without interpolation',
-    description: 'description',
     render: function() {
       return (
         <Tester
@@ -374,7 +373,6 @@ exports.examples = [
   },
   {
     title: 'Rotate interpolation',
-    description: 'description',
     render: function() {
       return (
         <Tester
@@ -403,7 +401,6 @@ exports.examples = [
   },
   {
     title: 'translateX => Animated.spring',
-    description: 'description',
     render: function() {
       return (
         <Tester
@@ -454,6 +451,19 @@ exports.examples = [
         </Tester>
       );
     },
+  },{
+    title: 'Drive custom property',
+    render: function() {
+      return (
+        <Tester
+          type="timing"
+          config={{ duration: 1000 }}>
+          {anim => (
+            <AnimatedSlider style={{}} value={anim} />
+          )}
+        </Tester>
+      );
+    },
   },
   {
     title: 'Animated value listener',

Examples/UIExplorer/js/ListViewExample.js

@@ -57,6 +57,11 @@ exports.examples = [
           onPress={() => { _scrollView.scrollTo({y: 0}); }}>
           <Text>Scroll to top</Text>
         </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => { _scrollView.scrollToEnd({animated: true}); }}>
+          <Text>Scroll to bottom</Text>
+        </TouchableOpacity>
       </View>
     );
   }
@@ -79,6 +84,11 @@ exports.examples = [
           onPress={() => { _scrollView.scrollTo({x: 0}); }}>
           <Text>Scroll to start</Text>
         </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => { _scrollView.scrollToEnd({animated: true}); }}>
+          <Text>Scroll to end</Text>
+        </TouchableOpacity>
       </View>
     );
   }

Examples/UIExplorer/js/NativeAnimationsExample.js

@@ -132,16 +132,23 @@ exports.examples = [
   },
   {
     title: 'Custom min/max track tint color',
-    platform: 'ios',
     render(): React.Element<any> {
       return (
         <SliderExample
-          minimumTrackTintColor={'red'}
-          maximumTrackTintColor={'green'}
+          minimumTrackTintColor={'blue'}
+          maximumTrackTintColor={'red'}
+          value={0.5}
         />
       );
     }
   },
+  {
+    title: 'Custom thumb color',
+    platform: 'android',
+    render(): React.Element<any> {
+      return <SliderExample thumbTintColor={'blue'} />;
+    }
+  },
   {
     title: 'Custom thumb image',
     platform: 'ios',