npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-image-picker-with-bytes

v0.9.0

Published

A React Native module that allows you to use the native UIImagePickerController UI to select a photo from the device library or directly from the camera.

Downloads

4

Readme

react-native-image-picker

A React Native module that allows you to use the native UIImagePickerController UI to either select a photo from the device library or directly from the camera, like so: Screenshot of the UIActionSheet

Requires iOS 8 or higher

Install

  1. npm install react-native-image-picker@latest --save
  2. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>
  3. Go to node_modulesreact-native-image-picker ➜ select the UIImagePickerManager folder Make sure you have 'Create Groups' selected
  4. Make sure UIImagePickerManager.m is listed under 'Compile Sources' in your project's 'Build Phases' tab
  5. Compile and have fun!

Usage

  1. In your React Native javascript code, bring in the native module:
var UIImagePickerManager = require('NativeModules').UIImagePickerManager;
  1. Use it like so:

When you want to display the picker:


// Specify any or all of these keys
var options = {
  title: 'Select Avatar', // specify null or empty string to remove the title
  cancelButtonTitle: 'Cancel',
  takePhotoButtonTitle: 'Take Photo...', // specify null or empty string to remove this button
  chooseFromLibraryButtonTitle: 'Choose from Library...', // specify null or empty string to remove this button
  customButtons: {
    'Choose Photo from Facebook': 'fb', // [Button Text] : [String returned upon selection]
  },
  maxWidth: 100,
  maxHeight: 100,
  quality: 0.2,
  allowsEditing: false, // Built in iOS functionality to resize/reposition the image
  noData: false, // Disables the base64 `data` field from being generated (greatly improves performance on large photos)
  storageOptions: { // if this key is provided, the image will get saved in the documents directory (rather than a temporary directory)
    skipBackup: true, // image will NOT be backed up to icloud
    path: 'images' // will save image at /Documents/images rather than the root
  }
};

// The first arg will be the options object for customization, the second is
// your callback which sends bool: didCancel, object: response.
//
// response.data is the base64 encoded image data
// response.uri is the uri to the local file asset on the device
// response.isVertical will be true if the image is vertically oriented
// response.width & response.height give you the image dimensions
UIImagePickerManager.showImagePicker(options, (didCancel, response) => {
  console.log('Response = ', response);

  if (didCancel) {
    console.log('User cancelled image picker');
  }
  else {
    if (response.customButton) {
      console.log('User tapped custom button: ', response.customButton);
    }
    else {
      // You can display the image using either:
      const source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};
      const source = {uri: response.uri.replace('file://', ''), isStatic: true};

      this.setState({
        avatarSource: source
      });
    }
  }
});

Then later, if you want to display this image in your render() method:

<Image source={this.state.avatarSource} style={styles.uploadAvatar} />

Directly Launching the Camera or Image Library

To Launch the Camera or Image Library directly (skipping the alert dialog) you can do the following:

// Launch Camera:
UIImagePickerManager.launchCamera(options, (didCancel, response)  => {
  // Same code as in above section!
});

// Open Image Library:
UIImagePickerManager.launchImageLibrary(options, (didCancel, response)  => {
  // Same code as in above section!
});