react-native-NYTPhotoViewer

React native wrapper for the NYTPhotoViewer iOS library

Build Status

Install

Run npm install react-native-nytphotoviewer --save

iOS

1. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>
2. Go to node_modules ➜ react-native-NYTPhotoViewer ➜ ios ➜ select RCTNYTPhotoViewer.xcodeproj
3. Add RCTNYTPhotoViewer.a to Build Phases -> Link Binary With Libraries

CocoaPods

1. Add pod 'react-native-NYTPhotoViewer', :path => '../node_modules/react-native-nytphotoviewer' to your PodFile

NOTE - Forked Dependency

This module currently requires the use of our own forked version of NYTPhotoViewer. Please add the following to your podfile

pod 'NYTPhotoViewer', :git => 'https://github.com/sprightco/NYTPhotoViewer', :branch => 'develop'

Usage (es6 example)

import NYTPhotoViewer from 'react-native-nytphotoviewer';

class MyComponent extends React.Component {
  
  constructor(props) {
    super(props);
    this.onImagePress = this.onImagePress.bind(this);
    this.onPhotoViewerDismissed = this.onPhotoViewerDismissed.bind(this);
  }
  
  onImagePress() {
    NYTPhotoViewer.once(NYTPhotoViewer.DISMISSED, this.onPhotoViewerDismissed);
    NYTPhotoViewer.addPhotos([this.props.urlOfImage]);
      .then(() => {
        return NYTPhotoViewer.showPhotoViewer()
      })
      .then(() => {
        console.log('Photo viewer is now visible and image has loaded');
      });
  }
  
  onPhotoViewerDismissed() {
    console.log('PhotoViewer has been dismissed');
  }

  render() {
    return (
      <View>
        <TouchableHighlight
          onPress={this.onImagePress}
          activeOpacity={0.5}
          underlayColor='transparent'
        >
          <Image
            source={{uri: this.props.urlOfImage}}
          />
        </TouchableHighlight>
      </View>
    );
  }
}

Events

• addListener(eventType, function()) eventType can be 'NYTPhotoViewer:Dismissed' which is fired when the PhotoViewer is dismissed eventType can be 'NYTPhotoViewer:ActionButtonPress' which is fired when the action button is pressed

• on(eventType, listener) Short cut for addListener

• once(eventType, listener) Event listener fires once and then is removed.

• removeListener(eventType, listener) Removes an event listener

Functions

• NYTPhotoViewer.showPhotoViewer():Promise Shows the photo viewer. Returns a Promise the is fulfilled when photoViewer is visible.

• NYTPhotoViewer.hidePhotoViewer():Promise Hides the photo viewer. Returns a Promise the is fulfilled when photoViewer is no longer visible.

• NYTPhotoViewer.showActionButton() Show the action button in top right of NYTPhotoViewer (action button is visible by default)

• NYTPhotoViewer.hideActionButton() Hide the action button.

• NYTPhotoViewer.addPhotos(sources):Promise Adds photo sources to the photo viewer. sources is an array of uris to an image which is loaded by native module. Promise is resolved when photos have been added to the photo viewer.

• NYTPhotoViewer.clearPhotos():Promise Removes all sources from the photo viewer. Promise is resolved when the sources have been removed.

• NYTPhotoViewer.indexOfPhoto(source):Promise

• NYTPhotoViewer.photoAtIndex(index):Promise

• NYTPhotoViewer.removePhotos(sources):Promise

• NYTPhotoViewer.displayPhotoAtIndex(index):Promise

• NYTPhotoViewer.displayPhotoWithSource(source):Promise