I am using flatlist to render some items collected from firestore and I have a problem with ListHeaderComponent prop.
The header is placed to the left and I need to place it on the top of the 1st item (see 2nd image below) and when moved it has to be fixed with the first item of the list as the image.
Currently
Horizontal flatlist with ListHeaderComponent on the left
I need to achieve this when scrolling left:
Horizontal flatlist with ListHeaderComponent on the top of 1st item
You can separate header text from FlatList. Use Text apparently to show the header.
EDIT
If you want to scroll text with a list you can use FlatList inside ScrollView. In this case, you may disable scrolling for FlatList. Please check below for detail.
<ScrollView horizontal>
<Text>Header Text</Text>
<FlatList scrollEnabled={false} />
</ScrollView>
Okay, solved! Here's the code:
<ScrollView horizontal={true}
<View>
<Text>Header Text</Text>
<FlatList horizontal={true}
scrollEnabled={false} />
</FlatList>
</View>
</ScrollView>
Thank you #baymax :)
Related
I have some items in a flatList in which I have used itemSeparator component to show the divider between the list but by default flatList render divider in between items, and I need to show the divider to the bottom also, is that any way to do this.
Thanks in advance
I have tried with index but that is not working on the flatList item separator, and I do not want to customise item to show the bottom line of the item. so is it possible with item separator to show the bottom line.
You can wrap your items to CellRendererComponent https://reactnative.dev/docs/virtualizedlist#cellrenderercomponent and apply styling to it
Try just put divider in renderItem function. With this you will have clear YourItem and Divider in any element you have, or you can try use Example #2.
<View style={{flex:1}}>
<FlatList
data={DATA}
renderItem={({item}) => <><YourItem {...item} /><Divider/></>}
contentContainerStyle={{flexGrow:1}}
/>
</View>
Example #2
<View style={{flex:1}}>
<FlatList
data={DATA}
renderItem={renderYourItem}
ListFooterComponent={() => <><ItemSeparatorComponent/><CustomButton /></>}
contentContainerStyle={{flexGrow:1}}
/>
</View>
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 have Question is i want to disable scroll of one item from inside two scroll view like as
<ScrollView horizontal={true}> ////Horizontal ScrollView
<ScrollView> ////Vertical ScrollView
<View /> //// View 1
<View /> //// View 2
</ScrollView>
</ScrollView>
i just want to apply only Vertical scrollView on view 1 not Horizontal
Any one help me how i can achieve this.
please use this for disable scrolling
scrollEnabled={false}
i have found an answer, we can handle it with ref , check for demo link
https://snack.expo.dev/#mirza009/table
I would like to scroll the parent ScrollView to that itemposition when I click Item in FlatList.
Since the actual data is flexible in length, can not calculate the height statically.
<ScrollView>
<View style={{height:300}}>
<Text>Test</Text>
</View>
<FlatList
scrollEnabled={false}
data={[1,2,3,4,5,6,7,8,9,10]}
renderItem={renderItem}
/>
</ScrollView>
ScrollToIndex in a FlatList can not be used because scrollEnabled is false.
I want to use ScrollTo of the parent ScrollView.
But onLayout is used forrenderItem, y is 0.
So I do not know the exact position.
How can I get the value I want?
First of all, Don't use FlatList inside ScrollView, use ListHeaderComponent prop in FlatList
Reference: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent
Is there any possibility to prevent the keyboard from dismissing when scrolling a FlatList?
When using a ScrollView setting the prop "keyboardDismissMode" to "none" is the solution to this problem, but this doesn't work for me at a FlatList...
I use the FlatList inside a self-made component, that is in a Stack-Navigator, while there is a focussed TextInput in its header. I render the FlatList like this:
<View style={{flex: 1}}>
<FlatList
style={{flex: 1}}
data={this.props.data}
keyExtractor={(item, index) => item.id}
renderItem={this.renderItem}
/>
</View>
The renderItem() function:
renderItem = ({item, index}) => (
<TouchableHighlight
style={{paddingVertical: 10}}
onPress={() => {
this.props.onChooseItem(item);
}}
>
<Text numberOfLines={1} >
{item.text}
</Text>
</TouchableHighlight>
)
The docs at the beginning of the reference section says that FlatList "Inherits ScrollView Props, unless it is nested in another FlatList of same orientation."
So I think you can just do use that keyboardDismissMode without encapsulation in a scrollview.
No need of scrollview inside flatlist it will create performance issue.
just add onScrollBeginDrag={Keyboard.dismiss} in flatlist. it will work in android as well iOS while keyboardDismissMode='on-drag' will work only in iOS
You might think about to encapsulate your FlatList in a ScrollView?
Even if this seems to solve the issue, it's NOT a recommended way!
That's because if it force rerendering the whole flatlist, each time you scroll the screen.
You might better try a component like react-native-keyboard-aware-scroll-view
I've found this article with some alternate Ideas to fix it:
How to use KeyboardAvoidingView with FlatList?
Check: https://facebook.github.io/react-native/docs/scrollview#keyboarddismissmode