@nstudio/nativescript-rad-imagepicker

Whatsapp style imagepicker for NativeScript apps

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
2311Mar 24, 2021Jun 27, 2018Minified + gzip package size for @nstudio/nativescript-rad-imagepicker in KB

Readme

NativeScript Rad Imagepicker Plugin apple android

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>

Made With ♥️ for {N} Community by nStudio

Special Thanks to Richard Smith and Osei Fortune :)

License

Apache License Version 2.0, January 2004

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.