want to navigate to specific chapter in flatlist paging react natve

43 views Asked by At

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)
     )}/>       
0

There are 0 answers