open-index/open-npm huggingface dataset:
npm package: @nstudio/nativescript-aptabase
Description: Aptabase Analytics for Apps. Privacy-First. Simple.
Author: nstudio
Latest version: 1.2.0

![Aptabase](https://aptabase.com/og.png)

# @nstudio/nativescript-aptabase

Instrument your NativeScript apps with Aptabase, an Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps.

## Install

Install the SDK using your preferred JavaScript package manager

```bash
pnpm add @nstudio/nativescript-aptabase
# or
npm add @nstudio/nativescript-aptabase
# or
yarn add @nstudio/nativescript-aptabase
```

For iOS, configure your `nativescript.config.ts` to use the Swift Package:

```ts
ios: {
    SPMPackages: [
        {
            name: 'Aptabase',
            libs: ['Aptabase'],
            repositoryURL: 'https://github.com/aptabase/aptabase-swift.git',
            version: '0.3.6'
        }
    ]
}
```

## Usage

First you need to get your `App Key` from Aptabase, you can find it in the `Instructions` menu on the left side menu.

Initialize the SDK using your `App Key` and the `initialize` function. We would recommend calling it as early as possible in your app life cycle. 


```ts
import { Aptabase } from '@nstudio/nativescript-aptabase';

Aptabase.initialize('<YOUR_APP_KEY>'); // 👈 this is where you enter your App Key
```

Afterwards you can start tracking events with `track`:

```js
import { Aptabase } from '@nstudio/nativescript-aptabase';

// Track an event
Aptabase.track("connect_click");
 
// Track events with custom properties
Aptabase.track("play_music", {
  name: "Here comes the sun"
});
```

A few important notes:

1. The SDK will automatically enhance the event with some useful information, like the OS, the app version, and other things.
2. You're in control of what is sent to Aptabase. This SDK does not automatically track any events, you need to call `track` manually.
   - Because of this, it's generally recommended to at least track an event at startup
3. You do not need to await the `track` function, it'll run in the background.
4. Only strings and numbers values are allowed on custom properties

## License

Apache License Version 2.0
npm package: @nstudio/nativescript-auth0
Description: Auth0 for NativeScript
Author: nStudio
Latest version: 0.1.3

# @nstudio/nativescript-auth0

```javascript
npm install @nstudio/nativescript-auth0
```

## Usage

```ts
import { Auth0 } from '@nstudio/nativescript-auth0';

const auth0Client = new Auth0({
    clientId: '<client-id>',
    domain: '<domain>'
});

const credentials = await auth0Client.webAuth.start();
console.log(credentials) // tokens!
```

## License

Apache License Version 2.0
npm package: @nstudio/nativescript-blur
Description: Uses the iOS blur effect to blur anything that has an underlying iOS view, and blurs images on android, using BlurKit..
Author: Dave Coffin
Latest version: 3.0.2

# @nstudio/nativescript-blur

```javascript
ns plugin add @nstudio/nativescript-blur
```

## iOS
<img src="https://github.com/davecoffin/nativescript-blur/blob/master/blur.gif?raw=true" height="320" > 

On iOS, you can blur pretty much anything, but the coolest thing to do is blur a transparent view covering what you want blurred. This way everything behind that view gets blurred. 

## Android

<img src="https://github.com/davecoffin/nativescript-blur/blob/master/blurandroid.gif?raw=true" height="320" > 
If you pass `true` to the constructor (`let blur = new Blur(true)`), nothing will be different on iOS, but on Android the backgroundColor of the NativeScript view you pass to either light semi transparent or dark semi transparent. So, if you are using this for a "dimmer" effect for modals and stuff, Android will work that way for now.

## Usage

```js

import { Blur } from '@nstudio/nativescript-blur';
let blur = new Blur(true); // pass true to enable limited usage on android (for now);

// Pick Date
makeKittyBlurry() {
    let kittyView = page.getViewById('kitty');
    blur.on(kittyView, 'kitty', 'light').then(() => {
        console.log('Kitty has become blurry.');
    }).catch(e => {
        console.dir(e);
    });
}

clearUpKitty() {
    blur.off('kitty').then(() => {
        console.log('Kitty has cleared up.')
    });
}

```

## API

`on(view, keyTitle, theme?, duration?): Promise;`

To turn it on, you must pass a view and a key name. The key name can be anything, you use it to turn it off. This way you can blur different things at different times. The theme is either `light` or `dark`, and you can pass a custom duration. The duration is in seconds, for example if you pass `.2` the animation will last .2 seconds. 
The view needs to be a nativescript view that has an `ios` property, and that property must support `addSubview`. Here are some examples of NativeScript UI elements you can pass:
```js
StackLayout
GridLayout
AbsoluteLayout
DockLayout
ScrollView
Image
Label
```
If there is no `ios` property on the element you pass or `addSubview` doesn't exist on the ios property, it will return an error.

`off(keyTitle, duration?): Promise;`

Off animates the blur off. Pass it the key you used to create it. If the key doesnt exist (the view is not blurry) it will return an error.

## License

Apache License Version 2.0
npm package: @nstudio/nativescript-branch
Description: Branch.io for NativeScript
Author: nStudio
Latest version: 1.0.1

# @nstudio/nativescript-branch

```javascript
npm install @nstudio/nativescript-branch
```

## Usage

From your app's main entry import `BranchIO` to call the init method before the app launches.

```ts
import { BranchIO } from '@nstudio/nativescript-branch';

BranchIO.initSession(...);
```

## Config

[Android](https://help.branch.io/developers-hub/docs/android-basic-integration#4-configure-app)


[iOS](https://help.branch.io/developers-hub/docs/ios-basic-integration)
## License

Apache License Version 2.0
npm package: @nstudio/nativescript-calendar
Description: A full-featured calendar view with month, week, and year views. Uses Airbnb HorizonCalendar (iOS) and kizitonwose Calendar (Android).
Author: nstudio
Latest version: 1.0.5

# @nstudio/nativescript-calendar

A full-featured native calendar view for NativeScript. Uses [HorizonCalendar](https://github.com/airbnb/HorizonCalendar) (iOS, by Airbnb) and [kizitonwose Calendar](https://github.com/kizitonwose/Calendar) (Android).

```bash
npm install @nstudio/nativescript-calendar
```

Compatible with Angular, React, Solid, Svelte and Vue.

## Usage

### NativeScript Core

```xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:cal="@nstudio/nativescript-calendar"
  navigatingTo="navigatingTo">
  <cal:NCalendar
    displayMode="month"
    selectionMode="single"
    orientation="vertical"
    daySelect="{{ onDaySelect }}" />
</Page>
```

```typescript
import { NCalendar, CalendarDayEventData, SelectionMode } from '@nstudio/nativescript-calendar';

// Listen for selection
function onDaySelect(args: CalendarDayEventData) {
  console.log('Selected:', args.data.day.date);
}

// Programmatic control
const calendar = page.getViewById<NCalendar>('calendar');
calendar.goToToday(true);
calendar.selectDate(new Date(2026, 2, 15));
```

### Angular

```typescript
import { registerElement } from '@nativescript/angular';
import { NCalendar } from '@nstudio/nativescript-calendar';

registerElement('NCalendar', () => NCalendar);
```

```html
<NCalendar
  displayMode="month"
  selectionMode="range"
  orientation="vertical"
  (daySelect)="onDaySelect($event)">
</NCalendar>
```

### Other Flavors

```typescript
import { NCalendar } from '@nstudio/nativescript-calendar';

// Vue
Vue.registerElement('NCalendar', () => NCalendar);

// React
registerElement('nCalendar', () => NCalendar);

// Svelte
registerNativeViewElement('nCalendar', () => NCalendar);

// Solid
registerElement('nCalendar', NCalendar);
```

## Quick Examples

### Range Selection

```xml
<cal:NCalendar selectionMode="range" />
```

```typescript
calendar.on('daySelect', (args: CalendarDayEventData) => {
  const range = calendar.selectedDateRange;
  if (range) {
    console.log(`${range.start} to ${range.end}`);
  }
});
```

### Week View

```xml
<cal:NCalendar displayMode="week" />
```

### Horizontal Paged

```xml
<cal:NCalendar orientation="horizontal" scrollPaged="true" />
```

### Events / Markers

```typescript
calendar.events = [
  { date: new Date(2026, 2, 3), color: '#E91E63', data: { title: 'Team Standup' } },
  { date: new Date(2026, 2, 3), color: '#2196F3', data: { title: 'Design Review' } },
  { date: new Date(2026, 2, 7), color: '#4CAF50', data: { title: 'Lunch' } },
];
```

### Custom Colors

```xml
<cal:NCalendar
  todayTextColor="#FF6B6B"
  selectedDayBackgroundColor="#FF6B6B"
  selectedDayTextColor="#FFFFFF"
  monthHeaderTextColor="#FF6B6B"
  weekendTextColor="#666666" />
```

## Docs

[https://plugins.nstudio.io/plugins/calendar](https://plugins.nstudio.io/plugins/calendar)

## License

Apache License Version 2.0
npm package: @nstudio/nativescript-dialog
Description: A NativeScript plugin for iOS and Android that allows you to create custom dialog.
Author: Vladimir Enchev
Latest version: 1.0.1

<a href="https://proplugins.org"><img src="unmaintained.svg" height="30px" width="100%"></a>

# NativeScript-Dialog


<p align="center"><a href="https://proplugins.org"><img src="https://proplugins.org/logos/logo.png" width="400"  /></a></p>

This version is completely unsupported and untested on NativeScript 6.  Please upgrade your plugin to the tested, supported and maintained version.
npm package: @nstudio/nativescript-fluid-segmented-bar
Description: Fluid Segmented Bar
Author: nstudio
Latest version: 1.0.2

# @nstudio/nativescript-fluid-segmented-bar

Fluid Segmented Bar to liven up any standard `SegmentedBar` control.

- iOS: Uses [SJFluidSegmentedControl](https://github.com/sasojadrovski/SJFluidSegmentedControl)
- Android: Uses standard SegementedBar - Jetpack Compose will be added in future to replicate

## Usage

```javascript
npm install @nstudio/nativescript-fluid-segmented-bar
```

Use within any view layout:

```xml
<FluidSegmentedBar items="{{items}}" gradientColorSides="{{gradientColorSides}}" selectedIndexChanged="{{selectedIndexChanged}}" didScrollOffset="{{didScrollOffset}}"/>
```

Provide bindings for properties and events:

```ts
const items: Array<FluidSegmentedBarItem> = [
    {
        title: 'Enjoy',
        colors: [new Color('#485ae6'), new Color('#87aeed')],
    },
    {
        title: 'Your',
        colors: [new Color('#87aeed'), new Color('#e53ca9')],
    },
    {
        title: 'Life',
        colors: [new Color('#c2c96a'), new Color('#678d50')],
    },
];
const gradientColorSides: FluidSegmentedBarGradientColorSides = {
    left: [new Color('#87aeed')],
    right: [new Color('#c2c96a')],
};

function selectedIndexChanged(args: FluidSegmentedBarIndexChangedEvent) {
    console.log('selectedIndexChanged:', args.newIndex);
}
function didScrollOffset(args: FluidSegmentedBarDidScrollEvent) {
    console.log('didScrollOffset:', args.offset);
}
```

When using flavors, you can just register the element for usage in your markup:

```ts
import { FluidSegmentedBar } from '@nstudio/nativescript-fluid-segmented-bar'

// Angular
import { registerElement } from '@nativescript/angular'
registerElement('FluidSegmentedBar', () => FluidSegmentedBar)

// Solid
import { registerElement } from 'dominative';
registerElement('fluidSegmentedBar', FluidSegmentedBar);

// Svelte
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('fluidSegmentedBar', () => FluidSegmentedBar);

// React
import { registerElement } from 'react-nativescript';
registerElement('fluidSegmentedBar', () => FluidSegmentedBar);

// Vue
import Vue from 'nativescript-vue'
Vue.registerElement('FluidSegmentedBar', () => FluidSegmentedBar)
```

## API

### Properties

- `items: Array<FluidSegmentedBarItem>`: Collection of bar items with `title` and `colors`.
- `gradientColorSides: FluidSegmentedBarGradientColorSides`: The gradiated side colors.

### Events

- `selectedIndexChanged`: When the selectedIndex changes.
- `didScrollOffset`: Whenever the control animates it's selected position, the `offset` and `maxOffset` will be emitted to provide ability to animate other visuals based on it's movement.

## License

- [Attribution to @sasojadrovski for iOS](https://github.com/sasojadrovski/SJFluidSegmentedControl/blob/master/LICENSE)

Apache License Version 2.0
npm package: @nstudio/nativescript-intercom
Description: Intercom SDK for NativeScript
Author: nstudio
Latest version: 1.1.1

# @nstudio/nativescript-intercom

* [Intercom Android SDK](https://developers.intercom.com/installing-intercom/docs/intercom-for-android)
* [Intercom iOS SDK](https://developers.intercom.com/installing-intercom/docs/intercom-for-ios)

```javascript
npm install @nstudio/nativescript-intercom
```

## Usage

```
import { IntercomModule } '@nstudio/nativescript-intercom';

IntercomModule.init('<apiKey>', '<appId>');
// show
IntercomModule.displayMessenger();

// hide
IntercomModule.hideMessenger();
```

## License

Apache License Version 2.0
npm package: @nstudio/nativescript-label-glitch
Description: Label with a Glitch!
Author: nstudio
Latest version: 1.0.0

# @nstudio/nativescript-label-glitch

Label with a Glitch!

```javascript
npm install @nstudio/nativescript-label-glitch
```

## Usage

Use within any view layout:

```xml
<LabelGlitch text="Hello" />
```

When using flavors, you can register the element for usage in your markup:

```ts
import { LabelGlitch } from '@nstudio/nativescript-label-glitch'

// Angular
import { registerElement } from '@nativescript/angular'
registerElement('LabelGlitch', () => LabelGlitch)

// Solid
import { registerElement } from 'dominative';
registerElement('LabelGlitch', LabelGlitch);

// Svelte
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('LabelGlitch', () => LabelGlitch);

// React
import { registerElement } from 'react-nativescript';
registerElement('LabelGlitch', () => LabelGlitch);

// Vue
import Vue from 'nativescript-vue'
Vue.registerElement('LabelGlitch', () => LabelGlitch)
```

## License

- [Attribution to @kciter for iOS](https://github.com/kciter/GlitchLabel/blob/master/LICENSE)
- [Attribution to @irshu355 for Android](https://github.com/irshu355/Android-Glitch-Text-Effect/blob/master/LICENSE)

Apache License Version 2.0
npm package: @nstudio/nativescript-label-marquee
Description: A Label which can scroll with a marquee effect when the text outgrows the available width.
Author: nstudio
Latest version: 1.0.1

# @nstudio/nativescript-label-marquee

A Label which can scroll with a marquee effect when the text outgrows the available width.

```javascript
ns plugin add @nstudio/nativescript-label-marquee
```

## Usage

### JavaScript/TypeScript

```
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:lm="@nstudio/nativescript-label-marquee">
    <StackLayout>
        <lm:LabelMarquee 
            text="Lorem Ipsum; this is a long string of text that will animate because it's longer than the width of the view."
            fadeLength="150" 
            scrollDuration="20"></lm:LabelMarquee>
    </StackLayout>
</Page>
```

* `labelize: boolean` Turn scrolling off to display as normal `Label`.
* `fadeLength: number` (iOS Only) the width of the faded text on either side while scrolling.
* `scrollDuration: number` (iOS Only) speed of the scrolling text measured by duration in seconds to scroll from start to finish. 

### Angular

```
import { registerElement } from '@nativescript/angular';
import { LabelMarquee } from '@nstudio/nativescript-label-marquee';

registerElement('LabelMarquee', () => LabelMarquee);
```

Usage in components:

```
<LabelMarquee 
    text="Lorem Ipsum; this is a long string of text that will animate because it's longer than the width of the view."
    fadeLength="150" 
    scrollDuration="20">
</LabelMarquee>
```

## License

Apache License Version 2.0