This package allows you use a cool page curl effect on your React Native apps, it works on Android, iOS, and Web. Check out the demo here

Installation

yarn add react-native-page-flipper

In order for this package to work properly, its built using expo-linear-gradient,react-native-gesture-handler,react-native-linear-gradient, and react-native-reanimated. So make sure you also have these installed,

yarn add expo-linear-gradient react-native-gesture-handler react-native-linear-gradient react-native-reanimated

Notes: react-native-linear-gradient is used for the shadows on iOS and Android, expo-linear-gradient is used on Web. in order to avoid page flickering with images, use react-native-fast-image as your image componenet, and preload the image files

Landscape

Landscape w/ singleImageMode

Portrait

Usage

import PageFlipper from 'react-native-page-flipper';

const App = () => {
    return (
      <PageFlipper
        data={[
            'https://up.mangadudes.com/bleach/18/bleach-9337-e60a76a126bc6ecd3211aeaad51a7dba.jpg',
            'https://up.mangadudes.com/bleach/18/bleach-9338-89fcdb98b22c94781ba2846ea2e562c3.jpg',
            'https://up.mangadudes.com/bleach/18/bleach-9339-5d0e73373eb814d65b18bfa4ca533be8.jpg',
            'https://up.mangadudes.com/bleach/18/bleach-9340-c1220292956ae4cc1df0676e2d01c2e1.jpg',
            'https://up.mangadudes.com/bleach/18/bleach-9341-159bcbae27446cd1d6c964b4b70af020.jpg',
            'https://up.mangadudes.com/bleach/18/bleach-9342-024e1db41ff0ea6e6bc47574b209fda4.jpg',
            'https://up.mangadudes.com/bleach/18/bleach-9344-b14e956a08b6998dd00a61f89db84238.jpg',
        ]}
        pageSize={{
          height: 334, // the size of the images I plan to render (used simply to calculate ratio)
          width: 210,
        }}
        portrait={true}
        renderPage={(data) => <Image source={{ uri: data }} style={{ height: '100%', width: '100%' }} />}
      />
    )
}

export default App;

Props

Prop name	Type	Default value	Description
data	any[]	undefined	The data you want to render, an array of images, or strings for text urls
renderPage	() => Element	undefined	The element to render for each item
pageSize	Object	undefined	page size (used only to calculate ratio)
contentContainerStyle	Object	undefined	style for content container
enabled	bool	true	enables / disables the pan gesture handler of the pages
pressable	bool	true	enables / disables the tapping on the pages to flip
singleImageMode	bool	true	Defines whether each page is treated as a single image or two in one. (see above)
renderLastPage	() => JSX.Element	undefined	optional function to render the last page (only applies when not in portrait mode and have an odd number of pages)
portrait	bool	false	sets portrait mode (viewing a single page at a time, see above)
onFlippedEnd	Function	undefined	Callback for when the page has finished flipping
onFlippedStart	Function	undefined	Callback for when the page has started flipping, (does not trigger when user begins dragging the page, only when manually flipped by tapping the page or calling one of the exposed methods)
onPageDragStart	Function	undefined	Callback for when the page has started dragging (user dragging with finger)
onPageDrag	Function	undefined	Callback for when the page is actively being dragged
onPageDragEnd	Function	undefined	Callback for when the page has finished dragging
onInitialized	Function	undefined	Callback for when the page flipper is initialized
renderContainer	Function	undefined	function to return an element for rendering the container of the viewer
onEndReached	Function	undefined	Callback for when the page flipper reaches the last page

Methods

Method name	Description
goToPage	flips to the page index passed in
previousPage	flips to the previous page
nextPage	flips to the next page