diff --git a/Libraries/Animated/src/Animated.js b/Libraries/Animated/src/Animated.js index 8678b21f14b889..5b831396c3fc74 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 d3ff6665cbc81f..f9f3836835fc47 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 4098934dc0b63d..989b791829cff0 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> { - } 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 5d3f73f70c2bde..1b0e67f0cdab17 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> { -