React-native: ListEmptyComponent is rendered upside down, when using inverted flag

[AndrewJack]

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: 227.11 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.10.0 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/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, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2
        API Levels: 23, 25, 26, 27, 28
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      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:
      react-native-cli: 1.0.0

Description

The FlatList or SectionList ListEmptyComponent is rendered upside down, when using inverted flag

It was introduced by https://github.com/facebook/react-native/commit/db061ea8c7b78d7e9df4a450c9e7a24d9b2382b4 . I have reverted this change in our project, which works. cc @janicduplessis

To Reproduce

Create a FlatList with empty data, inverted={true}, and a ListEmptyComponent. Like below:

      <FlatList
        data={data}
        ListEmptyComponent={this.renderEmpty}
        style={styles.list}
        inverted
      />

Reproducible Demo

Example can be found here in InvertedListBug.js. or run the project and observe.
https://github.com/AndrewJack/react-native-basic

[JosimarGomes]

I have the same problem

[scottmas]

@kelset @hramos Did this fix land in RN 0.57.5? Or are we going to need to wait for a future release? NPM shows 0.57.5 being released two days _before_ https://github.com/facebook/react-native/pull/21117 was marked by the Facebook bot as being merged, so it seems likely not..

[hramos]

@scottmas it did not. You can easily tell if a fix is in a release by looking at the tags in the commit. https://github.com/facebook/react-native/commit/b971c5beb8c7f90543ea037194790142f4f57c80 is only tagged with v0.58.0-rc.1 and v0.58.0-rc.0, so it's not in any of the 0.57 releases.

If you have any other questions about the release process, you can take a look at https://github.com/react-native-community/react-native-releases where the status for each release is discussed in a dedicated GitHub issue.

[kelset]

@scottmas the fix landed in 0.57.8, you can find it in the changelog -> https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#fixed

(the reason why that tag doesn't appear as Hector explained is a mistery to me)

[alexisbronchart]

I'm running 0.57.8 and the issue is still happening.
More importantly the list is not actually inverted as the refreshControl is shown at the top.

[kelset]

@alexisbronchart can you provide a repro?

[alexisbronchart]

@kelset https://github.com/alexisbronchart/invertedListTest

I committed everything in there. When I do a run-ios this is the result I get:

[TylerNRobertson]

Why not just rotate your view 180deg? A simple:

styles = Stylesheet.create({
rotateView: {
transform: [{ rotate: '180deg' }]
}
})

would fix that problem at-least until it's changed in a react native release. I don't foresee any major react native updates before version 0.58 which isn't planned to release until the new year. Although keep an eye out on the version 0.57.x updates.

* Keep in mind this would not fix the issue with the ActivityIndicator appearing at the top instead of bottom when inverted flag is on, it would simple rotate only your empty list component*

[kelset]

Reopening.

I wonder what is missing for it to work properly 🤔

Anyway yes, there won't be any release 'til next year, you can keep up on the react-native-releases repo.

[alexisbronchart]

Alright thanks! FYI for me it looks like 0.57.8 actually _introduced_ the bug. If I revert to 0.57.7 everything is fine.

[eMerzh]

and to add my 2c here : i've tested with @alexisbronchart 's repo and just undoing 30c2fb8 in node_modules and it work as expected

[alexisbronchart]

Looks like this has been reintroduced in 0.59.0 (also in 0.59.1).

updated repro : https://github.com/alexisbronchart/invertedListTest

[kelset]

Hey @alexisbronchart thanks for letting me know - could it be that the revert didn't happen on the 0.59 branch? Or it's something else causing it? 🤔

[alexisbronchart]

@kelset Indeed, I just checked 0.59-stable and the revert didn't happen there. And neither on master.

[kelset]

ok looks like thanks to @michalchudziak we got a new fix for that :)

[pedrobertao]

This is happening to
"react-native": "0.59.8"

System:
React Native Environment Info:
System:
OS: macOS 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 191.00 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.10.0 - ~/.nvm/versions/node/v8.10.0/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v8.10.0/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 27, 28, 29
Build Tools: 27.0.3, 28.0.3, 29.0.0
System Images: android-28 | Google APIs Intel x86 Atom
IDEs:
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.8 => 0.59.8
npmGlobalPackages:
react-native-cli: 2.0.1

[mjmasn]

@kelset it seems this issue is still present in 0.60.5 :thinking:

System:
    OS: Linux 4.15 Ubuntu 16.04.6 LTS (Xenial Xerus)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
    Memory: 1.36 GB / 15.54 GB
    Shell: 4.3.48 - /bin/bash
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.17.3 - /usr/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 22, 24, 26, 27, 28, 29
      Build Tools: 23.0.1, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3, 28.0.2, 28.0.3, 29.0.0
      System Images: android-22 | Google APIs Intel x86 Atom_64, android-24 | Google APIs ARM 64 v8a, android-24 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom_64, android-24 | Google Play Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64
      Android NDK: 17.1.4828580
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: ^0.60.5 => 0.60.5 
  npmGlobalPackages:
    create-react-native-app: 2.0.2
    react-native-cli: 2.0.1
    react-native-create-library: 3.1.2
    react-native-git-upgrade: 0.2.7

[mjmasn]

cc @michalchudziak

[mjmasn]

Workaround if anyone is interested, just apply this style to your list empty component:

transform: [{scaleY: -1}]

[partriv]

seems to be happening to me in RN 0.59.9

[kelset]

Has anyone tried with 61 yet?

[mjmasn]

@kelset in the sense that my scaleY: -1 workaround is still working in 61, I assume this is still an issue in 61.

I can make a new repro repo if necessary though :)

[kelset]

I see - yeah if you have time for a new repro it will be great. I'll reopen this in the meantime

[mjmasn]

@kelset :+1:

https://github.com/mjmasn/InvertedListEmptyComponentIssue

react-native info output

System:
    OS: Linux 4.15 Ubuntu 16.04.6 LTS (Xenial Xerus)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
    Memory: 148.70 MB / 15.54 GB
    Shell: 4.3.48 - /bin/bash
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.17.3 - /usr/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 22, 24, 26, 27, 28, 29
      Build Tools: 23.0.1, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3, 28.0.2, 28.0.3, 29.0.0
      System Images: android-22 | Google APIs Intel x86 Atom_64, android-24 | Google APIs ARM 64 v8a, android-24 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom_64, android-24 | Google Play Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64
      Android NDK: 17.1.4828580
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: ^0.61.1 => 0.61.1 
  npmGlobalPackages:
    create-react-native-app: 2.0.2
    react-native-cli: 2.0.1
    react-native-create-library: 3.1.2
    react-native-git-upgrade: 0.2.7

[zbettenbuk]

If you apply a CSS workaround and the bug gets fixed you may end up with the same issue if you forget to remove the workaround. Maybe it's just better to set inversed = { false } on the component when the data is empty and you'll be safe.

[zbettenbuk]

Btw it's still (or again?) happening in 61.3

[mast]

Still an issue with 63.3