react-native-neon

A React Native package to take photos using custom camera or custom gallery in android.

(Supports on react-native >= 0.47.0)

Installation

npm install react-native-neon

Linking

react-native link

Manual linking

Add the following lines to android/settings.gradle:

include ':react-native-neon'
project(':react-native-neon').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-neon/android/app')

Add the compile line to the dependencies in android/app/build.gradle:

dependencies {
    ---------------------
    compile project(':react-native-neon')
}

Add the following line to android/app/src/main/java/MainApplication.java:

@Override
protected List<ReactPackage> getPackages() {
   return Arrays.<ReactPackage>asList(
       new MainReactPackage(),
         new NeonReactPackage()
   );
}

Add the following lines to `android/app/src/AndroidManifest.xml`:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          --------------------------------------------->
  <application
     ---------------------
     tools:replace="android:theme,android:allowBackup">
  </application>
   
</manifest>

Add the following lines to `android/app/build.gradle`:

android {
    ----------------------
    dataBinding {
        enabled = true
    }
}

Usage

Import NeonAndroid

import NeonAndroid from 'react-native-neon';

React methods

NeonAndroid.openNeutral(neonParamsJson, callback)
NeonAndroid.openCamera(neonParamsJson, callback)
NeonAndroid.openGallery(neonParamsJson, callback)
NeonAndroid.openLivePhotos(neonParamsJson, callback)

neonParamsJson - Json of neonParams object(can be pass as null)
callback - will return neonResponse Json

Example:

NeonAndroid.openNeutral(JSON.stringify(neonParams), (response) => console.log(response));

where response is the neonResponse json which you will get in callback, you can convert it into object using JSON.parse(response).

neonParams

{
    libraryMode: 0,
    numberOfPhotos: 0,
    cameraFacing: 0,
    cameraOrientation: 0,
    cameraViewType: 0,
    galleryViewType: 0,
    tagEnabled: false,
    flashEnabled: true,
    cameraSwitchingEnabled: false,
    cameraToGallerySwitchEnabled: false,
    enableFolderStructure: true,
    galleryToCameraSwitchEnabled: false,
    isRestrictedExtensionJpgPngEnabled: true,
    enableImageEditing: false,
    locationRestrictive: false,
    hideCameraButtonInNeutral: false,
    hideGalleryButtonInNeutral: false,
    hasOnlyProfileTag: false,
    profileTagName: null,
    imageTagListJson: null,
    alreadyAddedImagesJson: null,
};

Detail:

Key	Type	Default Value	Required	Description
libraryMode	int	0	no	0-Relax, 1-Restrict(a pop-up will be shown on before exit from library)
numberOfPhotos	int	0	no	Pass 0 for no restriction, if any number other than 0 is passed then only that particular number of images are allowed
cameraFacing	int	0	no	0-Rear, 1-Front
cameraOrientation	int	0	no	0-Landscape, 1-Portrait
cameraViewType	int	0	no	0-Normal camera, 1-Gallery preview camera
galleryViewType	int	0	no	0-Grid Structure, 1-Horizontal Structure
tagEnabled	boolean	false	no*	if passes true then imageTagListJson must not be null or empty
flashEnabled	boolean	true	no	If passes true then flash is enabled
cameraSwitchingEnabled	boolean	false	no	If passes true then camera swithing is allowed
cameraToGallerySwitchEnabled	boolean	false	no	If passes true then access to gallery from camera screen is allowed
enableFolderStructure	boolean	true	no	If passes true then folder structure for gallery is enabled
galleryToCameraSwitchEnabled	boolean	false	no	If passes true then access to camera from galeery screen is allowed
isRestrictedExtensionJpgPngEnabled	boolean	true	no	If passes true then only jpg and png format are allowed
enableImageEditing	boolean	false	no
locationRestrictive	boolean	false	no	If passes true then GPS location is required
hideCameraButtonInNeutral	boolean	false	no	If passes true then camera button will hide on neutral screen
hideGalleryButtonInNeutral	boolean	false	no	If passes true then gallery button will hide on neutral screen
hasOnlyProfileTag	boolean	false	no*	if passes true then profileTagName must not be null or empty
profileTagName	String	null	no
imageTagListJson	Json	null	no	Json of array of imageTag
alreadyAddedImagesJson	Json	null	no	Json of array of already added images(fileInfo)
compressBy	int	100	no	image quality(size) compare to original image(in between 0-100)
folderRestrictive	boolean	false	no	If passes true then image selection from gallery is restricted(only images taken from app are allowed)
folderName	String	null	no	If passes then images will be saved in a separate folder(folderName)
titleName	String	null	no	If passes then title of neutral screen will be changed accordingly
showTagImage	boolean	false	no	If true then tag preview will show on camera screen
showPreviewForEachImage	boolean	false	no	If true then preview will show on each photo click

