Giter VIP home page Giter VIP logo

sraveshnandan / nandansravesh-react-native-components Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 90 KB

Introducing @react-native-image-slider - a sleek and dynamic image slider component designed for React Native applications. Seamlessly showcase a curated collection of images with customizable pagination dots, smooth animations, and responsive design. Whether you're building a fashion app, showcasing products, or crafting a captivating gallery.

Home Page: https://www.npmjs.com/package/nandansravesh-react-native-components

TypeScript 100.00%
carousel-component component customizable-ui gallery image image-slider mobile-development pagination react-native responsive-design typescript ui user-interface image-showcase infinite-looping

nandansravesh-react-native-components's Introduction

@react-native-image-slider

Introduction

@react-native-image-slider is a versatile and customizable image slider component for React Native applications. It provides an intuitive interface for displaying a series of images in a horizontal slider with optional pagination dots.

Features

  • Supports both remote and local image sources.
  • Customizable dot colors and animation delays.
  • Infinite looping option for continuous image display.
  • Responsive design suitable for various screen sizes.
  • Easy-to-use interface with minimal configuration.

Installation

You can install @react-native-image-slider via npm or yarn:

npm install @react-native-image-slider
# or
yarn add @react-native-image-slider

Usage

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Slider from '@react-native-image-slider';

const App = () => {
  return (
    <View style={styles.container}>
      <Slider
        images={[
          'https://example.com/image1.jpg',
          'https://example.com/image2.jpg',
          'https://example.com/image3.jpg',
        ]}
        dotColor="#FF5733"
        inActiveDotColor="#C0C0C0"
        delay={2000}
        infinite={true}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Props

  • images (optional): An array of image URIs. If not provided, default images will be used.
  • dotColor (optional): Color of active pagination dot. Default is black.
  • inActiveDotColor (optional): Color of inactive pagination dot. Default is gray.
  • delay (optional): Delay in milliseconds for automatic sliding. Default is 1500ms.
  • infinite (optional): Boolean value to enable infinite looping. Default is false.
  • containerStyle (optional): Custom styles for the container View.
  • contentStyle (optional): Custom styles for the image content.

Keywords

React Native, Image Slider, Carousel, Component, TypeScript, Responsive, Pagination, Infinite Looping, Customizable.

License

This project is licensed under the MIT License - see the LICENSE file for details.

nandansravesh-react-native-components's People

Contributors

sraveshnandan avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.