I'm trying to make a flatlist that have exact 4 columns and if the data is lower than 4 items in a row, to show empty cell. How can I make it display empty cell?
Here is my Flatlist:
<FlatList
key={list.title}
data={list.rooms}
style={styles.scheduleContainer}
horizontal={false}
numColumns={4}
ItemSeparatorComponent={this.renderItemSeparator}
renderItem={({ item, index }) => {
console.log('item', item.room);
return (
<View style={styles.elementsContainer}>
<Text>
{item.room.data.name}
</Text>
</View>
);
}}
keyExtractor={(item, index) => String(index)}
/>
And here is the result:
Here is the result I'm looking for:
Related
I'm trying to display a FlatList of items, with each item containing a FlatList of identical buttons. When one of the buttons is clicked, I want to receive both the parent FlatList item and the value the button corresponds to.
I've tried the following method with no success (timeItem is undefined):
timeSlotsKeyExtractor = (item, index) => item.toString();
timeSlots =
[
'8:00', '10:00', '12:00', '14:00', '16:00', '18:00'
];
renderDate = ({ item }) => {
return (
<View>
<Text>{item.date}</Text>
<FlatList
data={this.timeSlots}
keyExtractor={this.timeSlotsKeyExtractor}
renderItem={({ timeItem }) => (
<TouchableOpacity onPress={() => this.addTimeSlot(item, timeItem)}>
<View><Text>{timeItem}</Text></View>
</TouchableOpacity>
)}
horizontal={true} />
</View>
)
}
addTimeSlot(item, timeItem) {
console.log(item)
console.log(timeItem)
}
I'm aware of SectionLists, and as such also attempted to make each item of my parent FlatList an object containing both the item and the array of timeSlots, however, I wasn't sure how to go about getting the header in the renderItem section:
Screenshot of SectionList code:
<SectionList
sections={this.state.weekDates}
renderSectionHeader={({ section }) => (
<Text>{section.date} </Text>
)}
renderItem={({ item }) => (
<Text>
{iten.date}
{item.timeSlots}
</Text>
)}
keyExtractor={(item, index) => index}
/>
Where am I going wrong with these approaches? I'm fairly new to React Native so there's a good chance I've missed something really simple.
I have a flatlist with some styles on the outer containers as follows.
<View style={containerStyle}>
// more jsx components come here
<View style={resultContainerStyle}>
<FlatList
data={results}
keyExtractor={(item) => (item.id && item.id.toString())}
renderItem={({ item, index }) => (
<ListItem
item={item}
selectItem={selectItem}
/>
)}
/>
</View>
</View>
The issue is that the last values of the list go beyond the view of the screen and there is no way to view it unless a fixed height is put on the parent container. Is it possible to do this without a fixed height.
A SafeAreaView can be used to limit the view to the "safe" areas of the screen(avoiding the notch and curved bottom. Checkout the following example
<SafeAreaView style={containerStyle}>
// more jsx components come here
<View style={resultContainerStyle}>
<FlatList
data={results}
keyExtractor={(item) => (item.id && item.id.toString())}
renderItem={({ item, index }) => (
<ListItem
item={item}
selectItem={selectItem}
/>
)}
/>
</View>
</SafeAreaView>
more examples can be found at the react native docs.
i'm new in react native. i'm trying to save the item of flatlist. The flatlist item is Coming from autocomplete. i have diplay the autocomplete item in flatlist . i want to save the displayed item in asyncstorage.
I tried to save the data i have made one databaseHelper class.
<FlatList
keyExtractor={(item, index) => index}
style={{flex:1}}
data={this.state.timezoneArray}
renderItem={({item}) => <Text style={{padding:10,borderBottomWidth:1,borderBottomColor:"#000000"}}>{item}</Text>}
/>
) : (
<Text style={styles.infoText}>Enter Location</Text>
)}
This is my actual screen:
I have the following flat list in react native with the following
items.
key
name
type
Now i also have the following renderItem function that is used to render
the elements of the flatlist.
renderItem={({ item }) => (
<View>
<View style={styles.navBarLeftButton}>
<Avatar
medium
rounded
source={{uri:item.name}}
activeOpacity={0.7}
onPress={() => console.log(this.state.data)}
/>
<Text style={styles.textbutton}>{item.type}</Text>
<Text>{item.description}</Text>
<Text>{item.request} <Emoji name={item.request} style={{fontSize: 15}} />
<Emoji name="pray" style={{fontSize: 15}} /></Text>
</View>
</View>
)}
I want to render a different render function base on the item key of the flatlist
Is there away i can do conditional rendering with react native flatlist base
on key?
The renderItem prop for Flatlist can accept 2 arguments, the second being index, so you can do something like
renderItem={({ item, index })=>{
if(index = 0){
//do something
}
}}
Then just throw in a switch or some if statements and you can render conditionally.
Based on 'theme' values in variable DATA (as keys) FlatList renderItem prop is conditionally accepting different Views/Components returned by separate functions
<FlatList
data={DATA}
renderItem={({ item, index }) => {
if (item.theme === 1) {
return this.renderTheme1({ item });
}
return this.renderTheme2({ item });
}}
keyExtractor={item => item.id}
/>
This works for me:
renderItem={({ item }) => (
item.isDeleted == false ?
<View>
<Activity isRunning={item.isRunning} />
</View>
: null
)}
keyExtractor={(item) => item.title}
/>
Are you looking to return two different template sets? Something like:
renderItem={({item, index}) => {
if (index == 0) {
return <View style={{flex: 1, flexDirection: 'row'}}>
<Image source={item.image} style={styles.flatList_imageView} resizeMode="contain"/>
</View>
}
return <View style={{flex: 1, flexDirection: 'row'}}>
<Text>{item.key}</Text>
</View>
}
I think it will help you
renderItem={({ item, index })=>
<View>
{index == 0 ? <Text>Some Text</Text> : <Text>Some Text</Text> }
</View>
}}
I'm trying to make something like this:
The problem: The project was built with immutablejs and according to React Native Docs, I can't use FlatList thus I can't use numColumns props feature of that component.
AFAIK, my only choice is to use VirtualizedList as the docs points out, but I can't figure out how to display the cells as a grid as shown above.
I've already tried to add style props in both cell and view wrapper, but none of the code used to align the cells, like the picture I posted, is ignored. In fact it was showing perfect when I was using ScrollView, but due the HUGE lag I'm moving the code to VirtualizedList.
Any help? Anything would be welcome, I already digged a lot on Google but I can't find anything about this.
Some sample code:
<View>
<VirtualizedList
data={props.schedules}
getItem={(data, index) => data.get(index)}
getItemCount={(data) => data.size}
keyExtractor={(item, index) => index.toString()}
CellRendererComponent={({children, item}) => {
return (
<View style={{any flexbox code gets ignored here}}>
{children}
</View>
)}}
renderItem={({ item, index }) => (
<Text style={{also here}} key={index}>{item.get('schedule')}</Text>
)}
/>
</View>
Answering my own question:
I got it working by copying the FlatList.js source code from react-native repo.
Here's an example code:
<VirtualizedList
data={props.schedules}
getItem={(data, index) => {
let items = []
for (let i = 0; i < 4; i++) {
const item = data.get(index * 4 + i)
item && items.push(item)
}
return items
}}
getItemCount={(data) => data.size}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => {
return (
<View key={index} style={{flexDirection: 'row'}}>
{item.map((elem, i) => (
<View key={i}>
<Text key={i}>{elem.get('horario')}</Text>
</View>
))}
</View>
)
}}
/>
The number 4 is for the number of columns. The key parts are in the getItem and adding flexDirection: 'row' at renderItem in the View component.