when Animated running FlatList bug ,

[betsun2017]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

YES

Environment

OS: macOS Sierra 10.13.1
Node: 6.10.0
Yarn: 0.27.5
npm: 5.3.0
Watchman: 4.7.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
react-native: 0.52.0 => 0.52.0
react: 16.2.0 => 16.2.0

Target Platform: iOS (11.1)

Steps to Reproduce

run ios

Expected Behavior

the flatList is working.

(Write what you thought would happen.)

Actual Behavior

when Animated is running ,the flatList not working properly. Will not render more items，but the height is change。
When I use network data，the onEndReached not work too.

(Write what happened. Add screenshots!)

Reproducible Demo

import React, {
  Component
} from "react";
import {
  Platform,
  StyleSheet,
  Dimensions,
  FlatList,
  Text,
  View,
  Animated
} from "react-native";

export default class App extends Component < {} > {
  constructor(props) {
    super(props);

    this.state = {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22],
      rotation_an: new Animated.Value(0),
    };
  }
  componentDidMount() {
    this.runRotate();
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.rotation_an != nextState.rotation_an) {
      return false;
    }

  }

  runRotate = () => {
    this.state.rotation_an.setValue(0); //重置Rotate动画值为0
    Animated.timing(this.state.rotation_an, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true
    }).start(() => this.runRotate())
  }
  renderItem = (info) => {
    return (
      <View style = {styles.item}>
          <Text>{info.item}</Text>
        </View>
    )
  }
  render() {
    let rowh = 50;
    console.log("sssss");
    return (
      <View style = {styles.container}>
        <FlatList
          data={this.state.list}
          renderItem ={this.renderItem}
          getItemLayout = {(data, index) => ( {length: rowh, offset: (rowh) * index, index} )}
          initialNumToRender = {15}
          keyExtractor = {(item, index)=>{return "h" + index}}
          showsVerticalScrollIndicator = {false}
          legacyImplementation = {false}
        />
      </View>
    );
  }
}
const SCREEN_WIDTH = Dimensions.get("window").width;
const SCREEN_HEIGHT = Dimensions.get("window").height;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  item: {
    width: SCREEN_WIDTH,
    height: 50,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "white",
  }
});

(Paste the link to an example project and exact instructions to reproduce the issue.)

[ssssssssssss]

Have the same problem I think. Do you tried to call recordInteractions after the animation finishes?

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[DexterHuang]

I have the exact same problem with FlatList, even with v0.54.4.
FlatList will not render more item when there is an animation playing on the list item

Also, all Flatlist in the app will refuse to render more items, not just the one with animation playing.

[xqin]

@DexterHuang @ssssssssssss @betsun2017

ref: #16092

#16092 (comment)