react-native-comic-book-viewer

React Native Comic Book Reader

A comic book viewer for React Native that takes in a list of images and displays them in a sequential manner.

Installation

npm i react-native-comic-book-viewer

Usage

import ComicBookViewer from "react-native-comic-book-viewer";
...
 
<ComicBookViewer
  title={title}
  inputType={inputType}
  pages={pages}
  pubYear={pub_year}
  totalPages={totalPage}
  issueNumber={number}
  onClose={index => console.log(index)}
  imageWidth={720}
  imageHeight={1280}
  onPageChange={index => console.log(index)}
/>

Prop	Type	Optional	Description
title	String	✔️	sets the title of the book
inputType	String	❌	sets the input type of the viewer. Currently only static and uri are supported. (Defaults to uri)
pages	List of Static Image Resources or Network Images	✔️	the reference of the TextInput which is to be attached
pubYear	String	❌	sets the publication year of the issue
totalPages	String	✔️	sets the total number of pages in the issue
issueNumber	String	❌	sets the number of the issue
onClose	Function	✔️	sets the function which is called when the cross button is pressed; 1st argument is the index
vertical	Boolean	❌	sets whether the pages are rendered vertically or horizontally (defaults to false)
inverted	Boolean	❌	sets whether the direction of the pages are inverted or not (defaults to false)
imageWidth	Integer	✔️	sets the width of the image
imageHeight	Integer	✔️	sets the height of the image
onPageChange	Function	❌	sets the function which is called when the page changes; 1st argument is the index
loader	Static Resource	❌	sets a custom loader

Inherited props

The component is built on top of the FlatList component, meaning it inherits from FlatList, VirtualizedList, and ScrollView.

You can use almost all props from this three components, but some of them can't be overriden because it would mess with our implementation's logic.

Here are a few useful props regarding carousel's style and "feeling": scrollEnabled (if you want to disable user scrolling while still being able to use Carousel's methods), showsHorizontalScrollIndicator, overScrollMode (android), bounces (ios), decelerationRate (ios), scrollEventThrottle (ios).

And here are some useful ones for performance optimizations and rendering: initialNumToRender, maxToRenderPerBatch, windowSize, updateCellsBatchingPeriod, extraData, removeClippedSubviews (the latter may have bugs, as stated in RN's doc). The first three are already implemented with default parameters, but you can override them if they don't suit your needs.

Contributing

All contributions including new features, requests, bug fixes are open to everyone. Feel free to open a PR!

License

React Native Comic Book Reader is MIT licensed.