Open fredrivett opened 3 years ago
Try using it like this <FlatList ref={flatListRef} contentContainerStyle={{minHeight: 100, borderWidth: 2}} <--------- data={data || []}
Try using it like this <FlatList ref={flatListRef} contentContainerStyle={{minHeight: 100, borderWidth: 2}} <--------- data={data || []}
This is not a solution. This will just add a height to the container of all items not the individual container of each item.
you can use "CellRenderComponent":
import React from "react";
import {
SafeAreaView,
View,
FlatList,
StyleSheet,
Text,
StatusBar,
} from "react-native";
const DATA = [
{
id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
title: "First Item",
},
{
id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
title: "Second Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d72",
title: "Third Item",
},
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const App = () => {
return (
<SafeAreaView style={styles.container}>
<FlatList
contentContainerStyle={{ flexGrow: 1 }}
data={DATA}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={(item) => item.id}
CellRendererComponent={({ children, style, style, onLayout, onFocusCapture}) => (
<View style={[style, {flex: 1}]} children={children}/>
)}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
flex: 1,
backgroundColor: "#f9c2ff",
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.
you can use "CellRenderComponent":
import React from "react"; import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar, } from "react-native"; const DATA = [ { id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba", title: "First Item", }, { id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63", title: "Second Item", }, { id: "58694a0f-3da1-471f-bd96-145571e29d72", title: "Third Item", }, ]; const Item = ({ title }) => ( <View style={styles.item}> <Text style={styles.title}>{title}</Text> </View> ); const App = () => { return ( <SafeAreaView style={styles.container}> <FlatList contentContainerStyle={{ flexGrow: 1 }} data={DATA} renderItem={({ item }) => <Item title={item.title} />} keyExtractor={(item) => item.id} CellRendererComponent={({ children, style, style, onLayout, onFocusCapture}) => ( <View style={[style, {flex: 1}]} children={children}/> )} /> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, marginTop: StatusBar.currentHeight || 0, }, item: { flex: 1, backgroundColor: "#f9c2ff", padding: 20, marginVertical: 8, marginHorizontal: 16, }, title: { fontSize: 32, }, }); export default App;
I can confirm this is working
Description
(Note: This was originally asked on Stack Overflow, but it seems there isn't an existing solution, so filing this as a bug here).
I'm using FlatList to render a bunch of items stacked on top of each other.
This works fine, I've managed to make the
FlatList
itself expand its height to fill the available space but I want theFlatList
items to grow when there is more space available to fill.This was simple to do using ScrollView (simplified pseudocode):
However it doesn't work for FlatList (simplified pseudocode):
I've created an Expo Snack showing both the
ScrollView
successfully growing the elements and theFlatList
failing to do so.There seems to be a lot of discussion online about making the parent
FlatList
full height, but I've struggled to find anything about making theFlatList
items grow to fill the availableFlatList
height.I need to use
FlatList
as I plan to use react-native-draggable-flatlist to implement drag and drop and cannot find an equivalent library that doesn't useFlatList
.A screenshot of the Expo Snack is shown here:
As seen here, it seems the offending issue in the DOM is the
CallRenderer
, theVirtualizedList
is the right height with the right flex styling, andDayItem
is set to grow (and worked fine withScrollView
), but in between there's theCallRenderer
which seems to interrupt the flex relationship between the two:Any help is much appreciated.
React Native version:
Steps To Reproduce
Provide a detailed list of steps that reproduce the issue.
Expected Results
Flexed
FlatList
to also grow in the same way thatScrollView
does, or to provide some way of enabling that same behaviour.Snack, code example, screenshot, or link to a repository:
https://snack.expo.io/@fredrivett/flex-flatlist-items-to-fill-height-not-working