fileInfo

{
    dateTimeTaken: "1522229825513",
    fileCount: 0,
    filePath: "https://images.unsplash.com/photo-1441742917377-57f78ee0e582?h=1024",
    selected: false,
    source: "PHONE_GALLERY",
    type: "IMAGE",
    latitude: "",
    longitude: "",
    fileName: "",
    displayName: "",
    fileTag: {
        mandatory: false,
        numberOfPhotos: 1,
        tagId: "3",
        tagName: "Tag3",
        location: null,
        tagPreviewUrl: "https://----"
    }
};

Details of fileInfo:

Key	Type	Description
dateTimeTaken	String	dateTime in milliseconds
fileCount	int
filePath	String	local path or url
selected	boolean
source	boolean
type	String
latitude	String
longitude	String
fileName	String
displayName	String
fileTag	object	imageTag

imageTag

{
    mandatory: false,
    numberOfPhotos: 1,
    tagId: "1",
    tagName: "Tag1",
    location: null,
    tagPreviewUrl: "https://----"
};

Details of imageTag:

Key	Type	Description
mandatory	boolean
numberOfPhotos	int	number of images required for particular tag
tagId	String
tagName	String
location	object	Location used in android

Usage Example

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableNativeFeedback, FlatList, Image, ScrollView
} from 'react-native';
import NeonAndroid from 'react-native-neon';
import * as Constants from './Constants';

let imageTagList = [
    {
        mandatory: false,
        numberOfPhotos: 1,
        tagId: "1",
        tagName: "Tag1",
        location: null,
        tagPreviewUrl: "https://----"
    },

    {
        mandatory: false,
        numberOfPhotos: 1,
        tagId: "2",
        tagName: "Tag2",
        location: null,
        tagPreviewUrl: "https://----"
    }

];

let neonParams = {
    libraryMode: 0,
    numberOfPhotos: 0,
    cameraFacing: 0,
    cameraOrientation: 0,
    cameraViewType: 0,
    galleryViewType: 0,
    tagEnabled: false,
    flashEnabled: true,
    cameraSwitchingEnabled: false,
    cameraToGallerySwitchEnabled: false,
    enableFolderStructure: true,
    galleryToCameraSwitchEnabled: false,
    isRestrictedExtensionJpgPngEnabled: true,
    enableImageEditing: false,
    locationRestrictive: false,
    hideCameraButtonInNeutral: false,
    hideGalleryButtonInNeutral: false,
    hasOnlyProfileTag: false,
    profileTagName: null,
    imageTagListJson: null,
    alreadyAddedImagesJson: null,
};


export default class App extends Component<Props> {
    constructor() {
        super();
        this.openNeon = this.openNeon.bind(this);
        this.prepareList = this.prepareList.bind(this);
        this.state = {
            images: [],
            alreadyAddedImages: []
        }

    }
    
    onEachLivePhotoClick = (response) => {
            console.log('Live Photo ==>',response);
    };
    
    componentDidMount(){
         //use it, if event for each live photo click is required
         NeonAndroid.addEventListener('livePhoto', this.onEachLivePhotoClick);
    }
    
    componentWillUnmount(){
         //required, if event for each live photo is added
         NeonAndroid.removeEventListener('livePhoto', this.onEachLivePhotoClick);
    }

