Horizontal FlatList pagination does not work properly on Android

[tigo0]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 140.98 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.9.4 - ~/.nvm/versions/node/v8.9.4/bin/node
    npm: 5.6.0 - ~/.nvm/versions/node/v8.9.4/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    Android SDK:
      Build Tools: 23.0.1, 25.0.1, 25.0.2, 25.0.3, 26.0.2, 26.0.3, 27.0.3
      API Levels: 19, 21, 22, 23, 25, 26, 27
  IDEs:
    Android Studio: 3.0 AI-171.4443003
    Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.5.0 => 16.5.0 
    react-native: 0.57.0 => 0.57.0 
  npmGlobalPackages:
    create-react-native-app: 1.0.0
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7

Description

Horizontal FlatList with pagination does not paginate properly on android.

Reproducible Demo

Clean initialization of react-native 0.57.0 with react-native init. Build a Horizontal FlatList and run on Android. Tested on Android 8. Might be related with #20639

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Dimensions, Text, View, FlatList} from 'react-native';

const { width } = Dimensions.get('window');

const data = [
  {
    id: 1,
    text: 'Test 1',
  },
  {
    id: 2,
    text: 'test 2',
  },
  {
    id: 3,
    text: 'test 3'
  }
];

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

  keyExtractor = item => item.id.toString();

  renderItem({ item}) {
    return (
      <View key={item.id} style={{width: width}}>
        <Text>{item.text}</Text>
      </View>
    )
  }

  render() {
    return (
      <FlatList
        data={data}
        horizontal
        pagingEnabled
        keyExtractor={this.keyExtractor}
        renderItem={this.renderItem}
      />
    );
  }
}

[olegbl]

Same as #21116