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