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