Update from original

.flowconfig

@@ -41,12 +41,12 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-0]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-0]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-1]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-1]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
 unsafe.enable_getters_and_setters=true
 
 [version]
-^0.40.0
+^0.41.0

.github/ISSUE_TEMPLATE.md

@@ -1,8 +1,11 @@
-We use GitHub Issues for bugs.
+Please read the following carefully before opening a new issue.
 
-If you have a non-bug question, ask on Stack Overflow: http://stackoverflow.com/questions/tagged/react-native
+We use GitHub Issues for tracking bugs in React Native.
 
-If you have a feature request, post it on Product Pains: https://productpains.com/product/react-native/
+- If you have a non-bug question, ask on Stack Overflow: http://stackoverflow.com/questions/tagged/react-native
+- If you have a feature request, post it on Canny: https://react-native.canny.io/feature-requests
+
+Your issue may be closed without explanation if it does not provide the information required by this template.
 
 --- Please use this template, and delete everything above this line before submitting your issue --- 
 
@@ -23,3 +26,4 @@ If you have a feature request, post it on Product Pains: https://productpains.co
 * React Native version: [FILL THIS OUT: Does the bug reproduce on the latest RN release?]
 * Platform: [FILL THIS OUT: iOS, Android, or both?]
 * Operating System: [FILL THIS OUT: MacOS, Linux, or Windows?]
+* Dev tools: [FILL THIS OUT: Xcode or Android Studio version, iOS or Android SDK version, if applicable]

.gitignore

@@ -54,3 +54,5 @@ node_modules
 # Test generated files
 /ReactAndroid/src/androidTest/assets/AndroidTestBundle.js
 *.js.meta
+
+/third-party

.travis.yml

@@ -1,6 +1,6 @@
 language: objective-c
 
-osx_image: xcode8
+osx_image: xcode8.2
 
 install:
   - mkdir -p /Users/travis/build/facebook/.nvm
@@ -20,19 +20,18 @@ script:
   - if [[ "$TEST_TYPE" = objc-ios ]]; then travis_retry travis_wait ./scripts/objc-test-ios.sh; fi
   - if [[ "$TEST_TYPE" = objc-tvos ]]; then travis_retry travis_wait ./scripts/objc-test-tvos.sh; fi
   - if [[ "$TEST_TYPE" = e2e-objc ]]; then node ./scripts/run-ci-e2e-tests.js --ios --js --retries 3; fi
-  - if [[ "$TEST_TYPE" = e2e-objc-tvos ]]; then node ./scripts/run-ci-e2e-tests.js --tvos --retries 3; fi
-  - if [[ "$TEST_TYPE" = js ]]; then npm run flow check; fi
-  - if [[ "$TEST_TYPE" = js ]]; then npm test -- --maxWorkers=1; fi
   - if [[ ( "$TEST_TYPE" = podspecs ) && ( "$TRAVIS_PULL_REQUEST" = "false" ) ]]; then gem install cocoapods && ./scripts/process-podspecs.sh; fi
 
+
+matrix:
+  - fast_finish: true # Fail the whole build as soon as one test type fails. Should help with Travis capacity issues (very long queues).
+
+# The order of these tests says which are more likely to run first and fail the whole build fast.
 env:
-  matrix:
-    - TEST_TYPE=e2e-objc-tvos
-    - TEST_TYPE=e2e-objc
-    - TEST_TYPE=objc-ios
-    - TEST_TYPE=objc-tvos
-    - TEST_TYPE=js
-    - TEST_TYPE=podspecs
+  - TEST_TYPE=objc-ios
+  - TEST_TYPE=podspecs
+  - TEST_TYPE=e2e-objc
+  - TEST_TYPE=objc-tvos
 
 branches:
   only:
@@ -43,7 +42,8 @@ notifications:
   email:
     recipients:
       - mkonicek@fb.com
-      - eloy@artsy.net
+      - douglowder@mac.com # Doug Lowder built and maintains Apple TV specific code and wants to be notified about tvOS failures.
+      - eloy@artsy.net # Eloy Durán maintains the podspecs test and wants to be notified about failures.
     on_failure: change
     on_success: change
   slack:

Examples/Movies/SearchScreen.js

