I am trying to make some header to stick to the top of the SectionList but it seems like the stickyHeaderIndices={[0]} doesn't work as expected. This is the section list:
<SectionList
ref={(ref) => (productsSectionListRef = ref)}
stickyHeaderIndices={[0]}
ListHeaderComponent={_renderHeader()}
contentContainerStyle={[style.products_container]}
sections={productListSections}
renderItem={({item, section}: {item: string; section: any}) => {
return _renderProduct(item);
}}
stickySectionHeadersEnabled={false}
renderSectionHeader={({section}) => {
return _renderProductHeader(section.title);
}}
keyExtractor={(item) => item}
showsVerticalScrollIndicator={false}
viewabilityConfig={{
itemVisiblePercentThreshold: 50,
}}
onViewableItemsChanged={_onViewableItemsChanged}
bounces={false}
scrollEventThrottle={4}
initialNumToRender={productListSections.length}
scrollEnabled={scrollEnabled}
removeClippedSubviews={true}/>
I tryed to put the header outside the section list but the header it's bigger and I cannot scroll inside of that header component.
stickyHeaderIndices={[0]}
will make first item in flatlist sticky to the top
if you change to
stickyHeaderIndices={[5]}
the 4th item will stick to top after the item reached to the top when scrolled
item in
ListHeaderComponent={_renderHeader()}
will be on top of the flatlist but not act as item inside flatlist its independent
Related
I have a horizontal FlatList in my React Native iOS app. At the bottom of the screen, the FlatList is displayed with 5 items. If you click on the last item (scrolled all the way to the right), the screen will refresh and the FlatList will remain scrolled to the right. How can I get the FlatList to always reset the scroll position (to scroll from the beginning) when the screen changes?
Edit: I have a feeling that my screen is not actually "refreshing" but rather merely changing the data shown on the screen. In this case I may need to trigger a refresh of the screen somehow to cause the FlatList to reset the scroll position? Any help would be greatly appreciated!
const HorizontalScroll = ({items, handlePress}) => {
const renderItem = ({item}) => {
const itemData = { color: item.color, title: item.title };
return <HorizontalItem itemData={itemData} handlePress={handlePress} />;
};
return (
<View style={styles.container}>
<FlatList
data={items}
renderItem={renderItem}
horizontal={true}
numColumns={1}
key={(item) => item.id}
initialNumToRender={5}
scrollToIndex={0}
ItemSeparatorComponent={() => <View style={{width: 8}} />}>
</FlatList>
</View>
);
};
I solved this problem by forcing a refresh of the component. Specifically, I added a key prop to my component so that every time the key value changes, it remounts the component. This causes the FlatList to reset the scroll position to the beginning.
<View key={items[0].title}>
{content}
</View>
I have a horizontal FlatList in my app
there's many items in the FlatList
each item is a text , with no exact width or characters length
so , no fixed width exist
how to scroll to a certain element in this case
scrollToIndex and scrollToOffset depends on giving a width which I don't have
I intend to use scrollToItem
per documentation , it requires the item prop
'item' (object) - The item to scroll to. Required.
what's this item prob is about ?
it is not clear in the documentation and no examples online
Try this way
let data = [ {key: 0, text: “A”}, {key: 0, text: “B”} ]
<FlatList
// Do something when animation ended
onMomentumScrollEnd={(e) => this.onScrollEnd(e)}
showsHorizontalScrollIndicator={false}
data={this.state.data}
keyExtractor={(item) => item.key}
getItemLayout={(data, index) => (
// Max 5 items visibles at once
{length: Dimensions.get('window').width / 5, offset: Dimensions.get('window').width / 5 * index, index}
)}
horizontal
// Here is the magic : snap to the center of an item
snapToAlignment={'center'}
// Defines here the interval between to item (basically the width of an item with margins)
snapToInterval={Dimensions.get('window').width / 5}
renderItem={ ({item, index}) =>
<TouchableOpacity
onPress={() => this.scrollToIndex(/* scroll to that item */)} <!— index ->
style={styles.cell}>
<Text>{item.text}</Text>
</TouchableOpacity>
}
/>
i currently try to make some scroll view with tab bar.
and if i scroll down, tab bar is fixed on the top.
this is the example i want.
https://i.stack.imgur.com/ITZHJ.gif
if you know how to make this or NPM i can use, please let me know if you have it.
thanks for reading!!
this is i try by my self but failed..
<Animated.ScrollView
scrollEventThrottle={5}
showsVerticalScrollIndicator={false}
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: this.nScroll}}}],
{useNativeDriver: true},
)}
style={{zIndex: 0}}>
<Animated.View
style={{
transform: [
{translateY: Animated.multiply(this.nScroll, 0.65)},
{scale: this.imgScale},
],
backgroundColor: THEME_COLOR,
}}>
You might use FlatList that have stickyHeaderIndices={[0]} for keeping ListHeaderComponent sticky, and the data passed in depend on tab state
const [ tab, setTab ] = useState(1)
// you should add at least keyExtractor and renderItem props...
<FlatList
stickyHeaderIndices={[0]}
ListHeaderComponent={ <Tabs setTab={setTab} /> } // create `Tabs` component of the nav, use `props.setTab` to change `tab` state
data={ tab == 1 ? tab1data : tab2data } // assuming tab1data is array
/>
more about FlatList https://reactnative.dev/docs/flatlist
I have a FlatList component that renders 20 items. When I load up the page in React Native, my FlatList shows 10 items. Once a render has occurred, the next 10 are loaded.
<FlatList
data={data}
keyExtractor={(item, i) => String(i)}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.boardList}
renderItem={({ item, index }) => (
<Item {...item}/>
)}
/>
data is simply an Array of JSON objects.
You should set following properties
initialNumToRender={20}
maxToRenderPerBatch={20}
As the default is 10
It may be better to use ScrollView and .map(() = > {}) ?
Add style={{ flex: 1 }} in FlatList
I have items in diffrent heights (250 or 150) inside a FlatList,
When iterate each item and append the state of the dataSrouce for the FlatList everything renders alright, but if I want to avoid the "appending" affect and set the dataSrouce to all of the items at once, it seem FlatList have a wierd bug where items are not getting their right height (There is a blank space on the botton where the item had suppose to fill it).
Tried put "flexGrow:1" on the FlatList, tried the "initialNumToRender" property,
Tried to fix height of the each Item in the view.
Container of the FlatList is "flex:1".
My FlatList:
render() {
const _this = this;
const { loading } = this.state;
return (
<Components.ViewContainer>
{this.printTopHeader()}
{loading ? (
<ActivityIndicator size={25} />
) : (
<FlatList
style={{ flex: 1 }}
removeClippedSubviews={true} //tried with and without
data={this.state.posts}
extraData={this.state.posts} //tried with and without
renderItem={({ item }) => (
<HomeCard
post={item}
/>
)}
keyExtractor={(item, index) => item.key}
/>
)}
</Components.ViewContainer>
);
}
Components.ViewContainer:
const ViewContainer = styled.View`
flex:1;
`;
HomeCard:
render() {
const { theme, showActions } = this.props;
const {
imageUrl,
user,
title,
selectedPlace,
textColor,
backgroundColor
} = this.props.post;
return (
<Components.ContainerView>
...
</Components.ContainerView>
);
}
export default withTheme(HomeCard); // styled-components implementation
The issue were caused by a matter of wrong styling applied to the child elements,
By better understand how FlexBox works I managed to figure that I was missing a flex: 1 attribute on the list elements, and therefore the items styling didn't calculated correctly.