[Android][Flatlist][Horizontal] Last item delete in horizontal flatlist does not adjust scroll position.

React Native version: 0.59.10

Steps To Reproduce

export default class App extends Component<Props> {

  constructor(props) {
    super(props);
    this.dataItems = [{
      id: 1,
      text: 'one'
    },{
      id: 2,
      text: 'two'
    },{
      id: 3,
      text: 'three'
    }, {
      id: 4,
      text: 'four',
    }, {
      id: 5,
      text: 'five'
    }];
  }

  removeItem = (id) => {
    this.dataItems = this.dataItems.filter((item) => item.id !== id);
    this.setState({});
  };

  renderItem = ({item}) => {
    return (
      <View style={{ width: 140, height: 140, backgroundColor: 'yellow', margin: 10}}>
        <Text>{item.text}</Text>
        <TouchableOpacity onPress={() => {
          this.removeItem(item.id);
        }}>
          <Text>{'Remove me'}</Text>
        </TouchableOpacity>
      </View>
    )
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={{height: 140, width: '100%'}}>
          <FlatList
            horizontal
            data={this.dataItems}
            renderItem={this.renderItem}
            keyExtractor={item => `${item.id}`}
          />
        </View>
      </View>
    );
  }
}

Describe what you expected to happen: After removing last item, scroll position should be adjusted.

Snack, code example, screenshot, or link to a repository:

[victoralmeidadev]

Same problem here.

A workaround while waiting fix: use scrollToEnd when removing the last item.

Example:

import React, { useState, useRef, useCallback } from "react";
import { FlatList } from "react-native";

function ExampleComponent() {
  const [items, setItems] = useState<[]>([]);
  const flatListRef = useRef<FlatList>();

  const handleRemoveFlatListItem = useCallback(
    (index: number) => {
      const canScrollToEnd = index === items.length - 1;
      const newItems = [...items] as [];
      newItems.splice(index, 1);
      setItems([...newItems]);
      if (flatListRef?.current && canScrollToEnd)
        flatListRef.current.scrollToEnd();
    },
    [items, flatListRef]
  );

  const renderItem = ...

  return (
    <FlatList
      horizontal
      data={items}
      renderItem={renderItem}
      keyExtractor={(item) => `${item.id}`}
    />
  );
}

[jayshah123]

latest pr is https://github.com/facebook/react-native/pull/28977