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

Prop name	Type	Default value	Description
style	Style	null	Overrides default container style.
picture	object		Required, "Picture" type object.
onClose	function		Required, Custom function for closing PhotoEditor.
onDelete	function	null	Custom function to delete image file pointing to "picture" object.
onSpawn	function	null	Receive a Picture object as a parameter and return a new Picture object that stores the current edit state, and you can continue state, and you can continue editing it. The image file that was originally passed to the feature property does not change. For more information, please refer to the _onSpawn() function in "PhotoEditor.js".
onShare	function	null	Receive a Picture object as a parameter and send it to other app. If this property is defined, displays button for sharing photo.
customBtn	array	[]	Array to specify custom buttons to be added to the toolbar.
useCircleProgress	Boolean	false	If true, displays Progress.Circle. (Default : Progress.Bar)
useSpawn	Boolean	true	If true, displays button for spawning photo. If onSpawn is not specified, use the built-in function.
topMargin	Number	0	Distance from the top of the screen to the top of the PhotoEditor component. (by pt)
bottomMargin	Number	0	Distance from the bottom of the PhotoEditor component to the bottom of the screen. (by pt)

1. Setter

Prop name	Type	Default value	Description
customBtn	array	[]	Array to specify custom buttons to be added to the toolbar.

1. Getter

Prop name	Type	Default value	Description
customBtn	array	[]	Returns an array that combines the values of the "customBtn" property and the "customBtn" setter. The custom button that is finally added to the toolbar is based on this value.

PhotoBrowser

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

1. Properties

Prop name	Type	Default value	Description
style	Style	null	Overrides default container style.
isModal	Boolean	true	If true, PhotoBrowser is full screen modal box.
folder	String	'images'	Path to the image folder. THis path shoud be under "expo.FileSystem.documentDirectory"
pictureList	Object	null	"PictureList" type object. If assigned, PhotoBrowser use this this list. Else, the PhotoBrowser will generate a PictureList object from the image files stored in the folder path.
onShare	function	null	To pass sharing function to PhotoBrowser's PhotoEditor component
isModal	Boolean	true	If true, PhotoBrowser is full screen modal box.
useSpawn	Boolean	true	If true, displays button for spawning photo in the PhotoEditor.
usePhotoLib	Boolean	true	If true, displays button for importing photo with the "expo.ImagePicker".
getFromWeb	Boolean	true	If true, displays button for downloading photo from the web.
useCamera	Boolean	true	If true, displays button for accessing camera.
square	Boolean	false	If true, displays the thumbnails as squares.
onClose	Boolean	true	If true, displays button for downloading photo from the web.
orientation	String	'auto'	One of 'auto', 'landscape', 'portrait'. It is effective only when the "isModal" is true. The orientation of the modal box is fixed according to the orientation value. If set to 'auto', use the current orientation of the device.

1. Setter

Prop name	Type	Default value	Description
customBtn	array	[]	Array to specify custom buttons to be added to the toolbar.
customEditorBtn	array	[]	To pass custom button settings to PhotoBrowser's PhotoEditor component

1. Getter

Prop name	Type	Default value	Description
customBtn	array	[]	Returns an array that combines the values of the "customBtn" property and the "customBtn" setter. The custom button that is finally added to the toolbar is based on this value.
customEditorBtn	array	[]	Returns a custom button setting value for the PhotoEditor component called by the PhotoBrowser.

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