React Native Easy Swiper 🚀

React Native Easy Swiper - is a versatile library that simplifies the implementation of swipeable views in React Native. With minimal setup, you can easily create swipeable images and components.

Table of Contents

• React Native Easy Swiper 🚀
  • Table of Contents
  • Installation
  • Demo
  • Core Features
  • Basic Usage
  • Advance Usage
  • Api Documentation
    • Core Props
    • Container Props
    • Pagination Props
  • Contributing
  • License

Installation

To install, you can use npm or yarn:

npm install react-native-easy-swiper

or

yarn add react-native-easy-swiper

Demo

         
Try on snack

• Demo 1
• Demo 2
• Demo 3

Core Features

• Direction - Supports horizontal and vertical swiping direction
• Animations - Supports fade and scale animation
• Pagination - Provides three types of animated pagination styles with lots of customization

Basic Usage

import * as React from 'react';
import Swiper from "react-native-easy-swiper"
const images = [
  "https://www.beatsbydre.com/content/dam/beats/web/product/headphones/solo3-wireless/pdp/product-carousel/black/pc-solo3-black-thrqtr-left.jpg",
  "https://www.beatsbydre.com/content/dam/beats/web/product/headphones/solo3-wireless/pdp/product-carousel/black/pc-solo3-black-thrqtr-right.jpg",
  "https://www.beatsbydre.com/content/dam/beats/web/product/headphones/solo3-wireless/pdp/product-carousel/black/pc-solo3-black-folded.jpg",
];
export default function App() {
  return <Swiper images={images} />
}

Advance Usage

import * as React from 'react';
import { View, Image, StyleSheet } from 'react-native';
import Swiper from 'react-native-easy-swiper';
const images = [
  'https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
  'https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80',
  'https://images.unsplash.com/photo-1608231387042-66d1773070a5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80',
];
export default function App() {
  return (
    <View style={styles.container}>
      <Swiper
        height={400}
        dotBorderStyle={{
          borderColor: 'white',
        }}
        dotColor='white'
      >
        {images.map((image, index) => (
          <Image
            key={index}
            source={{ uri: image }}
            style={
              {
                width: "100%",
                height: "100%",
                resizeMode: "cover"
              }} />
        ))}
      </Swiper>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

Api Documentation

Core Props

Property	Types	Defaults	Description
images	array	null	Array of strings, each of which represents a URL for an image
imagesStyles	ImageStyle	{}	Styles for images
children	ReactNode	null	Either pass images or children*
horizontal	boolean	true	Swiper direction for vertical swiper pass horizontal={false}
animations	array	[]	Can pass multiple animations scale fade

Container Props

Property	Types	Defaults	Description
fullScreen	boolean	false	Takes full screen width and height
height	number	screenHeight	Height of container
width	number	screenWidth	Width of container
containerStyle	ViewStyle	{}	Other styles for container

Pagination Props

Property	Types	Defaults	Description
hideDot	boolean	false	Hides pagination
dotType	dot border dashed	dashed	Pagination style
dotColor	string	lightgray	Dot color
dotPosition	left right top bottom	horizontal ? bottom : left	Postion of dot around container
dotStyle	ViewStyle	null	Styles for dots
dotMargin	number	20	Distance from container depending on dotPosition
dotSpacing	number	8	Gap between dots
activeDotColor	string	black	Active dot color
dotBorderStyle	ViewStyle	{}	Default borderWidth: 1 and borderColor: "#1d1d1d" for dotType: "border"
activeDashSize	number	32	Length of dash for dotType: "dashed"

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library