Installation

Add the dependency:

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

Peer Dependencies

IMPORTANT! You need install them

"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"@freakycoder/react-native-image-swiper": ">= 0.1.2"

Usage

Import

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

Fundamental Usage

<ImageGallery
  initialPage={0}
  images={staticImages}
  backButtonImageSource={backButtonImage}
/>

Data Format for Images

You MUST use this data format to use ImageGallery.

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 for every image on the example.

Author

FreakyCoder, [email protected]

License

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