React Native Comic Book Reader

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 | :heavy_check_mark: | sets the title of the book | | inputType | String | :x: | 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 | :heavy_check_mark: | the reference of the TextInput which is to be attached | | pubYear | String | :x: | sets the publication year of the issue | | totalPages | String | :heavy_check_mark: | sets the total number of pages in the issue | | issueNumber | String | :x: | sets the number of the issue | | onClose | Function | :heavy_check_mark: | sets the function which is called when the cross button is pressed; 1st argument is the index | | vertical | Boolean | :x: | sets whether the pages are rendered vertically or horizontally (defaults to false) | | inverted | Boolean | :x: | sets whether the direction of the pages are inverted or not (defaults to false) | | imageWidth | Integer | :heavy_check_mark: | sets the width of the image | | imageHeight | Integer | :heavy_check_mark: | sets the height of the image | | onPageChange | Function | :x: | sets the function which is called when the page changes; 1st argument is the index | | loader | Static Resource | :x: | 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.