🖼 A React Native component to display a gallery of images.
Switch branches/tags
Clone or download
Latest commit 078d2af Apr 18, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
ios Added scrollview Nov 15, 2017
lib Thumbnails (#2) Apr 18, 2018
.babelrc Added yaw listener to JS code Nov 14, 2017
.eslintrc Added yaw listener to JS code Nov 14, 2017
.flowconfig Added yaw listener to JS code Nov 14, 2017
.gitattributes Starting to add native libs for iOS Nov 14, 2017
.gitignore Starting to add native libs for iOS Nov 14, 2017
LICENSE Initial commit Nov 7, 2017
README.md Thumbnails (#2) Apr 18, 2018
index.js Added yaw listener to JS code Nov 14, 2017
package-lock.json Improved docs Nov 23, 2017
package.json v0.1.2 Apr 18, 2018
yarn.lock Added yaw listener to JS code Nov 14, 2017

README.md

react-native-interactive-image-gallery

A React Native component to display a gallery of images.

iOS Android

Getting started

$ yarn addreact-native-interactive-image-gallery

Mostly automatic installation

$ react-native link react-native-interactive-image-gallery

Manual installation

iOS

  1. In Xcode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-interactive-image-gallery and add RNIKInteractiveImageLibrary.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNIKInteractiveImageLibrary.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

Android

No additional setup needed.

Usage

import ImageBrowser from 'react-native-interactive-image-gallery'

class Images extends React.PureComponent<Props> {
  render() {
    const imageURLs: Array<Object> = this.props.images.map(
      (img: Object, index: number) => ({
        URI: img.uri,
        thumbnail: img.thumbnail,
        id: String(index),
        title: img.title,
        description: img.description
      })
    )
    return <ImageBrowser images={imageURLs} />
  }
}

API

The <ImageBrowser /> component accepts the following props

Props

Prop Type Mandatory
images Array<ImageSource> Yes
onPressImage Function
topMargin number
closeText string
infoTitleStyles Animated.View.style
infoDescriptionStyles Animated.View.style
enableTilt (experimental, iOS only) boolean

Where ImageSource represents

ImageSource

Name Type Mandatory
id string Yes
URI string Yes
thumbnail string Yes
title string
description string

Aknowledgements

Thanks to Eric Vicenti (https://github.com/ericvicenti) and his talk at React Native EU 2017 called "Practical Hacks for delightful interactions" for the inspiration and the iOS animations present in this library

The main idea of the library and some parts of the code were inspired or taken from his presentation, available at this repo.

License

MIT.

Author

Álvaro Medina Ballester <amedina at apsl.net>

Built with 💛 by APSL.