Permalink
Browse files

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
  • Loading branch information...
yunyu authored and facebook-github-bot committed Jul 18, 2018
1 parent e64e13f commit daa7c78055857cd2d9ea650de0c4b0f72d3f2acf
@@ -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),
};
@@ -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: {},
@@ -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({
@@ -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}

0 comments on commit daa7c78

Please sign in to comment.