Horizontal FlatList not working on Android 8

[bhrott]

• 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) i7-4770HQ CPU @ 2.20GHz
Memory: 410.20 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.8.0 - ~/.nvm/versions/node/v10.8.0/bin/node
Yarn: 1.9.2 - /usr/local/bin/yarn
npm: 6.2.0 - ~/.nvm/versions/node/v10.8.0/bin/npm
Watchman: 4.7.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, 23.0.2, 23.0.3, 25.0.0, 25.0.2, 26.0.0, 26.0.2, 26.0.3, 27.0.1, 27.0.3
API Levels: 21, 23, 26, 27
IDEs:
Android Studio: 3.1 AI-173.4720617
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
react-native-cli: 2.0.1

Description

Horizontal FlatList is not rendering the items on Android 8.

Code:

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

const LIST_WIDTH = Dimensions.get('window').width

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          style={{ width: LIST_WIDTH, marginTop: 20, backgroundColor: 'red' }}
          data={Array.from(Array(10).keys())}
          keyExtractor={(item, index) => `item_${item}`}
          horizontal={true}
          pagingEnabled={true}
          showsHorizontalScrollIndicator={false}
          initialScrollIndex={0}
          renderItem={({ item }) => {
            return <View style={{ width: LIST_WIDTH, height: 40, backgroundColor: 'blue', flex: 1 }}>
              <Text style={{ color: 'white' }}>{`${item}`}</Text>
            </View>
          }}

        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Result:

[react-native-bot]

Can you reproduce the issue on the latest release, v0.56?

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[sasurau4]

@benhurott This issue is not caused by FlatList.
It's caused by Array.from(Array(10).keys()) because JSC in android is very old.
For more details, #18426 (comment)

Your code work fine when I replaced Array.from(Array(10).keys()) to new Array(10).fill(0).map((item, index) => index).
https://snack.expo.io/@sasurau4/rn_20639

@hramos It's not component issue and duplicate of #18426, please close 🙏

[partriv]

@sasurau4 wow thank you! I've been banging my head on this for a couple hours now, felt so dumb.

[rickhanlonii]

Great find @sasurau4!