    openNeon(position) {
        let params = {};
        switch (position) {
            case Constants.OPEN_NEUTRAL:
                params.profileTagName = 'Cover';
                params.hasOnlyProfileTag = true;
                params.alreadyAddedImagesJson = JSON.stringify(this.state.alreadyAddedImages);
                NeonAndroid.openNeutral(JSON.stringify(params), (response) => this.prepareList(response));
                break;
            case Constants.OPEN_CAMERA:
                params.cameraOrientation = 1;
                params.flashEnabled = true;
                params.cameraSwitchingEnabled = true;
                params.alreadyAddedImagesJson = JSON.stringify(this.state.alreadyAddedImages);
                NeonAndroid.openCamera(JSON.stringify(params), (response) => this.prepareList(response));
                break;
            case Constants.OPEN_CAMERA_PRIORITY:
                params.cameraOrientation = 1;
                params.flashEnabled = true;
                params.cameraSwitchingEnabled = true;
                params.tagEnabled = true;
                params.libraryMode = 1;
                params.numberOfPhotos = 2;
                params.cameraToGallerySwitchEnabled = true;
                params.imageTagListJson = JSON.stringify(imageTagList);
                NeonAndroid.openCamera(JSON.stringify(params), (response) => this.prepareList(response));
                break;
            case Constants.OPEN_GALLERY_FOLDERS:
                params.galleryToCameraSwitchEnabled = false;
                params.numberOfPhotos = 0;
                params.enableFolderStructure = true;
                params.imageTagListJson = JSON.stringify(imageTagList);
                params.alreadyAddedImagesJson = JSON.stringify(this.state.alreadyAddedImages);
                NeonAndroid.openGallery(JSON.stringify(params), (response) => this.prepareList(response));
                break;
            case Constants.OPEN_GALLERY_FOLDERS_PRIORITY:
                params.galleryToCameraSwitchEnabled = true;
                params.numberOfPhotos = 0;
                params.enableFolderStructure = true;
                params.imageTagListJson = JSON.stringify(imageTagList);
                params.alreadyAddedImagesJson = JSON.stringify(this.state.alreadyAddedImages);
                NeonAndroid.openGallery(JSON.stringify(params), (response) => this.prepareList(response));
                break;
            case Constants.OPEN_GALLERY_FILES:
                params.galleryToCameraSwitchEnabled = false;
                params.numberOfPhotos = 2;
                params.enableFolderStructure = false;
                params.libraryMode = 1;
                params.galleryViewType = 0;
                params.tagEnabled = true;
                params.imageTagListJson = JSON.stringify(imageTagList);
                NeonAndroid.openGallery(JSON.stringify(params), (response) => this.prepareList(response));
                break;
            case Constants.OPEN_GALLERY_FILES_PRIORITY:
                params.galleryToCameraSwitchEnabled = true;
                params.numberOfPhotos = 0;
                params.galleryViewType = 0;
                params.enableFolderStructure = false;
                params.imageTagListJson = JSON.stringify(imageTagList);
                params.alreadyAddedImagesJson = JSON.stringify(this.state.alreadyAddedImages);
                NeonAndroid.openGallery(JSON.stringify(params), (response) => this.prepareList(response));
                break;

            case Constants.OPEN_GALLERY_HORIZONTAL:
                params.galleryToCameraSwitchEnabled = false;
                params.numberOfPhotos = 0;
                params.galleryViewType = 1;
                params.enableFolderStructure = false;
                params.imageTagListJson = JSON.stringify(imageTagList);
                params.alreadyAddedImagesJson = JSON.stringify(this.state.alreadyAddedImages);
                NeonAndroid.openGallery(JSON.stringify(params), (response) => this.prepareList(response));
                break;
            case Constants.OPEN_GALLERY_HORIZONTAL_PRIORITY:
                params.galleryToCameraSwitchEnabled = true;
                params.numberOfPhotos = 0;
                params.galleryViewType = 1;
                params.enableFolderStructure = false;
                params.imageTagListJson = JSON.stringify(imageTagList);
                params.alreadyAddedImagesJson = JSON.stringify(this.state.alreadyAddedImages);
                NeonAndroid.openGallery(JSON.stringify(params), (response) => this.prepareList(response));
                break;
            case Constants.OPEN_LIVE_PHOTOS:
                params.locationRestrictive = true;
                params.tagEnabled = true;
                params.imageTagListJson = JSON.stringify(imageTagList);
                NeonAndroid.openLivePhotos(JSON.stringify(params), (response) => this.prepareList(response));
                break;

        }
    }

    prepareList(response) {
        if (JSON.parse(response).imageCollection.length === 0) {
            this.setState({alreadyAddedImages: []});
            return;
        }
        let data = JSON.parse(response).imageCollection;
        this.setState({
            alreadyAddedImages: data,
            images: data
        });
    }

    renderItem({item, index}) {
        let imageUrl = '';
        if (item.filePath.toString().contains("//")) {
            imageUrl = item.filePath;
        } else {
            imageUrl = "file://" + item.filePath;
        }
        return (
            <View>
                <Image
                    style={{
                        alignSelf: 'center',
                        margin: 5,
                        width: 110,
                        height: 100,
                    }}
                    source={{uri: imageUrl}}
                />
            </View>

        )
    }


