AnimatedFlatList.tsx

const height = Dimensions.get('window').height;

const blockSize = 70;

function ItemSeparator() {
  return <View style={{height: 10}} />;
}

function ListSpacer() {
  return <View style={{height: height / 2 - blockSize}} />;
}

function AnimatedFlatList() {
  const [centeredIndex, setCenteredIndex] = useState(0);

  function momentumScrollEndHandler(
    e: NativeSyntheticEvent<NativeScrollEvent>,
  ) {
    setCenteredIndex(Math.round(e.nativeEvent.contentOffset.y / blockSize));
  }

  function renderItem({item, index}: ListRenderItemInfo<Article>) {
    return (
      <ArticleBlock
        key={item.title}
        title={item.title}
        date={item.date}
        isCenter={index === centeredIndex}
      />
    );
  }

  return (
    <FlatList
      snapToInterval={blockSize}
      onMomentumScrollEnd={momentumScrollEndHandler}
      contentContainerStyle={{alignItems: 'center'}}
      data={mockedData}
      renderItem={renderItem}
      ItemSeparatorComponent={ItemSeparator}
      ListHeaderComponent={ListSpacer}
      ListFooterComponent={ListSpacer}
    />
  );
}