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
Related
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 have a flatList and some views in the scrollView, how to make when the flatList scroll to top, we start to scroll flatList not scrollView.
<ScrollView>
<View>
// some child views
</View>
<FlatList
data={this.props.sourceData}
renderItem={this._renderItem}
/>
<View>
.... // some child views
</View>
the scroll conflict is complex, you can try to move the header views into FlatLIst
ListHeaderComponent, and the footer views into the ListFooterComponent
<FlatList
data={DATA}
ListHeaderComponent={"your header component"}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={item => item.id}
ListFooterComponent={"your bottom views"}
/>
you can also read my question, in the description I give some solution. I hope it can help you
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'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 trying to make a view that I wanted to come over a flatlist so that on clicking it user can reach the top.But the flatlist was covering that element.
<View style={{backgroundColor:'#e6e6e6',flex:1,}>
<View style={{position:'absolute'}}>
<Text>Scroll To Reload</Text>
</View>
<FlatList refreshing={this.state.refresh} onRefresh={()=>this.refreshAllTweets()}
data={tweets}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) =>
<TweetItem onPress={()=>this.goToDetail(item.id)} onImagePress={()=>this.toggleModal(item.id)}
onCommentPress={()=>this.showComments(item.id)} tweet={item}/>}
/>
</View>
Each child in a view is rendered in order, and ultimately stacked on top of each other until all the children are rendered. As the view you want on the top is being rendered first it is going to be at the bottom. Change your code so that the view that you want on the top is rendered last. i.e. move it to the bottom of the view.
<View style={{backgroundColor:'#e6e6e6',flex:1}}>
<FlatList
refreshing={this.state.refresh}
onRefresh={()=>this.refreshAllTweets()}
data={tweets}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => <TweetItem onPress={()=>this.goToDetail(item.id)} onImagePress={()=>this.toggleModal(item.id)} onCommentPress={()=>this.showComments(item.id)} tweet={item}/>}
/>
<View style={{position:'absolute', top: 0}}>
<Text>Scroll To Reload</Text>
</View>
</View>
As the view is now absolutely positioned you may wish to give it an actual position.
Update for comment
Flatlist covering the a element with absolute position
FlatLast has a prop called ListFooterComponent it takes a React Component Class, a render function, or a rendered element. So you could update your FlatList by adding the following prop.
<FlatList
...
ListFooterComponent={
<View>
<Text>Scroll To Reload</Text>
</View>
}
/>
This will attach the view as a footer to the FlatList, so it will be visible when the bottom of your FlatList is reached.
Check out the docs for more information about FlatLists.