I have FlatList element:
<FlatList
ref={listRef}
data={data}
onLayout={_onLayoutDimensionsChanged}
keyExtractor={_keyExtractor}
renderItem={_renderItem}
initialScrollIndex={initialScrollIndex}
onViewableItemsChanged={onViewableItemsChanged}
viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
ItemSeparatorComponent={ItemSeparator}
snapToInterval={totalItemWidth}
decelerationRate={0.0}
getItemLayout={(data, index) => ({
length: totalItemWidth,
offset: totalItemWidth * index,
index
})}
initialNumToRender={2}
showsHorizontalScrollIndicator={false}
removeClippedSubviews
bounces
horizontal
/>
Where totalItemWidth is:
totalItemWidth = itemsWidth + SEPARATOR_SIZE;
I would like to achieve that swipe gesture will move one item at maximum but even with deceleration rate set to decelerationRate={0.0} my list is swiping even 2 items if I swipe with my fingers little bit faster than normal swipe's speed is.
Is there any way to prevent double-swipe there? I'm implementing Image Gallery so it is not very user-friendly when a user can swipe two photos at once.
Thank you so much!
Use disableIntervalMomentum={ true } in your FlatList. This will only allow the user to scroll one page at a time horizontally:
<AnimatedFlatList
disableIntervalMomentum={true} // use this
contentInset={{right: wp('20%')}}
showsHorizontalScrollIndicator={false}
ItemSeparatorComponent={separatorComponent}
decelerationRate={0.0}
snapToInterval={ITEM_SIZE}
horizontal={true}
scrollEventThrottle={1}
onScroll={onScrollEvent}
data={filteredData.filteredData}
renderItem={renderItem}
keyExtractor={keyExtractor}
/>
Related
I have a FlatList with a ListHeaderComponent which is a number of buttons in a horizontal scroll. I have made these buttons sticky so that it stays at the top during scroll but is there a way to prevent the scrolled items from showing beneath the buttons as I scroll up? I have tried adding a marginBottom to ListHeaderComponentStyle but it does not work. I want the items to start disappearing just beneath the ListHeaderComponent how do I do this?
<FlatList
style={{marginTop: 50}}
data={data}
ListHeaderComponent={
<FilterOptionButtons/>
}
ListHeaderComponentStyle={{ marginBottom: 50 }} // does not add m
stickyHeaderIndices={[0]}
keyExtractor={(item) => item.id}
renderItem={renderItems}
contentContainerStyle={styles.flatListContainer}
/>
You can add a backgroundColor style to the ListHeaderComponent. Currently it is transparent that's why the items are showing beneath it.
Also, I think it would be better if you just add style to the container of <FilterOptionButtons /> instead of using ListHeaderComponentStyle.
I want to make flat list seem like page layout, is there any way to limit maximum scroll to 1 item in flatlist? or any good way in to make page layout with photo list?
const renderPhoto = ({item:photo})=> {
console.log("rendering photo");
return (
<Photo
{...photo}/>
)
}
<FlatList
style={{width:"100%"}}
showsVerticalScrollIndicator={false}
data={data?.seePhoto}
keyExtractor={item =>""+ item.id}
horizontal={true}
renderItem={renderPhoto}
/>
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 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.
I work on a horizontal list with the component FlatList in the tvOS environment. The problem occurs on a small list of 3 elements, I set the initialScrollIndex equal to the second or last element, the good item is selected. However when I try to go back on a previous item the selection occurs but there is no scroll.
<FlatList
getItemLayout={(data, index) => ({
length: 300,
offset: 300 * index,
index,
})}
initialScrollIndex={this.props.initialScrollIndex}
keyExtractor={this._keyExtractor}
horizontal={this.props.horizontal}
scrollEnabled={true}
extraData={this.state}
ref={list => (this.myScrollView = list)}
data={this.finalData}
removeClippedSubviews={false}
renderItem={this.props.renderRow}
/>
Have you tried changing the properties of the returning object within getItemLayout from length: 300 to width: 300. I would think this should be width rather than length because you are rendering a horizontal FlatList.
getItemLayout={(data, index) => ({
width: 300, //- Here
offset: 300 * index,
index,
}
)}