react-native-image-kit v0.6.0

React Native Image Kit

Information

Expo provides several basic editing functions, such as resizing and cutting images through the ImageManipulator API. The purpose of this package is to provide the UI for users to take advantage of this feature. React Native Image Kit depends on the following packages:

• Native Base
• Expo
• React Native Progress
• UUID

For more information, please refer to the "package.json".

Installation

yarn add react-native-image-kit

Usage

PhotoEditor

import { Picture, PhotoEditor } from "react-native-image-kit";

    ...
    
    _onCloseEditor() {
        this._toggleFullScreen(false);
    }

    render() {
    
        let picture = new Picture(uri);
                        
        ...     
    
        return (
            ...
                <PhotoEditor
                    picture={picture} // picture should be "Picture" type object.
                    onClose={this._onCloseEditor}
                    topMargin={this.state.headerHeight+Common.statusBar.height}
                />
            ...
        );
    }

PhotoBrowser

import React from 'react';
import { withNavigationFocus } from 'react-navigation';
import { PhotoBrowser, PictureList } from "react-native-image-kit"


class Images extends React.Component {

    static navigationOptions = {
        headerStyle: {
            display: 'none',
        },
    };

    ...

    _onClose = (pictureList) => {
        this.props.navigation.navigate('Home');
        pictureList.cleanup();
    };

    render() {
        let pictureList = new PictureList('images');
            
    
        return (
            <PhotoBrowser pictureList={pictureList} // pictureList should be "PictureList" type object.
                          isModal={false}
                          onClose={this._onClose}
                          show={this.props.isFocused}/>
        );
    }
}

export default withNavigationFocus(Images);

Components

PhotoEditor

Simple image editor component. It's editing function depends on the expo.ImageManipulator.

1. Properties

2. Setter

3. Getter

PhotoBrowser

Simple image browser component for predefined folder. When you click on the thumbnail of the image, PhotoEditor component open it.

1. Properties

2. Setter

3. Getter

APIs

Picture

Class to contain image file URI and edit history. Image file URI should be start with value of expo.FileSystem.documentDirectory.

constructor(fileUri, width=0, height=0, tempFolderExist=false)

Arguments

• fileUri (string) -- file:// URI to the image file, or a URI returned by CameraRoll.getPhotos(). (JPG or PNG only)

• width, height (number) -- The dimensions of the image.

• tempFolderExist (boolean) -- Whether a temporary folder is created. (for storing history of image manipulation) If you are not sure, set false.

Precautions

• If zero is given for the width or height value, the asynchronous function is called internally to obtain this value.

• If false is given for the tempFolderExist, the asynchronous function is called internally to create the temp folder.

PictureList

Class to manage image files within a specific folder. The folder URI should be start with value of expo.FileSystem.documentDirectory.

constructor(folder='images')

Arguments

• folder (string) -- URI to the image folder. Omit the preceding part equal to the expo.FileSystem.documentDirectory.

Example for custom buttons.

    let buttons = [
        {
            callback: this._onAction,
            bordered: true,
            icon: {
                name: 'icon name',
                type: 'icon type',
            },
            text: { label: 'action' }
        }
    ];
    
    return (
        <PhotoEditor
            picture={picture}
            useCircleProgress={false}
            onClose={this._onCloseEditor}
            onDelete={this._onDelete}
            onSpawn={this._onSpawn}
            useShare={this.props.useShare}
            useSpawn={this.props.useSpawn}
            topMargin={statusBarHeight}
            customBtn={buttons}
        />
    );

For the name and type of icon among the examples, see Native Base Package.

For more information, please refer to the "src/lib/Common.js".

Changelog

0.6.0

• Add camera access.

0.5.6

• Remove some bug.

0.5.5

• Rewrite EdgeSlider component.

0.5.4

• Remove some bug(resize, etc...).
• Add orientation props to Popup component.

0.5.3

• Remove some bug.

0.5.2

• Remove some bug. (Heather Height Issues on Android, Property issues of the PhotoBrowser component)

0.5.1

• Modify readme.md

Acknowledgement

• Many part of the React Native Image Kit was adapted from and inspired by Halil Bilir's "React Native Photo Browser".

• The EdgeSlider component was adapted from and inspired by Tomas Roos's "React Native Multi Slider."

• The OverlayMenu component was adapted from and inspired by @rt2zz's "React Native Drawer"

License

MIT

Example

You can see the source of the working app using the react-native-image-kit : https://github.com/rheesh/Emarks