React Native Infinite Swiper

React Native package that wraps react-native-pager-view and adds the following features:

• Loop
• Zoom

Getting started

Requirements

react-native-pager-view

react-native-pager-view is a peer dependency for this package that you'll need to add to your project.

react-native-modal

react-native-modal is a peer dependency that will be required if you enable zoom.

To install these dependencies run the following command:

yarn add react-native-pager-view react-native-modal

or

npm install react-native-pager-view react-native-modal

Install

yarn add react-native-infinite-swiper

or

npm install react-native-infinite-swiper

Usage

import React from 'react'
import {StyleSheet, View, Text} from 'react-native'
import Paging from 'react-native-infinite-swiper'

const MyPager = () => {
  return (
    <Paging 
      style={styles.viewPager} 
      loop
      zoom
    >
      <View key="1">
        <Text>First page</Text>
      </View>
      <View key="2">
        <Text>Second page</Text>
      </View>
    </Paging>
  )
}

export default MyPager

const styles = StyleSheet.create({
  viewPager: {
    flex: 1,
  },
})

API

Name	Type	Default	Description
width	number		Sets width of rendered child
height	number		Sets height of rendered child
onIndexChanged	State setter		Updates state with new index when user swipes
loop	bool	false	Loops infinitely when reaching the last slide
zoom	bool	false	Opens a modal with the slide when pressed
children	element		Accepts all the children elements to be rendered
orientation	Orientation	horizontal	Set horizontal or vertical scrolling orientation

Roadmap

• Explore possibility to remove dependency from react-native-pager-view and use own pager view solution.
• Add support for custom icon for closing the zoom modal.
• Add support for custom props for the zoom modal component.

Contributing

Pull requests are welcome! Feel free to open issues and submit PRs, we will review them and answer back as fast as possible.

🚀 Authors

• @mp-12301