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

Author: Yunyu Lin

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),
 };

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: {},

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({

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}