React-native: ListEmptyComponent not taking full screen with flex 1 in SectionList

[AlexisLeon]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
  OS: macOS High Sierra 10.13.3
  Node: 8.9.0
  Yarn: 1.3.2
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
  react: ^16.2.0 => 16.2.0
  react-native: 0.53.0 => 0.53.0

Expected Behavior

ListEmptyComponent (my EmptyComponent) has style flex: 1 and should be rendered taking full screen.
If ListHeaderComponent or ListFooterComponent are defined and styled with flex: 1, should render the elements with the same proportion and using the whole screen.

Actual Behavior

ListEmptyComponent (my EmptyComponent) renders using only the space it needs (to fit).

Reproducible Demo

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

const EmptyComponent = ({ title }) => (
  <View style={styles.emptyContainer}>
    <Text style={styles.emptyText}>{title}</Text>
  </View>
);

const App = () => (
  <View style={styles.app}>
    <SectionList
      keyExtractor
      renderItem={({ item }) => <Text>{item.name}</Text>}
      sections={[]}
      ListEmptyComponent={
        <EmptyComponent title="Nothing here, come back later.." />
      }
    />
  </View>
);

const styles = StyleSheet.create({
  app: {
    flex: 1,
  },
  emptyContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  emptyText: {
    fontSize: 30,
  },
});

[hbarylskyi]

having same issue on 0.52.2

[TheDutchCoder]

Same issue on RN 0.53.0

[ghost]

Same issues on RN 0.53.3

[smsmdida]

The same issue on RN 0.54

[kdastan]

Any news ?

[inferusvv]

The same for me. RN 0.54.4
UPD. For me helped this attr: contentContainerStyle={{ flex: 1, alignItems: 'center' }}

[jayesbe]

contentContainerStyle={{ flexGrow: 1 }}

worked better for me.

[smsmdida]

@inferusvv we can't use flex in conentContainerStyle it will disable the scroll

[inferusvv]

@smsmdida Hm, you might be right. In my case I have container without scrolling inside

[hbarylskyi]

Had to use this as a workaround:

contentContainerStyle={[ { flexGrow: 1 } , items.length ? null : { justifyContent: 'center'} ]}

[sagarrabadiya]

same here RN: 0.55.4 the above workaround spoils the entire layout.. 😆

[lahed]

don't work for me

<ScrollView contentContainerStyle={{ flexGrow: 1 }} >
    <View style={{ flex: 1, backgroundColor:'red'}} >
      <Text>asdasdsad</Text>
    </View>
  </ScrollView>

[AntonPuko]

Hey. the fix is merged to master already https://github.com/facebook/react-native/commit/db061ea8c7b78d7e9df4a450c9e7a24d9b2382b4.
And it probably will be released in 0.56

[Iyoss]

@hbarylskyi It doesn't work if your FlatList has a header component.

[taylorkline]

This should be linked to (and hopefully closed by): PR #18206

[kientux]

Is this fixed? I'm still facing this bug in 0.57.

[tobiastornros]

Still an issue with 0.57.1.
contentContainerStyle with flex or flexGrow will destroy header component or makes items in list not clickable.

[Faolain]

As mentioned above still a bug in 0.57

[kcotias]

contentContainerStyle={{ flexGrow: 1 }}

worked better for me.

Worked like a charm! Thanks a lot!

[FirdousNath]

I got success with the simple trick as below

import { Dimensions } from "react-native";
const SCREEN_HEIGHT = Dimensions.get("window").height;

than I declare the empty component

_listEmptyComponent = () => {
    return (
      <View
        style={{
          justifyContent: "center",
          alignItems: "center",
          height: SCREEN_HEIGHT , //responsible for 100% height
          backgroundColor: "#ddd"
        }}
      >
        <Text
          style={{
            justifyContent: "center",
            alignItems: "center",
            fontSize: 20
          }}
        >
          No Contracts Found
        </Text>
      </View>
    );

And at last Flatlist look like :

<FlatList extraData={this.props.contracts} data={this.props.contracts} ListEmptyComponent={this._listEmptyComponent.bind(this)} renderItem={({ item }) => ( <Text>{item.contractName}> <Text/> )} keyExtractor={(item, index) => item.id} />

[riadeveloper]

And this is probably the best solution to fix it

[Salakar]

👋 hey all, this issue has been pretty quiet lately - is this still an issue with the latest version of React Native?

Please let me know if so and I'll re-open.

Thank you.

[elyalvarado]

Hi @Salakar, I can confirm this is still an issue in 0.59.4.

[jayan2019]

contentContainerStyle={{ flexGrow: 1 }} Worked on 0.59, but not in 0.59.4

[Salakar]

@elyalvarado @jayan2019 - thanks for confirming - I've re-opened this issue.

[elyalvarado]

This should be fixed with the merged PR #24339, as soon as it lands in a release version

[cpojer]

Fixed on master.

[junhyukso]

I think it's not workking in 0.60

[Technaur]

I fixed it by wrapping my FlatList in a View with flexGrow: 1 on the View and on the FlatList contentContainerStyle I also set flexGrow: 1 (Working on 0.60.5 for me)

<View style={{ flexGrow: 1 }}> <FlatList contentContainerStyle={{ flexGrow: 1 }} /> </View>

Just make sure that any parent views this component is wrapped in are also flex: 1 (I have noticed that this can have an effect on children components flex)

Hope this helps :)

[jayan2019]

Working on 0.60.5

<FlatList 
      contentContainerStyle={{ flex: 1 }}
      renderItem={({item}) => (<View />)}
      ListEmptyComponent={() => (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center',}}>
           <Text>No Data Found</Text>
      </View>
      )}
/> 

[yishin]

contentContainerStyle={{ height: '100%' }}

[diegoP08]

contentContainerStyle={{minHeight: '100%'}} works for me

[ChenhuaWANG22]

on 0.61.5:

1. below two will work, but it will make items overlapping for list with length >0.
   so something like this may help.
   contentContainerStyle={items.length ? {} : { flex: 1 } }

@jayan2019

Working on 0.60.5

<FlatList 
      contentContainerStyle={{ flex: 1 }}
      renderItem={({item}) => (<View />)}
      ListEmptyComponent={() => (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center',}}>
           <Text>No Data Found</Text>
      </View>
      )}
/> 

@yishin

contentContainerStyle={{ height: '100%' }}

1. below is working correctly for empty list and list with content.
   @diegoP08

   contentContainerStyle={{minHeight: '100%'}} works for me

2. but, at the end, I am still afraid of this issue will arise again once I upgrade RN.
   so, I prefer to wrap FlatList into MyFlatList:

    return (
        data.length > 0
            ? <FlatList
                style={styles.flatList}
                renderItem={({ item, index }) => renderItem(item, index)}
                ItemSeparatorComponent={ItemSeparatorComponent}
                data={data}
                keyExtractor={keyExtractor}
            />
            : <View style={styles.textWrap}>
                <Text style={styles.placeholderText}>
                    {placeholder}
                </Text>
            </View>
    )

[fsobh]

contentContainerStyle={{ height: '100%' }}

Worked like a charm :)