-
Notifications
You must be signed in to change notification settings - Fork 365
contentContainerStyle flexGrow: 1 to allow center ListEmptyComponent #517
-
Problem
I have ListEmptyComponent component, which uses style flex: 1, justifyContent: 'center' to place it inside center of users viewport.
https://snack.expo.dev/7MSfUAke7
My workaround
To allow empty list container take remaining space I had to patch flash-list and recyclerlistview with flexGrow: 1 in these places:
https://github.com/Shopify/flash-list/blob/main/src/FlashList.tsx#L327
https://github.com/Flipkart/recyclerlistview/blob/master/src/platform/reactnative/scrollcomponent/ScrollComponent.tsx#L86
As default <Flatlist /> allows contentContainerStyle={{ flexGrow: 1 }} and solves such problem, consider to support flexGrow in contentContainerStyle of Flashlist
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 48 -
😕 1
Replies: 28 comments 6 replies
-
Would like to bump this as it deserve more attention.
i have the same use case with yours on ListEmptyComponent, and need to apply flexGrow to fill the available space on screen.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 10
-
Please, also add the
columnWrapperStyle prop
When we have two or more columns in our layout
Beta Was this translation helpful? Give feedback.
All reactions
-
I think issue is more efficient to point the problem, unfortunately
Beta Was this translation helpful? Give feedback.
All reactions
-
This is a big issue that should be fixed!
Beta Was this translation helpful? Give feedback.
All reactions
-
i think you could use CellRendererComponent for that
Beta Was this translation helpful? Give feedback.
All reactions
-
I just encountered the same problem. I want to center my ListEmptyComponent
Beta Was this translation helpful? Give feedback.
All reactions
-
Hello, this solution works for me:
const [height, setHeight] = useState<number>(0);
<View
style={{ flex:1 }}
onLayout={(event) => setHeight(event.nativeEvent.layout.height)}>
<FlashList
...
ListEmptyComponent={
<View
style={{
height,
alignItems: 'center',
justifyContent: 'center'
}}>
<Text>Text Center</Text>
</View>
}
/>
</View>
Hope it helps!
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 4
-
yes it works. but it feels not natural.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
how can we add custom styling in this contentContainerStyle?
like this
contentContainerStyle={[ styles.containerStyle, customContainerStyle, ]}
Beta Was this translation helpful? Give feedback.
All reactions
-
Thanks for this. Just a few notes from trying it:
- it's a bit messier if you use a HeaderComponent: its height will be included in
event.nativeEvent.layout.height, and yourListEmptyComponentwill end up being taller than desired. I didn't thoroughly test it but one can probably work around this by applying the same technique to the header to get its height, then subtract that from the total height. For instance:
const [totalHeight, setTotalHeight] = useState<number>(0); const [headerHeight, setHeaderHeight] = useState<number>(0); <View style={{ flex:1 }} onLayout={(event) => setTotalHeight(event.nativeEvent.layout.height)}> <FlashList /*...*/ HeaderComponent={() => ( <View onLayout={(event) => setHeaderHeight(event.nativeEvent.layout.height)}> <MyHeaderComponent /> </View> )} ListEmptyComponent={ <View style={{ height: totalHeight - headerHeight, ...styleThatCentersMyEmptyComponent }}> <MyEmptyComponent /> </View> } /> </View>
I couldn't use that because my header has a "Read More" component in it that changes its height, and this workaround causes it to malfunction.
If your header component has a known constant height it can work, but then you can also just subtract that known height from the total height, without getting it through onLayout.
- Surely people thought about it but I haven't seen it mentioned. Another workaround, if applicable, could be a simple condition. For instance:
return !data || data.length === 0 ? ( <View style={styleThatCentersMyEmptyComponent}> <MyEmptyComponent /> </View> ) : ( <FlashList /* your usual props */ /> )
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 2
-
I also need flexGrow on contentContainerStyle property render items from the top of an inverted Flashlist.
Beta Was this translation helpful? Give feedback.
All reactions
-
+1 I also need this added
Beta Was this translation helpful? Give feedback.
All reactions
-
+1
Beta Was this translation helpful? Give feedback.
All reactions
-
@naqvitalha does this worth to take a look?
Beta Was this translation helpful? Give feedback.
All reactions
-
We recently merged Flashlist support to react-native-collapsible-tab-view and ran into a similar isssue:
PedroBern/react-native-collapsible-tab-view#335
We were using minHeight previously, but I think flexGrow would also work.
Beta Was this translation helpful? Give feedback.
All reactions
-
any updates on this?
Beta Was this translation helpful? Give feedback.
All reactions
-
any updates on this one? 🙂
Beta Was this translation helpful? Give feedback.
All reactions
-
damn! not fixed
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1 -
👎 2
-
F**, I'm facing this issue and the @tomasmozeris does not work anymore in v1.5.
Beta Was this translation helpful? Give feedback.
All reactions
-
What a complex bug to fix, this may be a blocker to migrate from FlatList to FlashList
Beta Was this translation helpful? Give feedback.
All reactions
-
Any updates on this?
Beta Was this translation helpful? Give feedback.
All reactions
-
+1
Beta Was this translation helpful? Give feedback.
All reactions
-
+1
A workaround for now is just to conditionally render.
Beta Was this translation helpful? Give feedback.
All reactions
-
Hope it will be supported soon
Beta Was this translation helpful? Give feedback.
All reactions
-
+1
Beta Was this translation helpful? Give feedback.
All reactions
-
addressed in #1206
Beta Was this translation helpful? Give feedback.
All reactions
-
🎉 2 -
👀 3
-
same problem using FlashList 1.5.0
Beta Was this translation helpful? Give feedback.
All reactions
-
For those that use nativewind, just add "my-auto" on "contentContainerClassName":
contentContainerClassName="my-auto"
or create a CSS class:
.my-auto {
margin-top: auto;
margin-bottom: auto;
}
and add on contentContainerClassName
Beta Was this translation helpful? Give feedback.
All reactions
-
I was able to overcome this by adding minHeight: 100% to ListEmptyComponent's style prop and by adding the following to FlashList props:
overrideProps={{
contentContainerStyle: { flexGrow: 1 }
}}
I'm using FlashList v1.7.2.
Beta Was this translation helpful? Give feedback.
All reactions
-
❤️ 2
-
Thank Guy!
Beta Was this translation helpful? Give feedback.
All reactions
-
overrideProps={{
contentContainerStyle: { flexGrow: 1,backgroundColor:"green" }
}}
ListEmptyComponent height = 100%
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 2
-
This is worked for my implementation :) Thank you!
Beta Was this translation helpful? Give feedback.
All reactions
-
update please
Beta Was this translation helpful? Give feedback.
All reactions
-
same issue here
Beta Was this translation helpful? Give feedback.