README

React Native Image Gallery

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

~~LICENSE~~
initialPage Feature

Credits

Thank you so much Unsplash 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.

Usage no npm install needed!