react-native-my-custom-slider/ReadMe.md

React Native custom slider library for seamless horizontal image sliding with snap-to-center functionality, indicators, and full customization support. Perfect for enhancing mobile UI experiences

---


# **React Native Image Slider**

A lightweight and customizable React Native library for creating seamless horizontal image sliders with snap-to-center functionality and indicators. Ideal for enhancing your mobile app's user experience.

---


## **Features**
- Horizontal image slider with smooth scrolling.
- Snap-to-center functionality for precise scrolling.
- Built-in pagination indicators.
- Simple and easy-to-use API.

---


## **Installation**

Install the package via npm:

```bash
npm install react-native-image-slider
```

or using Yarn:

```bash
yarn add react-native-image-slider
```

---


## **Usage**

Here’s how you can use the `ImageSlider` component in your project:

```jsx
import React from 'react';
import { SafeAreaView } from 'react-native';
import { ImageSlider } from 'react-native-image-slider';

const App = () => {
  const images = [
    { image: 'https://cdn.pixabay.com/photo/2024/12/20/11/53/architect-9280053_1280.jpg' },
    { image: 'https://cdn.pixabay.com/photo/2024/11/24/06/33/fireworks-9220290_960_720.jpg' },
    { image: 'https://cdn.pixabay.com/photo/2023/11/26/10/16/christmas-ball-8413268_1280.jpg' },
    { image: 'https://cdn.pixabay.com/photo/2023/11/17/19/07/cookies-8394894_1280.jpg' },
    { image: 'https://cdn.pixabay.com/photo/2024/12/26/08/19/ai-generated-9291566_960_720.png' },
  ];

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ImageSlider images={images} />
    </SafeAreaView>
  );
};

export default App;
```

---


## **Props**

| Prop   | Type  | Required | Description                                   |
|--------|-------|----------|-----------------------------------------------|
| images | Array | Yes      | Array of objects with image URLs (`{ image: string }`). |

---


## **Example Images Prop Format**

```javascript
const images = [
  { image: 'https://example.com/image1.jpg' },
  { image: 'https://example.com/image2.jpg' },
  { image: 'https://example.com/image3.jpg' },
];
```

---


## **Customizing Styles**
Currently, the `ImageSlider` is designed with predefined styles for convenience. You can fork and modify it to fit your custom design requirements.

---


## **Contributing**

Contributions are welcome! Please open an issue or submit a pull request if you have any ideas or improvements.

---


## **License**

This library is licensed under the [MIT License](./LICENSE).

---


Happy coding! 🚀