React native keeps jumping while data are loaded

Viewed 354

I got interesting problem. Here is a preview

enter image description here

<FlatList
    ref={ref}
    data={data}
    getItemLayout={layout}
    scrollEventThrottle={100}
    keyExtractor={keyExtractor}
    ItemSeparatorComponent={separator}
    renderItem={renderItem}
    removeClippedSubviews={true}
    onContentSizeChange={this.setOffsetOfScrollView}
    directionalLockEnabled={true}
  />



setOffsetOfScrollView = () => {
    if (validator) {
      const children = this.props.children as Array<{
        props: {
          value: string;
        };
      }>;
      const index = children.findIndex(child => child.props.value === this.props.value);
      if (index === -1) {
        return;
      }
      this.flatList.scrollToIndex({ animated: true, index });
    }
    this.setState({ validator: false });
  };

can someone see the problem?

1 Answers

Try to make remove setState line, may be its letting the screen to rerender with flash backs !

Related