### Setup Workspace Dependencies
Source: https://github.com/nativescript/docs/blob/main/content/plugins/plugin-workspace-guide.md
Install all necessary dependencies for the workspace. Run this once after cloning or to reset dependencies.
```bash
npm run setup
```
--------------------------------
### Example Worker Setup and Communication
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Demonstrates setting up a NativeScript worker, sending messages to it, and handling responses and errors on the main thread. Ensure NativeScript globals are imported in the worker.
```javascript
// main-view-model.js
const worker = new Worker('./workers/image-processor')
// send a message to our worker
worker.postMessage({ src: imageSource, mode: 'scale', options: options })
// handle incoming messages from the worker
worker.onmessage = function (message) {
if (message.data.success) {
// the src received from the worker
const src = message.data.src
// terminate worker or send another message...
worker.terminate()
} else {
// handle unsuccessful task
}
}
// handle worker errors
worker.onerror = function (err) {
console.log(
`An unhandled error occurred in worker: ${err.filename}, line: ${err.lineno} :`,
err.message,
)
}
```
```javascript
// workers/image-processor.js
// load NativeScript globals in the worker thread
import '@nativescript/core/globals'
self.onmessage = function (message) {
const src = message.data.src
const mode = message.data.mode || 'noop'
const options = message.data.options
const result = processImage(src, mode, options)
if (result) {
// send the result back to the main thread
self.postMessage({
success: true,
src: result,
})
return
}
// no result, send back an empty object for example
self.postMessage({})
}
// example heavy function to process an image
function processImage(src, mode, options) {
console.log(options)
// image processing logic
// save image, retrieve location
// return source to processed image
return updatedImgSrc
}
```
--------------------------------
### CocoaPods Environment Setup
Source: https://github.com/nativescript/docs/blob/main/content/troubleshooting.md
Commands to clean the CocoaPods cache, deintegrate, and reinstall CocoaPods. Verify installation with `pod --version`.
```bash
pod cache clean -all
pod deintegrate
rm -rf "${HOME}/Library/Caches/CocoaPods"
brew install cocoapods
```
```bash
pod --version
```
--------------------------------
### startActivity
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Gets the main (start) Activity for the application.
```APIDOC
## startActivity
### Description
The main (start) Activity for the application.
### Returns
- AppCompatActivity: The main activity instance.
```
--------------------------------
### UrlTileProvider Example
Source: https://github.com/nativescript/docs/blob/main/content/plugins/google-maps.md
Provides an example of how to create a `UrlTileProvider` for tile overlays.
```APIDOC
## UrlTileProvider
### Description
Tile provider that returns a tile from a URL.
### Example
```ts
const tileProvider = new UrlTileProvider((x, y, z) => {
return `https://tiles.example.com/${z}/${x}/${y}.png`
})
```
```
--------------------------------
### Install CocoaPods
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Use this command to install CocoaPods if it is not installed or configured properly. Ensure you have Ruby and sudo privileges.
```bash
sudo gem install cocoapods
```
--------------------------------
### WebView Template Examples
Source: https://github.com/nativescript/docs/blob/main/content/ui/web-view.md
Examples of how to use the WebView component in different frameworks.
```xml
```
```html
```
```html
```
--------------------------------
### Verify Node.js and npm Installation
Source: https://github.com/nativescript/docs/blob/main/content/setup/linux.md
Checks the installed versions of Node.js and npm. Confirms successful installation.
```bash
$ node -v
$ npm -v
# Should print something like
$:v22.x.x
10.x.x
```
--------------------------------
### started
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Indicates whether the application has started.
```APIDOC
## started
### Description
Indicates whether the application has started.
### Method
Property
### Endpoint
N/A
### Parameters
None
### Request Example
None
### Response
- **boolean** - True if the application has started, false otherwise.
```
--------------------------------
### start
Source: https://github.com/nativescript/docs/blob/main/content/core/fps-meter.md
Starts the frames-per-second meter, initiating the measurement process.
```APIDOC
## start
### Description
Starts the frames-per-second meter.
### Signature
```ts
start()
```
```
--------------------------------
### Add JDK bin to System Path
Source: https://github.com/nativescript/docs/blob/main/content/setup/windows.md
Manually add the JDK's `bin` directory to the system's PATH environment variable. This allows you to run Java commands from any directory. The provided path is an example and may need adjustment based on your installation.
```text
C:\Program Files\Eclipse Adoptium\jdk-21.0.9.10\bin
```
--------------------------------
### Complete Error Handling Setup in app.ts
Source: https://github.com/nativescript/docs/blob/main/content/public/assets/agentic/NATIVESCRIPT.md
This example demonstrates a recommended comprehensive error handling setup for a NativeScript application. It includes setting trace categories, enabling tracing in development, defining a custom error handler, and registering global event listeners for uncaught errors and promise rejections.
```typescript
// app.ts - Recommended error handling setup
import { Application, Trace, TraceErrorHandler } from '@nativescript/core'
// 1. Setup trace categories
Trace.setCategories(Trace.categories.concat('App', 'App.Error'))
// 2. Enable tracing in development
if (__DEV__) {
Trace.enable()
}
// 3. Custom error handler
const errorHandler: TraceErrorHandler = {
handlerError(err: Error) {
Trace.write(err.message, 'App.Error', Trace.messageType.error)
if (!__DEV__) {
// Send to Sentry, Crashlytics, etc.
reportToCrashService({
message: err.message,
stack: err.stack,
timestamp: Date.now()
})
}
}
}
Trace.setErrorHandler(errorHandler)
// 4. Global error handlers
Application.on(Application.uncaughtErrorEvent, (args) => {
Trace.error(args.error)
})
Application.on(Application.discardedErrorEvent, (args) => {
Trace.error(args.error)
})
// 5. Start the app
Application.run({ moduleName: 'app-root' })
```
--------------------------------
### SearchBar Template Example
Source: https://github.com/nativescript/docs/blob/main/content/ui/search-bar.md
This example shows the basic template structure for a SearchBar component across different frameworks.
```xml
```
```html
```
```tsx
import { SearchBar } from "@nativescript/core/ui/search-bar";
export function MySearchBar() {
return ;
}
```
```tsx
import { SearchBar } from "@nativescript/core/ui/search-bar";
export function MySearchBar() {
return ;
}
```
```svelte
```
```vue
```
--------------------------------
### Install @klippa/nativescript-http
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Install the @klippa/nativescript-http plugin using npm or yarn.
```bash
npm i --save @klippa/nativescript-http
```
```bash
yarn add @klippa/nativescript-http
```
--------------------------------
### Install ML Kit Core Plugin
Source: https://github.com/nativescript/docs/blob/main/content/plugins/mlkit-core.md
Install the core ML Kit plugin using npm.
```cli
npm install @nativescript/mlkit-core
```
--------------------------------
### Installation
Source: https://github.com/nativescript/docs/blob/main/content/plugins/google-pay.md
Install the @nativescript/google-pay plugin using the NativeScript CLI.
```APIDOC
## Installation
```cli
ns plugin add @nativescript/google-pay
```
```
--------------------------------
### Install Latest Node.js Version
Source: https://github.com/nativescript/docs/blob/main/content/setup/windows.md
Install the latest available release of Node.js using nvm. This command fetches and installs the most recent stable version.
```bash
nvm install node
```
--------------------------------
### Installation
Source: https://github.com/nativescript/docs/blob/main/content/plugins/google-maps.md
Install the @nativescript/google-maps plugin using npm.
```APIDOC
## Installation
### Description
Install the @nativescript/google-maps plugin using npm.
### Method
Command Line
### Endpoint
Terminal
### Request Body
```bash
npm install @nativescript/google-maps
```
```
--------------------------------
### Button Component Examples
Source: https://github.com/nativescript/docs/blob/main/content/ui/button.md
Examples of how to use the Button component in different frameworks.
```xml
```
```html
```
```tsx
import React from 'react';
import { Button, View } from 'react-native';
const App = () => (
);
export default App;
```
```tsx
import { Button } from 'solid-js';
function App() {
return (
);
}
export default App;
```
```svelte
```
```vue
```
--------------------------------
### Switch Component Examples
Source: https://github.com/nativescript/docs/blob/main/content/ui/switch.md
Examples of Switch component usage across different frameworks.
```xml
```
```ts
checked: boolean
```
```ts
offBackgroundColor: Color
```
```ts
on('checkedChange', (args: PropertyChangeData) => {
const switch = args.object as Switch
console.log('Switch checked:', switch.checked)
})
```
--------------------------------
### Verify nvm-windows Installation
Source: https://github.com/nativescript/docs/blob/main/content/setup/windows.md
After installing nvm-windows, open a new Command Prompt to verify the installation by checking the nvm version.
```bash
nvm version
```
--------------------------------
### Run Available Nx Migrations
Source: https://github.com/nativescript/docs/blob/main/content/plugins/plugin-workspace-guide.md
After checking for migrations, run this command to apply any available updates to your plugin workspace, including dependency version bumps and configuration improvements. Ensure you run 'npm install' first to get the latest updates.
```bash
npm install
npx nx migrate --run-migrations=migrations.json
```
--------------------------------
### Install @nativescript/google-maps
Source: https://github.com/nativescript/docs/blob/main/content/plugins/google-maps.md
Install the @nativescript/google-maps plugin using npm.
```bash
npm install @nativescript/google-maps
```
--------------------------------
### ActionItem Example
Source: https://github.com/nativescript/docs/blob/main/content/ui/action-bar.md
Provides an XML example of how to define and configure ActionItems within an ActionBar, including setting system icons, positions, and text for both iOS and Android.
```APIDOC
## ActionItem
`` is a UI component for adding action buttons to the ActionBar.
```xml
```
```
--------------------------------
### Install @nativescript/social-share
Source: https://github.com/nativescript/docs/blob/main/content/plugins/social-share.md
Install the social-share plugin using npm.
```cli
npm install @nativescript/social-share
```
--------------------------------
### Install @nativescript/theme-switcher
Source: https://github.com/nativescript/docs/blob/main/content/plugins/theme-switcher.md
Install the theme switcher plugin using npm. This command should be run in your project's root directory.
```cli
npm install @nativescript/theme-switcher
```
--------------------------------
### Install Barcode Scanning Plugin
Source: https://github.com/nativescript/docs/blob/main/content/plugins/mlkit-core.md
Install the optional ML Kit barcode scanning plugin.
```cli
npm i @nativescript/mlkit-barcode-scanning
```
--------------------------------
### run
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Starts the NativeScript application.
```APIDOC
## run
### Description
Initiates the execution of the NativeScript application, typically called once to bootstrap the app.
### Usage
`run()`
```
--------------------------------
### TabView tabTextFontSize CSS Example
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
CSS example demonstrating how to set the `tab-text-font-size` for a TabView component.
```css
.tab-view {
tab-text-font-size: 24;
}
```
--------------------------------
### profilingStartCPU
Source: https://github.com/nativescript/docs/blob/main/content/api/index.md
Starts CPU profiling.
```APIDOC
## profilingStartCPU
### Description
Starts CPU profiling.
### Method
Not specified
### Endpoint
Not specified
```
--------------------------------
### Install @nativescript/localize Plugin
Source: https://github.com/nativescript/docs/blob/main/content/plugins/localize.md
Run this command in your project's root directory to install the plugin.
```bash
npm install @nativescript/localize
```
--------------------------------
### _setupUI
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Sets up the user interface for the ProxyViewContainer.
```APIDOC
## _setupUI
### Description
Sets up the UI for the ProxyViewContainer.
### Method Signature
```typescript
_setupUI(context: any, atIndex?: number, parentIsLoaded?: boolean): void
```
### Parameters
#### Path Parameters
- `context` (any) - The context for setting up the UI.
- `atIndex` (number) - Optional. The index at which to set up the UI.
- `parentIsLoaded` (boolean) - Optional. Indicates if the parent is loaded.
```
--------------------------------
### Get Start Activity
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Access the main (start) Activity for the application. This property returns an AppCompatActivity instance.
```typescript
get startActivity(): AppCompatActivity
```
--------------------------------
### Get or Set Year Property
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Use this property to get or set the year of the DatePicker. No specific setup is required.
```typescript
year: number
```
--------------------------------
### Install Temurin JDK 21 with Chocolatey
Source: https://github.com/nativescript/docs/blob/main/content/setup/windows.md
Install the Temurin 21 JDK (Java Development Kit) using Chocolatey in an Administrator Command Prompt. This command installs the JDK without user interaction.
```bash
choco install -y temurin21
```
--------------------------------
### Install @nativescript/picker
Source: https://github.com/nativescript/docs/blob/main/content/plugins/picker.md
Install the picker plugin using npm. This command should be run in your NativeScript project's root directory.
```cli
npm install @nativescript/picker
```
--------------------------------
### Verify JDK Installation
Source: https://github.com/nativescript/docs/blob/main/content/setup/linux.md
Checks the installed Java Development Kit version. Verifies that Java and Javac are correctly set up.
```bash
$ java --version
$ javac --version
# Should print something like
$:openjdk 17.x.x 202x-xx-xx
OpenJDK Runtime Environment (build xx.x.x+xx-Ubuntu-xxx.xx)
OpenJDK 64-Bit Server VM (build xx.x.x+xx-Ubuntu-xxx.xx, mixed mode, sharing)
javac 17.x.x
```
--------------------------------
### Install Node.js on Ubuntu 20.04
Source: https://github.com/nativescript/docs/blob/main/content/setup/linux.md
Installs Node.js version 15.x using NodeSource repository. Ensure Node.js version 14 or higher is used.
```bash
# On Ubuntu 20.04, we used the following command to install latest node
$ curl -fsSL https://deb.nodesource.com/setup_15.x | sudo -E bash -
$ sudo apt-get install -y nodejs
```
--------------------------------
### profilingStart
Source: https://github.com/nativescript/docs/blob/main/content/api/index.md
Starts the general profiling process.
```APIDOC
## profilingStart
### Description
Starts the general profiling process.
### Method
Not specified
### Endpoint
Not specified
```
--------------------------------
### Get Hardware Device Volume with NativeScript
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Example of how to retrieve the current hardware device volume on both iOS and Android using NativeScript. The StackBlitz link contains the full implementation.
```typescript
import { Application } from "@nativescript/core/application";
export function getDeviceVolume(): number {
if (Application.ios) {
const audioSession = Application.ios.runtimeCore.AVAudioSession.sharedInstance();
return audioSession.outputVolume;
} else if (Application.android) {
const context = Application.android.context;
const audioManager = context.getSystemService(android.content.Context.AUDIO_SERVICE) as android.media.AudioManager;
return audioManager.getStreamVolume(android.media.AudioManager.STREAM_MUSIC);
}
return 0;
}
```
--------------------------------
### _setupAsRootView
Source: https://github.com/nativescript/docs/blob/main/content/api/class/ViewCommon.md
Internal method to set up the view as the root view.
```APIDOC
## _setupAsRootView
### Description
Internal method to set up the view as the root view.
### Method
(Not specified in source)
### Endpoint
(Not specified in source)
```
--------------------------------
### Install NativeScript UI ListView
Source: https://github.com/nativescript/docs/blob/main/content/plugins/nativescript-ui/rad-list-view.md
Install the NativeScript UI ListView plugin using npm. This command should be run from your application's root folder.
```bash
npm install nativescript-ui-listview
```
--------------------------------
### TabView Example in Solid
Source: https://github.com/nativescript/docs/blob/main/content/ui/tab-view.md
This example demonstrates the TabView component in a SolidJS NativeScript application, using JSX for templating.
```tsx
import { TabView, TabViewItem } from '@nativescript/core/ui/tab-view';
import { Label } from '@nativescript/core/ui/label';
export default function TabViewExample() {
return (
);
}
```
--------------------------------
### Handle Map Ready Event (Core)
Source: https://github.com/nativescript/docs/blob/main/content/plugins/google-maps.md
Listen to the map view's 'ready' event to get the GoogleMap instance. The 'ready' event is indicated by a '👈' marker in the example.
```xml
```
--------------------------------
### Home UI Setup with ListView
Source: https://github.com/nativescript/docs/blob/main/content/tutorials/build-a-master-detail-app-with-svelte.md
Integrates the ListView component to display a list of items. Ensure FlickService is imported and initialized to provide the data.
```xml
```
--------------------------------
### Vue Plugin Installation for PickerField
Source: https://github.com/nativescript/docs/blob/main/content/plugins/picker.md
Shows how to install and use the PickerField Vue plugin to enable its usage within a Vue application.
```js
import PickerField from '@nativescript/picker/vue'
app.use(PickerField)
```
--------------------------------
### TabView tabBackgroundColor CSS Example
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
CSS example demonstrating how to set the `tab-background-color` for a TabView component.
```css
.tab-view {
tab-background-color: #3d5a80;
}
```
--------------------------------
### GridLayout Example
Source: https://context7.com/nativescript/docs/llms.txt
Demonstrates how to use GridLayout to define rows and columns for arranging UI elements. Supports properties like rows, columns, and backgroundColor.
```xml
```
--------------------------------
### getAncestor(view: ViewBase, criterion: string | () => any)
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Gets an ancestor view of a specified type starting from a given view. The criterion can be a string representing a class name or a function that returns true for the desired ancestor.
```APIDOC
## getAncestor(view: ViewBase, criterion: string | () => any)
### Description
Gets an ancestor from a given type.
### Method Signature
```typescript
getAncestor(view: ViewBase, criterion: string | () => any): ViewBase
```
### Parameters
#### Path Parameters
- **view** (ViewBase) - Required - Starting view (child view).
- **criterion** (string | () => any) - Required - The type of ancestor view we are looking for. Could be a string containing a class name or an actual type.
### Returns
- **ViewBase** - An instance of a view (if found), otherwise undefined.
```
--------------------------------
### Install NativeScript CLI and Scaffold a New Project
Source: https://context7.com/nativescript/docs/llms.txt
Install the NativeScript CLI globally using npm. Use the `ns create` command to scaffold a new project, optionally specifying a flavor like Angular, Vue, React, Svelte, or plain JavaScript. You can also use official starter templates directly.
```bash
npm install -g nativescript
```
```bash
ns create myCoolApp
```
```bash
ns create myCoolApp --angular # Angular
ns create myCoolApp --vue # Vue (add --ts for TypeScript)
ns create myCoolApp --react # React
ns create myCoolApp --svelte # Svelte
ns create myCoolApp --js # Plain JavaScript
```
```bash
ns create myCoolApp --template @nativescript/template-blank
ns create myCoolApp --template @nativescript/template-drawer-navigation
ns create myCoolApp --template @nativescript/template-tab-navigation
ns create myCoolApp --template @nativescript/template-master-detail
```
```bash
ns devices
# Output:
# | # | Device Name | Platform | Device Identifier | Type | Status |
# | 1 | Pixel 4 API 33 | Android | emulator-5554 | Emulator | Connected |
# | 2 | iPhone 14 Pro | iOS | XXXX-XXXX-... | Emulator | Connected |
```
```bash
ns run ios
ns run android
```
```bash
ns clean
```
```bash
ns package-manager set yarn # or npm, pnpm, bun
```
--------------------------------
### TabView tabTextColor CSS Example
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
CSS example demonstrating how to set the `tab-text-color` for a TabView component.
```css
.tab-view {
tab-text-color: #fff;
}
```
--------------------------------
### Get Top Bar Height with NativeScript
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Demonstrates how to determine the height of the top bar (status bar and navigation bar) on both iOS and Android using NativeScript. The StackBlitz link offers a complete example.
```typescript
import { Application, Screen } from "@nativescript/core/application";
export function getTopBarHeight(): number {
if (Application.ios) {
const statusBarManager = Application.ios.window.windowScene.statusBarManager;
const statusBarHeight = statusBarManager.statusBarFrame.size.height;
const navigationBarHeight = Frame.topmost()?.ios?.controller?.navigationBar?.frame?.size?.height || 0;
return statusBarHeight + navigationBarHeight;
} else if (Application.android) {
const resources = Application.android.context.getResources();
const statusBarHeight = Math.round((24 * resources.displayMetrics.density));
const actionBarHeight = Math.round((56 * resources.displayMetrics.density)); // Default ActionBar height
return statusBarHeight + actionBarHeight;
}
return 0;
}
```
--------------------------------
### Single Selection Example
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Example demonstrating how to set up single item selection in RadListView using XML and TypeScript.
```APIDOC
## Single Selection Example
### Description
This example shows how to configure RadListView for single item selection and handle selection events.
### XML
```xml
```
### TypeScript
```ts
export function onItemSelected(args) {
const listView = args.object;
const selectedItems = listView.getSelectedItems();
let selectedTitles = 'Selected items: ';
for (let i = 0; i < selectedItems.length; i++) {
selectedTitles += selectedItems[i].itemName;
if (i < selectedItems.length - 1) {
selectedTitles += ', ';
}
}
const lblSelection = args.object.page.getViewById('txtSelection');
lblSelection.text = selectedTitles;
}
export function onItemDeselected(args) {
const listView = args.object;
const selectedItems = listView.getSelectedItems();
let selectedTitles = 'Selected items: ';
for (let i = 0; i < selectedItems.length; i++) {
selectedTitles += selectedItems[i].itemName;
if (i < selectedItems.length - 1) {
selectedTitles += ', ';
}
}
const lblSelection = args.object.page.getViewById('txtSelection');
lblSelection.text = selectedTitles;
}
```
```
--------------------------------
### profilingStart
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Starts a timer with a given name. This function only works if profiling is enabled.
```APIDOC
## profilingStart
### Description
Starts a timer with a specific name. Works only if profiling is enabled.
### Method
```typescript
profilingStart(name: string): void
```
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Parameters Table
| Parameter | Default | Description |
|---|---|---|
| `name` | `` | `string` Name of the timer. |
### Returns
_void_
```
--------------------------------
### DatePicker and TimePicker Example
Source: https://context7.com/nativescript/docs/llms.txt
Shows how to use DatePicker for selecting dates and TimePicker for selecting times. Supports properties for setting initial values and constraints.
```xml
```
--------------------------------
### Verify CocoaPods Installation
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Check your CocoaPods installation and version after installation or updates.
```bash
pod --version
```
--------------------------------
### Home Component Setup with FlickService
Source: https://github.com/nativescript/docs/blob/main/content/tutorials/build-a-master-detail-app-with-angular.md
Sets up the Home component and injects the FlickService to manage flick data. Ensure FlickService is correctly imported and available.
```typescript
import {
Component,
inject,
NO_ERRORS_SCHEMA,
} from "@angular/core";
import { NativeScriptCommonModule } from "@nativescript/angular";
import { FlickService } from "~/core/services/flick.service";
@Component({
selector: "ns-home",
templateUrl: "home.html",
imports: [NativeScriptCommonModule],
schemas: [NO_ERRORS_SCHEMA],
})
export class Home {
flickService = inject(FlickService);
}
```
--------------------------------
### Initialize Details Page ViewModel
Source: https://github.com/nativescript/docs/blob/main/content/tutorials/build-a-master-detail-app-with-plain-javascript.md
This JavaScript file sets up the `navigatingTo` function for the details page, creating an instance of `DetailsViewModel` and assigning it to the page's binding context.
```javascript
// app/details/details-page.js
import { DetailsViewModel } from './details-view-model'
export function navigatingTo(args) {
const page = args.object
page.bindingContext = new DetailsViewModel()
}
```
--------------------------------
### Plugin API Example
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
An example of a plugin providing a `nativescript.webpack.js` file to modify the webpack configuration, such as adding a new loader.
```APIDOC
## Plugin API
Plugins can provide a `nativescript.webpack.js` file to extend webpack configurations.
```javascript
/**
* This optionally provides typehints
* this requires "@nativescript/webpack" to be a dependency (dev)
*
* @param {typeof import("@nativescript/webpack")} webpack
*/
module.exports = (webpack) => {
// same API as the user configs
// for example make changes to the internal config with webpack-chain
webpack.chainWebpack(
(config, env) => {
// as an example - add a new rule for svg files
config.module
.rule('something')
.test(/\.something$/)
.use('something-loader')
.loader('something-loader')
} /*, options */,
)
}
```
```
--------------------------------
### Gateway Token Configuration (Development)
Source: https://github.com/nativescript/docs/blob/main/content/plugins/google-pay.md
Example configuration for gateway token during development. Remember to replace 'example' and 'exampleGatewayMerchantId' with your actual gateway provider and merchant ID in production.
```APIDOC
## Important note about payment token
During development you can use the example below for the gateway token configuration when creating a payment request.
```ts
parameters: {
gateway: 'example', // in production replace with your gateway provider
gatewayMerchantId: 'exampleGatewayMerchantId' // in production replace with your gateway provider merchant ID
}
```
```
--------------------------------
### Create Details Page Placeholder
Source: https://github.com/nativescript/docs/blob/main/content/tutorials/build-a-master-detail-app-with-svelte.md
Set up the basic file structure for the details page in `Details.svelte`. This serves as a starting point for building the detail view.
```xml
```
--------------------------------
### Install @valor/nativescript-websockets via NPM
Source: https://github.com/nativescript/docs/blob/main/content/recommended-plugins.md
Use this command to install the @valor/nativescript-websockets plugin using NPM. This plugin provides web-compatible WebSockets.
```bash
npm i --save @valor/nativescript-websockets
```
--------------------------------
### Install OpenJDK 17 with Homebrew
Source: https://github.com/nativescript/docs/blob/main/content/setup/macos.md
Installs the Temurin 17 JDK distribution using Homebrew. JDK 17 is recommended for compatibility with the bundled Gradle version in NativeScript.
```bash
brew install --cask temurin@17
```
--------------------------------
### Initialize Details Page Binding Context
Source: https://github.com/nativescript/docs/blob/main/content/tutorials/build-a-master-detail-app-with-plain-typescript.md
Set up the details page by importing necessary modules and initializing the DetailsViewModel when the page is navigated to.
```typescript
// app/details/details-page.ts
import { NavigatedData, Page } from '@nativescript/core'
import { DetailsViewModel } from './details-view-model'
export function navigatingTo(args: NavigatedData): void {
const page = args.object
page.bindingContext = new DetailsViewModel()
}
```
--------------------------------
### Get ActionBar
Source: https://github.com/nativescript/docs/blob/main/content/ui/action-bar.md
Gets the ActionBar that contains the ActionItem.
```ts
actionBar: ActionBar
```
--------------------------------
### Spaceman Shared Elements Example (TypeScript)
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
This example demonstrates shared element transitions using TypeScript with NativeScript. View the interactive example on StackBlitz.
```xml
```
--------------------------------
### Install nvm-windows with Chocolatey
Source: https://github.com/nativescript/docs/blob/main/content/setup/windows.md
Use Chocolatey to install nvm-windows, a Node Version Manager for Windows. This command installs nvm without prompting for user input.
```bash
choco install -y nvm
```
--------------------------------
### Install Ruby 3.3 with Homebrew
Source: https://github.com/nativescript/docs/blob/main/content/setup/macos.md
Installs a specific version of Ruby (3.3) using Homebrew and links it to make it available in your shell environment. This is recommended for managing Ruby versions.
```bash
brew install ruby@3.3
brew link ruby@3.3
```
--------------------------------
### Initialization and Event Handling
Source: https://github.com/nativescript/docs/blob/main/content/plugins/payments.md
Methods for initializing the plugin and handling payment-related events.
```APIDOC
## init()
### Description
Sets up the internal system of the plugin.
### Method
APICALL
### Endpoint
N/A
## paymentEvents
### Description
The RxJS Observable to emit the events to handle the purchase flow.
### Method
APICALL
### Endpoint
N/A
```
--------------------------------
### main
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
The main entry point for the application.
```APIDOC
### main
```typescript
main?: string
```
Defined in [@nativescript/core/config/config.interface.d.ts:154:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L154)
Main entry point for the application
```
--------------------------------
### Troubleshoot App Installation Failure on Device
Source: https://github.com/nativescript/docs/blob/main/content/troubleshooting.md
If you encounter an error during app installation on a device, check Xcode's signing and capabilities settings. Ensure your device is selected as the run target and a team is assigned.
```bash
Installing on device XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXX...
Unable to apply changes on device: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXX.
Error is: Failed to install /path/to/appname/platforms/ios/build/Debug-iphoneos/appname.ipa
on device with identifier XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXX. Error is: Could not install application.
```
--------------------------------
### ActionBar Example
Source: https://context7.com/nativescript/docs/llms.txt
Illustrates how to create a custom ActionBar with a title, navigation button, and action items. Supports platform-specific configurations.
```xml
```
--------------------------------
### Install @nativescript/rive
Source: https://github.com/nativescript/docs/blob/main/content/plugins/rive.md
Install the Rive plugin using npm.
```bash
npm install @nativescript/rive
```
--------------------------------
### Switch, Slider, and Progress Example
Source: https://context7.com/nativescript/docs/llms.txt
Demonstrates the use of interactive controls: Switch for boolean toggling, Slider for value selection within a range, and Progress for displaying progress.
```xml
```
--------------------------------
### get
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Gets the value of the specified property from the Observable instance.
```APIDOC
## get
### Description
Gets the value of the specified property from the Observable instance.
### Method Signature
```typescript
get(name: string): any
```
### Parameters
#### Path Parameters
- `name` (string) - Description: The name of the property to retrieve.
```
--------------------------------
### Start Measuring FPS
Source: https://github.com/nativescript/docs/blob/main/content/core/fps-meter.md
Register a callback to receive FPS metrics and then start the measurement. The callback receives the current FPS and the minimum FPS observed. Ensure to import the necessary functions from '@nativescript/core/fps-meter'.
```typescript
import {
removeCallback,
start,
stop,
addCallback,
running,
} from '@nativescript/core/fps-meter'
let callbackId: number
export function startFPSMeter(args: EventData) {
callbackId = addCallback((fps: number, minFps: number | undefined) => {
console.log(`Frames per seconds: ${fps.toFixed(2)}`)
console.log(minFps?.toFixed(2))
})
start()
console.log('Is running: ', running())
}
```
--------------------------------
### Working with Files and Folders
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Guides on performing common file and folder operations.
```APIDOC
## How to work with files and folders
### Accessing Folders
- **Documents folder**: Access the application's documents directory.
- **Temporary (Caches) folder**: Access the application's cache directory.
- **Root folder for the app**: Access the main application directory.
### Folder Operations
- **Creating a folder**: Create a new directory.
- **Renaming a folder**: Change the name of an existing directory.
- **Check if a folder exists**: Verify the existence of a directory.
- **Accessing a folder's content**: List files and subfolders within a directory.
- **Deleting the contents of a Folder**: Remove all files and subfolders within a directory.
- **Deleting a folder**: Remove an empty directory.
### File Operations
- **Creating, writing to and reading from a text file**: Perform basic text file operations.
- **Check if a file exists**: Verify the existence of a file.
- **Renaming a file**: Change the name of an existing file.
- **Saving a binary data to a file**: Write binary data to a file.
- **Reading a binary data from a file**: Read binary data from a file.
- **Deleting a file**: Remove a file.
### Path Operations
- **Normalizing a path**: Ensure a consistent path format.
```
--------------------------------
### DatePicker Component Example
Source: https://github.com/nativescript/docs/blob/main/content/ui/date-picker.md
Example of a DatePicker component in Vue.
```vue
```
--------------------------------
### DatePicker Component Example
Source: https://github.com/nativescript/docs/blob/main/content/ui/date-picker.md
Example of a DatePicker component in Svelte.
```svelte
```
--------------------------------
### TabView Example
Source: https://context7.com/nativescript/docs/llms.txt
Demonstrates the TabView component for creating tabbed interfaces. Supports defining multiple TabViewItems with custom content.
```xml
```
--------------------------------
### DatePicker Component Example
Source: https://github.com/nativescript/docs/blob/main/content/ui/date-picker.md
Example of a DatePicker component in SolidJS.
```tsx
import { DatePicker } from '@nativescript/core/ui/date-picker';
export default function DatePickerPage() {
return ;
}
```
--------------------------------
### DatePicker Component Example
Source: https://github.com/nativescript/docs/blob/main/content/ui/date-picker.md
Example of a DatePicker component in React.
```tsx
import { DatePicker } from '@nativescript/core/ui/date-picker';
export function DatePickerExample() {
return ;
}
```
--------------------------------
### Music Player UI with Shared Element Transitions
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Example of implementing a music player UI with shared element transitions. View the UI on StackBlitz.
```xml
```
--------------------------------
### DatePicker Component Example
Source: https://github.com/nativescript/docs/blob/main/content/ui/date-picker.md
Example of a DatePicker component in Angular.
```html
```
--------------------------------
### Spaceman Shared Elements Example (Vue 3)
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
This example demonstrates shared element transitions using Vue 3 with NativeScript. View the interactive example on StackBlitz.
```vue
```
--------------------------------
### Basic Switch Usage
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Demonstrates how to use the Switch component in different frameworks.
```APIDOC
## Basic Switch Usage
This section shows how to implement the Switch component across various development environments.
### XML
```xml
```
### HTML
```html
```
### TSX (React)
```tsx
{
setSwitchValue(args.value)
}}
>
```
### TSX (Vue)
```tsx
```
### Svelte
```svelte
```
### Vue
```vue
```
```
--------------------------------
### Install @nativescript-community/https
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Install the @nativescript-community/https plugin using npm or yarn.
```bash
npm i --save @nativescript-community/https
```
```bash
yarn add @nativescript-community/https
```
--------------------------------
### Install @nativescript/zip Plugin
Source: https://github.com/nativescript/docs/blob/main/content/plugins/zip.md
Install the @nativescript/zip plugin using npm.
```bash
npm install @nativescript/zip
```
--------------------------------
### Page Navigation Examples
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Demonstrates how to navigate between pages using the frame.navigate() and frame.goBack() methods, including options for history management and backstack visibility.
```APIDOC
## frame.navigate(detailsPage, { clearHistory: true })
This navigates to `detailsPage` and clears the navigation history.
## frame.goBack()
Navigates back to the previous page in the history. If there's no history, this is a no-op.
```
--------------------------------
### DatePicker Template Example
Source: https://github.com/nativescript/docs/blob/main/content/ui/date-picker.md
Example of a DatePicker component in XML for NativeScript.
```xml
```
--------------------------------
### Update pip and Install Six
Source: https://github.com/nativescript/docs/blob/main/content/setup/macos.md
Updates the Python package installer (pip) to the latest version and installs the 'six' compatibility library. This is crucial for ensuring Python package compatibility.
```bash
python3 -m pip install --upgrade pip
python3 -m pip install six
```
--------------------------------
### Configure ANDROID_HOME and PATH
Source: https://github.com/nativescript/docs/blob/main/content/setup/macos.md
Sets the ANDROID_HOME environment variable to the Android SDK location and adds the Android platform-tools to your system's PATH. Include these lines in your shell profile.
```bash
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools
```
--------------------------------
### getApplication
Source: https://github.com/nativescript/docs/blob/main/content/api/namespace/Utils-android.md
Retrieves the application instance.
```APIDOC
## getApplication
### Description
Retrieves the application instance.
### Method
(Not specified in source)
### Endpoint
(Not specified in source)
### Parameters
(No parameters specified in source)
### Request Example
(No request example specified in source)
### Response
#### Success Response (200)
(No response details specified in source)
#### Response Example
(No response example specified in source)
```
--------------------------------
### interactiveStart
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Initiates an interactive shared element transition. This method is static and part of the SharedTransitionHelper class.
```APIDOC
## interactiveStart
### Description
Initiates an interactive shared element transition.
### Method
static interactiveStart
### Parameters
#### Path Parameters
- `state` (SharedTransitionState) - Required - The current transition state.
- `interactiveState` (TransitionInteractiveState) - Required - The interactive state of the transition.
- `type` (TransitionNavigationType) - Required - The type of navigation.
### Returns
void
```
--------------------------------
### Basic ListView with XML and TypeScript
Source: https://github.com/nativescript/docs/blob/main/content/ui/list-view.md
Demonstrates the basic setup of a ListView component using XML for the template and TypeScript for the component logic.
```xml
```
```typescript
import { ListView } from '@nativescript/core';
export function pageLoaded(args) {
const page = args.object;
const listView = page.getViewById('myListView') as ListView;
const myItems = [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' },
];
listView.items = myItems;
}
```
--------------------------------
### Activity Started Event
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Represents the event triggered when an activity is started. This is a readonly property.
```typescript
activityStartedEvent: "activityStarted" = AndroidApplication.activityStartedEvent
```
--------------------------------
### Get CollectionReference from DocumentReference
Source: https://github.com/nativescript/docs/blob/main/content/plugins/firebase-firestore.md
Use the collection() method on a DocumentReference to get a CollectionReference to a subcollection.
```typescript
document: DocumentReference = firebase().firestore().doc(documentPath)
document.collection(collectionPath)
```
--------------------------------
### startMonitoring
Source: https://github.com/nativescript/docs/blob/main/content/api/namespace/Connectivity.md
Starts monitoring network connectivity changes.
```APIDOC
## startMonitoring
### Description
Starts monitoring network connectivity changes.
### Method
(Not specified in source)
### Endpoint
(Not specified in source)
### Parameters
(None specified in source)
### Request Example
(Not specified in source)
### Response
#### Success Response (200)
- (Response details not specified in source)
#### Response Example
(Not specified in source)
```
--------------------------------
### startAt()
Source: https://github.com/nativescript/docs/blob/main/content/plugins/firebase-firestore.md
Creates a new query that starts at the given document or field values.
```APIDOC
## startAt()
### Description
Creates a new query that starts at the given document or field values.
### Method
`collectionReference.startAt(snapshot)`
`collectionReference.startAt(fieldValues)`
### Parameters
#### Path Parameters
- **snapshot** (DocumentSnapshot) - The document snapshot to start at.
- **fieldValues** (DocumentSnapshot | FieldValue[]) - An array of field values to start at.
```
--------------------------------
### Install Tailwind CSS Dependencies
Source: https://github.com/nativescript/docs/blob/main/content/plugins/tailwindcss.md
Install the necessary packages for Tailwind CSS v4 or v3.
```bash
npm install --save @nativescript/tailwind tailwindcss
```
--------------------------------
### FlexboxLayout Example
Source: https://context7.com/nativescript/docs/llms.txt
Shows how to use FlexboxLayout for flexible one-dimensional layouts. Supports properties like flexDirection, flexWrap, and justifyContent.
```xml
```
--------------------------------
### Get Device SDK Version
Source: https://github.com/nativescript/docs/blob/main/content/core/device.md
Get the SDK version of the device using the `sdkVersion` property.
```typescript
const sdkVersion: string = Device.sdkVersion // 33
```
--------------------------------
### mainEntry
Source: https://github.com/nativescript/docs/blob/main/content/public/llms-full.txt
Gets or sets the main entry point of the application.
```APIDOC
## mainEntry
### Description
Gets or sets the main entry point of the application.
### Method
Property
### Endpoint
N/A
### Parameters
None
### Request Example
None
### Response
- **any** - The main entry point of the application.
```