https://github.com/paraboly/react-native-image-gallery

https://github.com/paraboly/react-native-image-gallery

Last synced: 12 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/paraboly/react-native-image-gallery
• Owner: Paraboly
• License: mit
• Created: 2020-08-12T07:31:29.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-08-13T15:24:36.000Z (almost 6 years ago)
• Last Synced: 2025-03-21T21:11:48.303Z (about 1 year ago)
• Language: Java
• Size: 59.2 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/Paraboly/react-native-image-gallery)

[![Fully customizable & easy to use Image Gallery for React Native by Paraboly](https://img.shields.io/badge/-Fully%20customizable%20%26%20easy%20to%20use%20Image%20Gallery%20for%20React%20Native%20by%20Paraboly-lightgrey?style=for-the-badge)](https://github.com/Paraboly/react-native-image-gallery)

[![npm version](https://img.shields.io/npm/v/@paraboly/react-native-image-gallery.svg?style=for-the-badge)](https://www.npmjs.com/package/@paraboly/react-native-image-gallery)

[![npm](https://img.shields.io/npm/dt/@paraboly/react-native-image-gallery.svg?style=for-the-badge)](https://www.npmjs.com/package/@paraboly/react-native-image-gallery)

![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)



  



# Installation

Add the dependency:

```ruby

npm i @paraboly/react-native-image-gallery

```

## Peer Dependencies

###### IMPORTANT! You need install them

```js

"react": ">= 16.x.x",

"react-native": ">= 0.55.x",

"@freakycoder/react-native-image-swiper": ">= 0.1.2"

```

# Usage

## Import

```jsx

import ImageGallery from "@paraboly/react-native-image-gallery";

```

## Fundamental Usage

```jsx

```

## Data Format for Images

You **MUST** use this data format to use ImageGallery.

```jsx

const staticImages = [

  {

    uri:

      "https://images.unsplash.com/photo-1514282401047-d79a71a590e8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1001&q=80",

    dimensions: defaultDimensions,

    caption: "@seefromthesky",

  },

  {

    uri:

      "https://images.unsplash.com/photo-1578922746465-3a80a228f223?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=582&q=80",

    dimensions: defaultDimensions,

    caption: "@yaaniu",

  },

];

```

# Configuration - Props

| Property              |   Type    |  Default  | Description                                                                                                                 |

| --------------------- | :-------: | :-------: | --------------------------------------------------------------------------------------------------------------------------- |

| Container             | component |   View    | set your own container wrapper for the background of the whole ImageGallery. Such as; `LinearGradient` or `ImageBackground` |

| ImageComponent        | component |   Image   | set your own component instead of Image for BackButton                                                                      |

| backButtonImageSource |   image   | undefined | set the back button image                                                                                                   |

| backButtonStyle       |   style   |  default  | change the back button's styling or override                                                                                |

| backButtonImageStyle  |   style   |  default  | change the back button image' styling or override                                                                           |

| onBackButtonPress     | function  | undefined | set your own logic when Back Button is pressed                                                                              |

| totalPageTextStyle    |   style   |  default  | set or override your own styling for total page text                                                                        |

| currentPageTextStyle  |   style   |  default  | set or override your own styling for current page text                                                                      |

## Future Plans

- [x] ~~LICENSE~~

- [ ] `initialPage` Feature

## Credits

Thank you so much [Unsplash](https://unsplash.com/) for every image on the example.

## Author

FreakyCoder, kurayogun@gmail.com

## License

React Native Image Gallery is available under the MIT license. See the LICENSE file for more info.