@@ -123,15 +123,6 @@ var SearchScreen = React.createClass({
 
     fetch(this._urlForQueryAndPage(query, 1))
       .then((response) => response.json())
-      .catch((error) => {
-        LOADING[query] = false;
-        resultsCache.dataForQuery[query] = undefined;
-
-        this.setState({
-          dataSource: this.getDataSource([]),
-          isLoading: false,
-        });
-      })
       .then((responseData) => {
         LOADING[query] = false;
         resultsCache.totalForQuery[query] = responseData.total;
@@ -148,6 +139,15 @@ var SearchScreen = React.createClass({
           dataSource: this.getDataSource(responseData.movies),
         });
       })
+      .catch((error) => {
+        LOADING[query] = false;
+        resultsCache.dataForQuery[query] = undefined;
+
+        this.setState({
+          dataSource: this.getDataSource([]),
+          isLoading: false,
+        });
+      })
       .done();
   },
 

Examples/UIExplorer/js/CameraRollView.js

@@ -81,6 +81,7 @@ var propTypes = {
 };
 
 var CameraRollView = React.createClass({
+  // $FlowFixMe(>=0.41.0)
   propTypes: propTypes,
 
   getDefaultProps: function(): Object {
@@ -123,6 +124,7 @@ var CameraRollView = React.createClass({
   rendererChanged: function() {
     var ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged});
     this.state.dataSource = ds.cloneWithRows(
+      // $FlowFixMe(>=0.41.0)
       groupByEveryN(this.state.assets, this.props.imagesPerRow)
     );
   },
@@ -209,6 +211,7 @@ var CameraRollView = React.createClass({
       if (image === null) {
         return null;
       }
+      // $FlowFixMe(>=0.41.0)
       return this.props.renderImage(image);
     });
 
@@ -231,6 +234,7 @@ var CameraRollView = React.createClass({
       newState.lastCursor = data.page_info.end_cursor;
       newState.assets = this.state.assets.concat(assets);
       newState.dataSource = this.state.dataSource.cloneWithRows(
+        // $FlowFixMe(>=0.41.0)
         groupByEveryN(newState.assets, this.props.imagesPerRow)
       );
     }

Examples/UIExplorer/js/FlatListExample.js

@@ -26,11 +26,12 @@
 const React = require('react');
 const ReactNative = require('react-native');
 const {
+  Animated,
+  FlatList,
   StyleSheet,
   View,
 } = ReactNative;
 
-const FlatList = require('FlatList');
 const UIExplorerPage = require('./UIExplorerPage');
 
 const infoLog = require('infoLog');
@@ -47,6 +48,8 @@ const {
   renderSmallSwitchOption,
 } = require('./ListExampleShared');
 
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+
 const VIEWABILITY_CONFIG = {
   minimumViewTime: 3000,
   viewAreaCoveragePercentThreshold: 100,
@@ -66,18 +69,34 @@ class FlatListExample extends React.PureComponent {
     logViewable: false,
     virtualized: true,
   };
+
   _onChangeFilterText = (filterText) => {
     this.setState({filterText});
   };
+
   _onChangeScrollToIndex = (text) => {
-    this._listRef.scrollToIndex({viewPosition: 0.5, index: Number(text)});
+    this._listRef.getNode().scrollToIndex({viewPosition: 0.5, index: Number(text)});
   };
+
+  _scrollPos = new Animated.Value(0);
+  _scrollSinkX = Animated.event(
+    [{nativeEvent: { contentOffset: { x: this._scrollPos } }}],
+    {useNativeDriver: true},
+  );
+  _scrollSinkY = Animated.event(
+    [{nativeEvent: { contentOffset: { y: this._scrollPos } }}],
+    {useNativeDriver: true},
+  );
+
   componentDidUpdate() {
-    this._listRef.recordInteraction(); // e.g. flipping logViewable switch
+    this._listRef.getNode().recordInteraction(); // e.g. flipping logViewable switch
   }
+
   render() {
     const filterRegex = new RegExp(String(this.state.filterText), 'i');
-    const filter = (item) => (filterRegex.test(item.text) || filterRegex.test(item.title));
+    const filter = (item) => (
+      filterRegex.test(item.text) || filterRegex.test(item.title)
+    );
     const filteredData = this.state.data.filter(filter);
     return (
       <UIExplorerPage
@@ -93,7 +112,6 @@ class FlatListExample extends React.PureComponent {
             <PlainInput
               onChangeText={this._onChangeScrollToIndex}
               placeholder="scrollToIndex..."
-              style={styles.searchTextInput}
             />
           </View>
           <View style={styles.options}>
@@ -102,22 +120,37 @@ class FlatListExample extends React.PureComponent {
             {renderSmallSwitchOption(this, 'fixedHeight')}
             {renderSmallSwitchOption(this, 'logViewable')}
             {renderSmallSwitchOption(this, 'debug')}
+            <Animated.View style={[styles.spindicator, {
+              transform: [
+                {rotate: this._scrollPos.interpolate({
+                  inputRange: [0, 5000],
+                  outputRange: ['0deg', '360deg'],
+                  extrapolate: 'extend',
+                })}
+              ]
+            }]} />
           </View>
         </View>
         <SeparatorComponent />
-        <FlatList
-          HeaderComponent={HeaderComponent}
-          FooterComponent={FooterComponent}
-          SeparatorComponent={SeparatorComponent}
+        <AnimatedFlatList
+          ItemSeparatorComponent={SeparatorComponent}
+          ListHeaderComponent={HeaderComponent}
+          ListFooterComponent={FooterComponent}
           data={filteredData}
           debug={this.state.debug}
           disableVirtualization={!this.state.virtualized}
-          getItemLayout={this.state.fixedHeight ? this._getItemLayout : undefined}
+          getItemLayout={this.state.fixedHeight ?
+            this._getItemLayout :
+            undefined
+          }
           horizontal={this.state.horizontal}
-          key={(this.state.horizontal ? 'h' : 'v') + (this.state.fixedHeight ? 'f' : 'd')}
+          key={(this.state.horizontal ? 'h' : 'v') +
+            (this.state.fixedHeight ? 'f' : 'd')
+          }
           legacyImplementation={false}
           numColumns={1}
           onRefresh={this._onRefresh}
+          onScroll={this.state.horizontal ? this._scrollSinkX : this._scrollSinkY}
           onViewableItemsChanged={this._onViewableItemsChanged}
           ref={this._captureRef}
           refreshing={false}
@@ -145,26 +178,35 @@ class FlatListExample extends React.PureComponent {
   };
   _shouldItemUpdate(prev, next) {
     /**
-     * Note that this does not check state.horizontal or state.fixedheight because we blow away the
-     * whole list by changing the key in those cases. Make sure that you do the same in your code,
-     * or incorporate all relevant data into the item data, or skip this optimization entirely.
+     * Note that this does not check state.horizontal or state.fixedheight
+     * because we blow away the whole list by changing the key in those cases.
+     * Make sure that you do the same in your code, or incorporate all relevant
+     * data into the item data, or skip this optimization entirely.
      */
     return prev.item !== next.item;
   }
-  // This is called when items change viewability by scrolling into or out of the viewable area.
+  // This is called when items change viewability by scrolling into or out of
+  // the viewable area.
   _onViewableItemsChanged = (info: {
       changed: Array<{
-        key: string, isViewable: boolean, item: any, index: ?number, section?: any
+        key: string,
+        isViewable: boolean,
+        item: any,
+        index: ?number,
+        section?: any,
       }>
     }
   ) => {
     // Impressions can be logged here
     if (this.state.logViewable) {
-      infoLog('onViewableItemsChanged: ', info.changed.map((v) => ({...v, item: '...'})));
+      infoLog(
+        'onViewableItemsChanged: ',
+        info.changed.map((v) => ({...v, item: '...'})),
+      );
     }
   };
   _pressItem = (key: number) => {
-    this._listRef.recordInteraction();
+    this._listRef.getNode().recordInteraction();
     pressItem(this, key);
   };
   _listRef: FlatList<*>;
@@ -180,6 +222,12 @@ const styles = StyleSheet.create({
   searchRow: {
     paddingHorizontal: 10,
   },
+  spindicator: {
+    marginLeft: 'auto',
+    width: 2,
+    height: 16,
+    backgroundColor: 'darkgray',
+  },
 });
 
 module.exports = FlatListExample;

Examples/UIExplorer/js/ImageExample.js

@@ -677,6 +677,45 @@ exports.examples = [
     },
     platform: 'ios',
   },
+  {
+    title: 'Blur Radius',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image
+            style={[styles.base,]}
+            source={fullImage}
+            blurRadius={0}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin]}
+            source={fullImage}
+            blurRadius={5}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin]}
+            source={fullImage}
+            blurRadius={10}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin]}
+            source={fullImage}
+            blurRadius={15}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin]}
+            source={fullImage}
+            blurRadius={20}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin]}
+            source={fullImage}
+            blurRadius={25}
+          />
+        </View>
+      );
+    },
+  },
 ];
 
 var fullImage = {uri: 'https://facebook.github.io/react/img/logo_og.png'};