0.59.0-rc.0 Flatlist inverted horizontal

[tamirrab]

🐛 Bug Report

0.59.0-rc.0 Flatlist inverted horizontal with ListFooterComponent or ListHeaderComponent:
when data is empty array and ListFooterComponent or ListHeaderComponent rendering component - the component show on left instead of right.
when adding data - the ListFooterComponent or ListHeaderComponent is ok.

The bug is on iOS and Android.
The bug not happened on 0.58.4 version

Code Example

Code:

const data = []; // The ListFooterComponent or ListHeaderComponent Is on the right
// data = ["test"]; // The ListFooterComponent or ListHeaderComponent Is on the left = OK
<FlatList
  data={data}
  keyExtractor={item => item}
  ListFooterComponent={<View
      style={{
          backgroundColor: "#D6D6D6",
          paddingVertical: 6,
          marginVertical: 6,
          borderRadius: 20,
          alignItems: 'center',
          paddingHorizontal: 15
      }}>
      <Text>{"+"}</Text>
  </View>}
  ListHeaderComponent={<View
      style={{
          backgroundColor: "#D6D6D6",
          paddingVertical: 6,
          marginVertical: 6,
          borderRadius: 20,
          alignItems: 'center',
          paddingHorizontal: 15
      }}>
      <Text>{"+"}</Text>
  </View>}
  inverted
  horizontal
  renderItem={({item, index}) => {
    return <View style={{justifyContent: 'center'}}>
        <Text>{"Test"}</Text>
    </View>
  }}/>

Environment

React Native Environment Info:
System:
OS: macOS 10.14.4
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 100.43 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.7.0 - ~/.nvm/versions/node/v8.11.4/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 26, 27, 28
Build Tools: 27.0.3, 28.0.2, 28.0.3
System Images: android-24 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-27 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5264788
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: ^16.8.1 => 16.8.1
react-native: 0.59.0-rc.0 => 0.59.0-rc.0
npmGlobalPackages:
react-native-create-library: 3.1.2
react-native-git-upgrade: 0.2.7

[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.

[tamirrab]

Edit

[hramos]

Edited the issue to move the content out of comment blocks.

[kelset]

👋 there.

I just tested the code on RN 0.59 and this issue is still present: I actually investigated it a bit further and noticed that, by changing the code into:

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

const data = []; // The ListFooterComponent or ListHeaderComponent Is on the right
// const data = ['test']; // The ListFooterComponent or ListHeaderComponent Is on the left = OK

export default class App extends Component<> {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={data}
          keyExtractor={item => item}
          ListFooterComponent={
            <View
              style={{
                backgroundColor: '#D6D6D6',
                paddingVertical: 6,
                marginVertical: 6,
                borderRadius: 20,
                alignItems: 'center',
                paddingHorizontal: 15
              }}
            >
              <Text>{'Footer'}</Text>
            </View>
          }
          ListHeaderComponent={
            <View
              style={{
                backgroundColor: '#D6D6D6',
                paddingVertical: 6,
                marginVertical: 6,
                borderRadius: 20,
                alignItems: 'center',
                paddingHorizontal: 15
              }}
            >
              <Text>{'HEADER'}</Text>
            </View>
          }
          inverted
          horizontal
          renderItem={({ item, index }) => {
            return (
              <View style={{ justifyContent: 'center' }}>
                <Text>{'Test'}</Text>
              </View>
            );
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    paddingTop: 40
  }
});

It becomes more clear that when there is no data this happens:

Meaning, when there are no data it seems that the list "skips" an invert. Probably a temp workaround is to never have a 'really' empty data...? And handle the empty item state?

We'll look more into this in the next few months