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"})
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 inverted vertical FlatList in my chat app, which shows newest message in bottom and oldest message in top (likes all other chat applications)
The problem is when I want to add new messages to bottom of my list, FlatList automatically jump to bottom-end of the list!
All I need is to prevent scrolling in this situation
Here is my FlatList:
<FlatList
inverted
style={{flex: 1}}
data={this.state.data}
keyExtractor={(item, index) => item.id}
renderItem={this.renderItem}
/>
And here is the code to add newest messages to list
const data = [ ...newMessages, ...this.state.data ];
this.setState({ data });
Your case look simple but you are adding new message at top then reverse it to bottom last position using inverted flag
Could remove inverted flag and add new item at last simply const data = [...this.state.data, ...newMessages];
<FlatList
style={{flex: 1}}
data={this.state.data}
keyExtractor={(item, index) => item.id}
renderItem={this.renderItem}
/>
const data = [...this.state.data, ...newMessages];
this.setState({ data });
I hope this will work
Put this in the view
<FlatList
data={this.state.data}
ref={ref => {
this.flatListRef = ref;
}}
initialScrollIndex={0}
keyExtractor={item => item.id}
extraData={this.state.refresh}
renderItem={({item, index}) => {
// animation={animation}
return (
<ListItem
inAnimation={inAnimation}
outAnimation={outAnimation}
duration={duration}
easing={easing}
isDeleted={item._isDeleted}
id={item.id}
item={item}
/>
);
}}
`/>`
Run this in a function
this.flatListRef.scrollToIndex({
animated: true,
index: nextProps.indexScroll})
});
You should use a workaround to achieve this. If you check the documentation for FlatList (which extends the props of ScrollView), you'll see that all you need to do is set the scrollEnabled prop to false to disable scrolling. How and where you choose to do this will be up to you since you didn't really post a lot of code. A simple way to handle this would be to use state:
<FlatList
...
scrollEnabled={this.state.scrollEnabled}
/>
In your case you could change the state when the new data is being loaded and change it back when it is rendered.
There is an open issue on Github about this case.
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 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