Open rKatex opened 1 year ago
can you leave an expo snack code example of the problem?
Hi, we're facing exactly the same issue. Snack: https://snack.expo.dev/@picnic-harry/flashlist-listemptycomponent-flex-repro
There are existing props for ListHeaderComponentStyle
and ListFooterComponentStyle
. If you don't plan on supporting arbitrary contentContainerStyle
, then a corresponding ListEmptyComponentStyle
prop would fix this problem.
Facing this issue as well, currently working around it by manually setting the height of my Empty component to a percentage of the screen height, not ideal.
Having the same issue here.
Flex:1 on contentContainerStyle should fix it but it wont let me use it
Having the same issue.
Similar problem here. I need to center the ListEmptyComponent. Before migrating to FlashList contentContainerStyle={{ flexGrow: 1 }}
fixed the issue.
the same issues here and using onLayout by view to measure height is so slow
Flashlist doesn't support this, they only support a few basic padding properties, I think with EmptyComponent you should set a fixed height
Similar problem here. I need to center the ListEmptyComponent. Before migrating to FlashList
contentContainerStyle={{ flexGrow: 1 }}
fixed the issue.
exactly the same here
I really needed this one. Please have it!!!!
Same problem here. :-/
Same problem here. :-/
have you tried checking if you list data is empty then displaying the empty component manually?
Do we have any solution for this?
if we use the Flatlist component from react Native is just add
contentContainerStyle={{ flexGrow: 1 }}
can we implement something similar?
need this please.
I'm having the same problem
Any update?
Same Issue Work around for now. Used scrollview to mimic list empty component with pull to refresh (Refresh Control).
if (data.length === 0) {
return (
<EmptyView
isFetching={isFetching}
isLoading={isLoading}
refetch={refetch}
/>
);
}
else{
return <FlashList/>
EmptyView.tsx
const EmptyView = (emptyProps: IEmptyViewProps) => {
const { isLoading, isFetching, refetch } = emptyProps;
return (
<ScrollView
contentContainerStyle={{flexGrow: 1}}
style={styles.scrollView}
refreshControl={
<RefreshControl
refreshing={isLoading || isFetching}
onRefresh={refetch}
/>
}>
<View style={styles.loader}>
<Text>
Empty View Message
</Text>
</View>
</ScrollView>
);
};
Same Issue Work around for now. Used scrollview to mimic list empty component with pull to refresh (Refresh Control).
if (data.length === 0) { return ( <EmptyView isFetching={isFetching} isLoading={isLoading} refetch={refetch} /> ); } else{ return <FlashList/>
EmptyView.tsx
const EmptyView = (emptyProps: IEmptyViewProps) => { const { isLoading, isFetching, refetch } = emptyProps; return ( <ScrollView contentContainerStyle={{flexGrow: 1}} style={styles.scrollView} refreshControl={ <RefreshControl refreshing={isLoading || isFetching} onRefresh={refetch} /> }> <View style={styles.loader}> <Text> Empty View Message </Text> </View> </ScrollView> ); };
This works perfectly! I can't imagine why it skipped my mind. Thanks 👍
same issue.
pls fix this lol
same issue. i decided to wrap EmptyView with View.
import LottieView from "lottie-react-native";
import { Dimensions, View } from "react-native";
import { AppBarHeight, StatusBarHeight } from "./Global";
export default function EmptyView() {
const {height, width} = Dimensions.get('window');
return (
<View
style={{
width: "100%",
justifyContent: "center",
height: height-AppBarHeight-StatusBarHeight,
}}
>
<LottieView
style={{
alignSelf: "center",
width: 200,
height: 200,
}}
source={require("../assets/empty_box.json")}
autoPlay
loop
/>
</View>
);
}
Anyone has a real solution for this problem ? ListEmptyComponent is unusable right now.
Same Issue, I can't use another component if data is empty. I need ListHeaderComponent from it. Please fix it
It is a common use-case to allow the empty content to be centered I guess. Currently I'm re-using the estimatedListSize
but it's not alway's perfectly centered of course.
@naqvitalha Can we please get an official response on this?
It is an extremely common use case to want to center the ListEmptyComponent
in the total possible size of the list view.
The way to achieve this with FlatList
is flexGrow
on contentContainerStyle
. We either need a way to achieve 1:1 behaviour, or the docs should explicitly mention this issue, and that FlashList
does not achieve parity in terms of styling.
i have same issue, but how to handle keyboard open or closed to center in remaining place ? this is a very common case
+1
same here, it require attention
If you just want to render an empty view fitted to the height (without scrolling), you can cheat by using scrollEnabled based on data like this:
<FlashList data={data} renderItem={renderItem} scrollEnabled={!!data?.length} ListEmptyComponent={() => <View style={{ height: Dimensions.get('window').height }}>{/* Your content */}</View>} />
+1
Current behavior
I need to render a
ListEmptyComponent
which uses the full height of the current view. To make this work with react nativesFlatList
I can apply acontentContainerStyle
withflex: 1
. Sadly this won't work with theFlashList
as it doesn't allowflex
in acontentContainerStyle
.flex
not allowed for forcontentContainerStyle
?contentContainerStyle
?Expected behavior
There should be the possibility to render
ListEmptyComponent
withflex: 1 / height: "100%"
To Reproduce
Use any
ListFooterComponent
and try to fill the whole view with it.Platform:
Environment