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.
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 am using react navigation bottom tabs and I customized them.
one problem I have is that, I have a flatlist which is hidden the edge of the list because of the bottom tabs.
I tried to add margin bottom but, since I have rounded tabs it blocks rounded tabs..
when I add margin bottom it goes like this
(flat list has flex:1 by the way)
what should I do ?
current situation..
I want my list to show fully
Simply add marginBottom in your FlatList's containerStyle prop to manage the margin as per your requirement.
For Ex.
<FlatList
data={data}
renderItem={renderItemHandler}
style={{
flex: 1
}}
contentContainerStyle={{
marginBottom: 20
}}
/>
enter image description hereThe structure of my code looks like the following:
<View style={{backgroundColor:'#FFF',flex:1,}}>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{paddingBottom:120}} stickyHeaderIndices={[6]}
>
...some content...
<ScrollView horizontal showsHorizontalScrollIndicator={false}
bounces={false}
scrollEventThrottle={16}
pagingEnabled={...}
decelerationRate={...}
snapToInterval={...}
disableIntervalMomentum={true}
snapToAlignment={"center"}
snapToOffsets={screens}
contentContainerStyle={{flexGrow:1}}
>
{horizontalContent}
</ScrollView>
</ScrollView>
but the content inside the horizontal scroll has different heights and all items become the same height as the largest, which creates a huge scroll space. How can fix this? Help pls
If you can see in my sample
Pink, red and blue bar have a specific height, they don’t grow to the containers max.
The turkey bar has a flex:1 which cause the container grow to the max, to prevent this behavior you could wrap the elements container with an view and pass the flex:0 style as i did for the black bar.
I have a horizontal ScrollView which I want to scroll at the click.
Below is my code:
<TouchableOpacity>
<Text>Left</Text>
</TouchableOpacity>;
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.horizontalView}
>
.....
</ScrollView>;
I want my ScrollView contents to scroll left when user clicks on left. I know there is ref, but I dont know how to use it. I am very new to react-native. I am not able to figure out a solution for this.
create reference for the scroll(make sure you imported useRef):
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.horizontalView}
ref={scrollRef}
>
Add:
const scrollRef = useRef(null);
Add
scrollRef.current.scrollTo({ x: -50})
to your button Press handler
https://facebook.github.io/react-native/docs/scrollview#scrollto
(In this example the scroll will jump 50 units to the left, play with it with positive/negative numbers)
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 :)