    render() {
        return (
            <ScrollView>
                <View style={styles.container}>
                    <TouchableNativeFeedback onPress={() => this.openNeon(Constants.OPEN_NEUTRAL)}>
                        <Text style={styles.instructions}>
                            Neutral
                        </Text>
                    </TouchableNativeFeedback>
                    <TouchableNativeFeedback onPress={() => this.openNeon(Constants.OPEN_CAMERA)}>
                        <Text style={styles.instructions}>
                            Camera
                        </Text>
                    </TouchableNativeFeedback>
                    <TouchableNativeFeedback onPress={() => this.openNeon(Constants.OPEN_CAMERA_PRIORITY)}>
                        <Text style={styles.instructions}>
                            Camera Priority
                        </Text>
                    </TouchableNativeFeedback>
                    <TouchableNativeFeedback onPress={() => this.openNeon(Constants.OPEN_GALLERY_FOLDERS)}>
                        <Text style={styles.instructions}>
                            Gallery(Folders)
                        </Text>
                    </TouchableNativeFeedback>
                    <TouchableNativeFeedback onPress={() => this.openNeon(Constants.OPEN_GALLERY_FOLDERS_PRIORITY)}>
                        <Text style={styles.instructions}>
                            Gallery Priority(Folders)
                        </Text>
                    </TouchableNativeFeedback>
                    <TouchableNativeFeedback onPress={() => this.openNeon(Constants.OPEN_GALLERY_FILES)}>
                        <Text style={styles.instructions}>
                            Gallery(Files)
                        </Text>
                    </TouchableNativeFeedback>
                    <TouchableNativeFeedback onPress={() => this.openNeon(Constants.OPEN_GALLERY_FILES_PRIORITY)}>
                        <Text style={styles.instructions}>
                            Gallery Priority(Files)
                        </Text>
                    </TouchableNativeFeedback>

                    <TouchableNativeFeedback onPress={() => this.openNeon(Constants.OPEN_GALLERY_HORIZONTAL)}>
                        <Text style={styles.instructions}>
                            Gallery(Horizontal)
                        </Text>
                    </TouchableNativeFeedback>
                    <TouchableNativeFeedback onPress={() => this.openNeon(Constants.OPEN_GALLERY_HORIZONTAL_PRIORITY)}>
                        <Text style={styles.instructions}>
                            Gallery Priority(Horizontal)
                        </Text>
                    </TouchableNativeFeedback>

                    <TouchableNativeFeedback onPress={() => this.openNeon(Constants.OPEN_LIVE_PHOTOS)}>
                        <Text style={styles.instructions}>
                            Live Photos
                        </Text>
                    </TouchableNativeFeedback>

                    <FlatList
                        contentContainerStyle={styles.list}
                        data={this.state.images}
                        renderItem={this.renderItem}/>
                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        alignSelf: 'stretch',
        backgroundColor: 'green',
        padding: 12,
        color: 'white',
        fontWeight: 'bold',
        fontSize: 16,
        marginTop: 10,
    },
    list: {
        justifyContent: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap'
    }
});

let fileInfo = {
    dateTimeTaken: "1522229825513",
    fileCount: 0,
    filePath: "https://images.unsplash.com/photo-1441742917377-57f78ee0e582?h=1024",
    selected: false,
    source: "PHONE_GALLERY",
    type: "IMAGE",
    latitude: "",
    longitude: "",
    fileName: "",
    displayName: "",
    fileTag: {
        mandatory: false,
        numberOfPhotos: 1,
        tagId: "3",
        tagName: "Tag3",
        location: null,
        tagPreviewUrl: "https://----"
    }
};

Author:

gaadi.dev@gaadi.com

react-native-neon

react-native-neon

Installation

Linking

Manual linking

Add the following lines to `android/app/src/AndroidManifest.xml`:

Add the following lines to `android/app/build.gradle`:

Usage

Import NeonAndroid

React methods

neonParams

Usage Example

Author:

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

react-native-neon

react-native-neon

Installation

Linking

Manual linking

Add the following lines to android/app/src/AndroidManifest.xml:

Add the following lines to android/app/build.gradle:

Usage

Import NeonAndroid

React methods

neonParams

Usage Example

Author:

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Add the following lines to `android/app/src/AndroidManifest.xml`:

Add the following lines to `android/app/build.gradle`:

Weekly Downloads