@nstudio/nativescript-rad-imagepicker

v2.0.5

Whatsapp style imagepicker for NativeScript apps

NativeScript JavaScript Android iOS ImagePicker WhatsAppPicker

NativeScript Rad Imagepicker Plugin

NativeScript plugin for whatsapp style image picking. This Plugin uses PixImagePicker for Android and ImagePicker for iOS

Installation

tns plugin add @nstudio/nativescript-rad-imagepicker

Usage

const RadImagepicker = require('@nstudio/nativescript-rad-imagepicker').RadImagepicker;
const PickerOptions = require('@nstudio/nativescript-rad-imagepicker').PickerOptions;
const radImagepicker = new RadImagepicker();
radImagepicker.pick(opts).then((selectedImages) => {
    if (selectedImages) {
        // Do something with selected images
        // currently 
        // the image will be of type nativescript image source
        // tns-core-modules/image-source
    }
});

API

Following picker options are available

PickerOptions {
    doneButtonTitle?: string; // only affects ios
    noImagesTitle?: string; // only affects ios
    allowVideoSelection?: boolean; // only affects ios
    imageLimit?: number;
}

Picker api

pick(options: PickerOptions): Promise<Array<any>>;

When the promise resolves, you will get array of imageSource

Theming

Android

Add desired colors in app/App_Resources/Android/src/main/res/values/colors.xml

<color name="ns_blue">#272734</color>
<color name="colorPrimaryPix">#075e54</color>
<color name="colorPrimaryLightPix">#80075e54</color>

Permissions

Android

Make sure these lines are in your Manifest.xml

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-feature android:name="android.hardware.camera" />

iOS

Add these to info.plist, you can add more descriptive message here

<key>NSCameraUsageDescription</key>
<string>This app uses your camera</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app uses your photo library</string>