[TVOS] FlatList with 'inverted' option renders its items upside down after selection

[tykus160]

• 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 10.14
CPU: x64 Intel(R) Core(TM) i7-4578U CPU @ 3.00GHz
Memory: 39.88 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.3 - /usr/local/bin/node
npm: 5.5.1 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
IDEs:
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
react-native: 0.57.3 => 0.57.3
npmGlobalPackages:
react-native-cli: 2.0.1

Description

On Apple TvOS, when using inverted option on FlatList, its items are displayed upside down after some user input action. Cannot reproduce on iOS.

Reproducible Demo

Sample code taken from FlatList documentation with inverted added.

import React, { Component } from "react";
import { View, Text, FlatList, TouchableOpacity } from "react-native";

class MyListItem extends React.PureComponent {
  _onPress = () => {
    this.props.onPressItem(this.props.id);
  };

  render() {
    const textColor = this.props.selected ? "red" : "black";
    return (
      <TouchableOpacity onPress={this._onPress}>
        <View>
          <Text style={{ color: textColor , fontSize: 40}}>
            {this.props.title}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }
}

class MultiSelectList extends React.PureComponent {
  state = {selected: (new Map())};

  _keyExtractor = (item, index) => item.id;

  _onPressItem = (id) => {
    // updater functions are preferred for transactional updates
    this.setState((state) => {
      // copy the map rather than modifying state.
      const selected = new Map(state.selected);
      selected.set(id, !selected.get(id)); // toggle
      return {selected};
    });
  };

  _renderItem = ({item}) => (
    <MyListItem
      id={item.id}
      onPressItem={this._onPressItem}
      selected={!!this.state.selected.get(item.id)}
      title={item.title}
    />
  );

  render() {
    return (
      <FlatList
        data={[{key: 'a', title: 'option 1'}, {key: 'b', title:'option 2'}]}
        extraData={this.state}
        //keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
        inverted
      />
    );
  }
}

export default MultiSelectList;

[kelset]

Hello there 👋
This issue seems to have a really low activity on it. This is probably because OP managed to find a solution - also, it was most likely related their precise configuration. Because of this inactivity, we are closing it - but please feel free to comment and post a repro for version 0.59 and we'll gladly re-open it 🤗

Also, since it's related to TvOS, please take a look at -> react-native-community/discussions-and-proposals#111