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:
Related
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:
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'm new in React Native and I've FlatList with some items I want to use code like when I click any item on the flat list a screen open and shows data of that item related.When I click on another item same screen open but with data related to that item.Means resuability.
You have to get the values in renderItem. renderItem is called for each and every item flatlist renders and simultaneously you will get the index also of each item.
<FlatList
style={styles.FlatListStyle}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
data={this.state.data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => {
return (
<Button title = 'hello'
onPress = {() =>alert(item)}
/>
);
}}
/>
<FlatList
data={data}
renderItem={({item}) => (
<Button onPress={() => navigate('Details', {data: item})} />
)}
/>
For navigation purpose, You've to use react-navigation package. Then onPress you can simply call navigation.push method to navigate to a different or same stack(screen).
e.g
navigation.push("SameScreen",{newData:"value"})
I was using...
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <Text>{item.username} {item.name}</Text>}
keyExtractor={({id}, index) => id}
/>
...to render two texts in React Native but now I've got an uri in my json...
How do I render the image in an IM style (thumbnail, username and name)?
Add a renderItem method and then put everything you need in there. Once you make the renderItem method you can throw it into your FlatList.
renderItem({ item }) {
return (
<View>
<Image
source={{uri: item.uri}}
/>
<Text>
{item.username}
</Text>
<Text>
{item.name}
</Text>
</View>
);
}
Then use the method inside the FlatList (the .bind makes sure it stays in the right context)
<FlatList
data={this.state.dataSource}
renderItem={this.renderItem.bind(this)}
keyExtractor={({id}, index) => id}
/>
You can build a component that takes your fields as its props, containing multiple Texts and an Image using your uri as the source. Style this like you would any other component, and then pass that component into renderItem.
You can embed the component immediately to the renderItem like this if the flatlist item is not complicated ( has a lot of component )
<FlatList
data={this.state.dataSource}
renderItem={({item}) => {
<View>
<Image source={{uri: item.uri.image}}/>
<Text>{item.userName}</Text>
<Text>{item.name}</Text>
</View>
}}
keyExtractor={(i) => i.toString()}
/>
react native change color one item in FlatList after click item
<FlatList
data={this.state.posts}
renderItem={this.renderItem.bind(this)}
keyExtractor={(item, index) => index}
ListEmptyComponent={()=> <Spinner />}
onEndReached={this.handleLoadMore.bind(this)}
onEndReachedThreshold={0.5}
initialNumToRender={1}
/>
after render list click on item and change color item:
renderItem({item}){
return (
<Button transparent>
<TouchableOpacity
onPress={()=>this.likeSave(item.id) }
>
<Icon name="heart" size={30} style={{color:likeColor}} />
</TouchableOpacity>
</Button>
}
after click Icon heart change color Icon heart to red
The multi select example in Flatlist React Native documentation can explain how to solve your problem. Check it out here Flatlist React Native Component