From daa7c78055857cd2d9ea650de0c4b0f72d3f2acf Mon Sep 17 00:00:00 2001
From: Yunyu Lin <yyl@fb.com>
Date: Tue, 17 Jul 2018 22:31:07 -0700
Subject: [PATCH] Add FlatList and SectionList to Animated exports

Summary: There are several cases for creating an animated implementation of FlatList or SectionList (e.g. passing Animated.Event for onScroll with useNativeDriver enabled, see FlatListExample or SectionListExample), so we might as well add them to the exports.

Reviewed By: sahrens

Differential Revision: D8886446

fbshipit-source-id: 4b207500ea4d8d10de8c1b2639a5f492bc62e560
---
 Libraries/Animated/src/Animated.js               |  4 ++++
 .../src/__tests__/AnimatedNative-test.js         |  2 ++
 RNTester/js/FlatListExample.js                   |  8 +++-----
 RNTester/js/SectionListExample.js                | 16 +++-------------
 4 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/Libraries/Animated/src/Animated.js b/Libraries/Animated/src/Animated.js
index 8678b21f1..5b831396c 100644
--- a/Libraries/Animated/src/Animated.js
+++ b/Libraries/Animated/src/Animated.js
@@ -11,8 +11,10 @@
 'use strict';
 
 const AnimatedImplementation = require('AnimatedImplementation');
+const FlatList = require('FlatList');
 const Image = require('Image');
 const ScrollView = require('ScrollView');
+const SectionList = require('SectionList');
 const Text = require('Text');
 const View = require('View');
 
@@ -22,4 +24,6 @@ module.exports = {
   Text: AnimatedImplementation.createAnimatedComponent(Text),
   Image: AnimatedImplementation.createAnimatedComponent(Image),
   ScrollView: AnimatedImplementation.createAnimatedComponent(ScrollView),
+  FlatList: AnimatedImplementation.createAnimatedComponent(FlatList),
+  SectionList: AnimatedImplementation.createAnimatedComponent(SectionList),
 };
diff --git a/Libraries/Animated/src/__tests__/AnimatedNative-test.js b/Libraries/Animated/src/__tests__/AnimatedNative-test.js
index d3ff6665c..f9f383683 100644
--- a/Libraries/Animated/src/__tests__/AnimatedNative-test.js
+++ b/Libraries/Animated/src/__tests__/AnimatedNative-test.js
@@ -19,6 +19,8 @@ jest
   .setMock('View', ClassComponentMock)
   .setMock('Image', ClassComponentMock)
   .setMock('ScrollView', ClassComponentMock)
+  .setMock('FlatList', ClassComponentMock)
+  .setMock('SectionList', ClassComponentMock)
   .setMock('React', {Component: class {}})
   .setMock('NativeModules', {
     NativeAnimatedModule: {},
diff --git a/RNTester/js/FlatListExample.js b/RNTester/js/FlatListExample.js
index 4098934dc..989b79182 100644
--- a/RNTester/js/FlatListExample.js
+++ b/RNTester/js/FlatListExample.js
@@ -13,7 +13,7 @@
 const Alert = require('Alert');
 const React = require('react');
 const ReactNative = require('react-native');
-const {Animated, FlatList, StyleSheet, View} = ReactNative;
+const {Animated, StyleSheet, View} = ReactNative;
 
 const RNTesterPage = require('./RNTesterPage');
 
@@ -34,8 +34,6 @@ const {
   renderSmallSwitchOption,
 } = require('./ListExampleShared');
 
-const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
-
 const VIEWABILITY_CONFIG = {
   minimumViewTime: 3000,
   viewAreaCoveragePercentThreshold: 100,
@@ -114,7 +112,7 @@ class FlatListExample extends React.PureComponent<{}, $FlowFixMeState> {
             </View>
           </View>
           <SeparatorComponent />
-          <AnimatedFlatList
+          <Animated.FlatList
             ItemSeparatorComponent={ItemSeparatorComponent}
             ListHeaderComponent={<HeaderComponent />}
             ListFooterComponent={FooterComponent}
@@ -201,7 +199,7 @@ class FlatListExample extends React.PureComponent<{}, $FlowFixMeState> {
     this._listRef.getNode().recordInteraction();
     pressItem(this, key);
   };
-  _listRef: AnimatedFlatList;
+  _listRef: Animated.FlatList;
 }
 
 const styles = StyleSheet.create({
diff --git a/RNTester/js/SectionListExample.js b/RNTester/js/SectionListExample.js
index 5d3f73f70..1b0e67f0c 100644
--- a/RNTester/js/SectionListExample.js
+++ b/RNTester/js/SectionListExample.js
@@ -12,15 +12,7 @@
 
 const React = require('react');
 const ReactNative = require('react-native');
-const {
-  Alert,
-  Animated,
-  Button,
-  SectionList,
-  StyleSheet,
-  Text,
-  View,
-} = ReactNative;
+const {Alert, Animated, Button, StyleSheet, Text, View} = ReactNative;
 
 const RNTesterPage = require('./RNTesterPage');
 
@@ -39,8 +31,6 @@ const {
   renderStackedItem,
 } = require('./ListExampleShared');
 
-const AnimatedSectionList = Animated.createAnimatedComponent(SectionList);
-
 const VIEWABILITY_CONFIG = {
   minimumViewTime: 3000,
   viewAreaCoveragePercentThreshold: 100,
@@ -90,7 +80,7 @@ class SectionListExample extends React.PureComponent<{}, $FlowFixMeState> {
     {useNativeDriver: true},
   );
 
-  _sectionListRef: any;
+  _sectionListRef: Animated.SectionList;
   _captureRef = ref => {
     this._sectionListRef = ref;
   };
@@ -150,7 +140,7 @@ class SectionListExample extends React.PureComponent<{}, $FlowFixMeState> {
           </View>
         </View>
         <SeparatorComponent />
-        <AnimatedSectionList
+        <Animated.SectionList
           ref={this._captureRef}
           ListHeaderComponent={HeaderComponent}
           ListFooterComponent={FooterComponent}