Skip to content

cdvntr/react-native-asset-thumbnail

Repository files navigation

react-native-asset-thumbnail npm version

Native module for generating thumbnails with asset uri (IOS Only)

*NOTE: This module was built when we weren't able to show video thumbnails which we fetched from the cameraRoll, and with the asset uri returned from the great react-native-camera module when we recorderd videos.

Installation

  1. npm install react-native-asset-thumbnail --save
  2. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  3. Go to node_modulesreact-native-asset-thumbnail and add RNAssetThumbnail.xcodeproj
  4. In XCode, in the project navigator, select your project. Add libRNAssetThumbnail.a to your project's Build PhasesLink Binary With Libraries
  5. Run your project (Cmd+R)

Usage

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  ScrollView,
  Image,
  CameraRoll
} from 'react-native';
import RNAssetThumbnail from  'react-native-asset-thumbnail';

class Example extends Component {

  constructor(props, context, ...args) {
    super(props, context, ...args);
    this.state = {thumbnails: []};
  }

  componentDidMount() {
    let promiseArr = [];

    CameraRoll.getPhotos({assetType: 'Videos', first: 10}).then((data) => {
      assets = data.edges;
      assets.map((asset, index) => { 
        let media = asset.node.image;
        promiseArr.push(RNAssetThumbnail.generateThumbnail(media.uri, 70, 70));
      });
      Promise.all(promiseArr).then(thumbnails => { 
        this.setState({thumbnails});
      });
    });
  }

  renderThumbnails(thumbnail, index) {
    return <Image key={index} style={styles.imageStyle} source={{uri:thumbnail}}/>
  }

  render() {
    let {thumbnails} = this.state;
    return (
      <ScrollView style={styles.container}>
        {thumbnails.map(this.renderThumbnails.bind(this))}
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 35,
    paddingHorizontal: 20,
    backgroundColor: '#F5FCFF',
  },
  imageStyle: {
    width: 70,
    height: 70,
    marginTop: 10,
    backgroundColor: 'gray'
  }
});

AppRegistry.registerComponent('Example', () => Example);

License

MIT © codeventure

Releases

No releases published

Packages

No packages published