Skip to content

React Native Easy Swiper is a library that enables easy implementation of swipeable views in React Native, with numerous customization options available.

License

Notifications You must be signed in to change notification settings

K-H-Rayhan/React-Native-Easy-Swiper

Repository files navigation

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

Installation

To install, you can use npm or yarn:

npm install react-native-easy-swiper

or

yarn add react-native-easy-swiper

Demo

React Native Easy Swiper Demo 1     React Native Easy Swiper Demo 2     React Native Easy Swiper Demo 3
Try on snack

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

About

React Native Easy Swiper is a library that enables easy implementation of swipeable views in React Native, with numerous customization options available.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published