I have a flat list with horizontal and paging being enabled. it basically contains chapters of books. I can access any page I want To store the last page read by user.pagination also occurs on font size bases so that when the font is large some data moves next page. but the problem is there should also be an option to navigate to specific chapters which I moment dont know how to do. can please give a solution? much appreciated
const handleMomentumScrollEnd = (event) => {
const offsetX = event.nativeEvent.contentOffset.x;
const offsetY = event.nativeEvent.contentOffset
console.log("off set y",offsetY);
const index = Math.round(offsetX / Dimensions.get('window').width);
console.log("handle momentum",index);
setSelectedPageIndex(index);
console.log("handle momment scroll end");
};
const renderContentPages = (item) => {
const words = item.content.split(' ');
const totalPages = Math.ceil(words.length / wordsPerPage);
return Array.from({ length: totalPages }, (_, pageIndex) => {
const startIdx = pageIndex * wordsPerPage;
const endIdx = startIdx + wordsPerPage;
const pageWords = words.slice(startIdx, endIdx).join(' ');
return (
<View key={pageIndex} style={{width:contentWidth}}>
<Text>{item.title}</Text>
<Text style={ [{padding:30, fontSize:fontSizeOfBookRead,fontWeight:fontWeightOfBookRead }]}>{pageWords}</Text>
<Text>{pageIndex+1 }</Text>
<Text>{item.title.split(" ")[1]}</Text>
</View>
);
});
};
<FlatList
style={{width:contentWidth}}
horizontal
pagingEnabled
data={filteredChapters} //
keyExtractor={(item, index) => item.chapId.toString()}
onMomentumScrollEnd={handleMomentumScrollEnd}
ref={scrollViewRef}
renderItem={({ item }) => (
renderContentPages(item)
)}/>