i have a flat list with horizontal and paging being enable . it basically contains chapters of books . i can access any page i want To store the last page read by user.pagination also occur on font size bases so that when font is large some data move next page. but problem is their should also be an option to navigate to specific chapter which at the moment dont know how to do . can please any give 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()
console.log("itemindex",index);
}}
onMomentumScrollEnd={handleMomentumScrollEnd}
ref={scrollViewRef}
renderItem={({ item }) => (
renderContentPages(item)
)}
/>