ListEmptyComponent not taking full screen with flex 1 in SectionList #17944
Description
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,
},
});