NativeScript

https://docs.nativescript.org
Admin
NativeScript is an open-source framework for building native iOS, Android, Web, and Vision Pro...
Tokens:779,599
Snippets:5,398
Trust Score:9.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Setup NativeScript Plugin Workspace Dependencies

Source: https://docs.nativescript.org/plugins/plugin-workspace-guide

Run this command to install all necessary dependencies for the workspace. It is typically run once after cloning but can also be used anytime to clean or reset workspace dependencies.

```bash
npm run setup
```

--------------------------------

### Install Python 3 and 'six' package

Source: https://docs.nativescript.org/setup/macos

These commands guide through installing Python 3 using Homebrew, verifying its installation, upgrading pip, and finally installing the 'six' compatibility library.

```bash
brew install python
```

```bash
python3 --version
```

```bash
python3 -m pip install --upgrade pip\npython3 -m pip install six
```

--------------------------------

### Verify Node.js and npm installation

Source: https://docs.nativescript.org/setup/linux

Run these commands to confirm that Node.js and npm (Node Package Manager) are correctly installed and to check their versions. The output should resemble the example provided.

```bash
node -v
npm -v
# Should print something like
#:v22.x.x
10.x.x
```

--------------------------------

### Example package.json structure for NativeScript

Source: https://docs.nativescript.org/project-structure/package-json

Demonstrates a typical `package.json` file for a NativeScript application, showing `dependencies` and `devDependencies` required for a basic setup.

```json
{
  "name": "my-cool-app",
  "main": "src/main.ts",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@nativescript/core": "~8.8.0"
  },
  "devDependencies": {
    "@nativescript/android": "~8.8.0",
    "@nativescript/ios": "~8.8.0",
    "@nativescript/types": "~8.8.0",
    "@nativescript/webpack": "~5.0.0",
    "typescript": "~5.5.0"
  }
}
```

--------------------------------

### Install Ruby 3.3+ and configure PATH

Source: https://docs.nativescript.org/setup/macos

These commands install Ruby 3.3 or newer via Homebrew and then provide examples for adding the Ruby and Rubygems binary paths to the shell's PATH environment variable, ensuring proper accessibility.

```bash
brew install ruby@3.3\nbrew link ruby@3.3
```

```shell
# Add ruby and rubygems to the path\nexport PATH=/opt/homebrew/opt/ruby/bin:/opt/homebrew/lib/ruby/gems/3.3.0/bin:$PATH\n# or\nexport PATH=/opt/homebrew/opt/ruby@3.3/bin:/opt/homebrew/lib/ruby/gems/3.3.0/bin:$PATH\n# or\nexport PATH=/usr/local/lib/ruby/bin:/usr/local/lib/ruby/gems/3.3.0/bin:$PATH
```

--------------------------------

### Install NativeScript SwiftUI Plugin

Source: https://docs.nativescript.org/plugins/swift-ui

This snippet shows how to install the `@nativescript/swift-ui` plugin using npm, which is required to integrate SwiftUI views into NativeScript applications.

```npm
npm install @nativescript/swift-ui
```

--------------------------------

### Run NativeScript Plugin Workspace Migrations

Source: https://docs.nativescript.org/plugins/plugin-workspace-guide

Details the subsequent steps to install updates and execute pending migrations after initiating the migration process. This ensures the workspace is up to date with configurations and core dependencies.

```bash
// install latest updates
npm install

// now run the migrations
npx nx migrate --run-migrations=migrations.json
```

--------------------------------

### Verify Node.js and npm installation

Source: https://docs.nativescript.org/setup/windows

These commands verify that Node.js and npm (Node Package Manager) have been successfully installed by displaying their respective version numbers. They should be run in a new command prompt after the installation process.

```bash
node -v
npm -v
```

--------------------------------

### Install and verify Node.js with nvm

Source: https://docs.nativescript.org/setup/macos

These commands demonstrate how to install the latest Node.js version using nvm and then verify both Node.js and npm installations by checking their versions.

```bash
nvm install node
```

```bash
node -v\nnpm -v
```

--------------------------------

### CocoaPods Not Installed Warning Example

Source: https://docs.nativescript.org/troubleshooting

An example of the warning message displayed when CocoaPods is not properly installed or configured, indicating that iOS projects with plugins might fail to build.

```bash
WARNING: CocoaPods is not installed or is not configured properly.
 You will not be able to build your projects for iOS if they contain plugin with CocoaPod file.
To be able to build such projects, verify that you have installed CocoaPods (sudo gem install cocoapods).
```

--------------------------------

### Install and Use NativeScript ML Kit Object Detection

Source: https://docs.nativescript.org/plugins/mlkit-core

This snippet provides instructions for installing the @nativescript/mlkit-object-detection plugin and an example of how to use it for object detection in a NativeScript app. It illustrates handling DetectionEvent to retrieve ObjectResult data.

```cli
npm install @nativescript/mlkit-object-detection
```

```ts
import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
import { ObjectResult } from '@nativescript/mlkit-object-detection'
onDetection(event: DetectionEvent){
    if(event.type === DetectionType.Object){
        const objects: ObjectResult[] = event.data;
    }
}
```

--------------------------------

### Install NativeScript IQKeyboardManager Plugin

Source: https://docs.nativescript.org/plugins/iqkeyboardmanager

Instructions to install the `@nativescript/iqkeyboardmanager` plugin using npm from the root folder of your project.

```cli
npm install @nativescript/iqkeyboardmanager
```

--------------------------------

### Focus on Single NativeScript Plugin for Isolated Development

Source: https://docs.nativescript.org/plugins/plugin-workspace-guide

Start the interactive development server. This allows selecting a specific package to focus on, isolating it in demo apps and supported IDEs (like VS Code) for focused development and debugging.

```bash
npm start
```

--------------------------------

### Install NativeScript Background HTTP Plugin

Source: https://docs.nativescript.org/plugins/background-http

Install the @nativescript/background-http plugin using the npm package manager.

```cli
npm install @nativescript/background-http
```

--------------------------------

### Install NativeScript UI ListView Plugin

Source: https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view

Instructions to install the NativeScript UI ListView plugin using npm.

```bash
npm install nativescript-ui-listview
```

--------------------------------

### Verify JDK installation

Source: https://docs.nativescript.org/setup/linux

Use these commands to verify that the Java Development Kit (JDK) is installed correctly and to check its version. The output should show the installed OpenJDK version.

```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 NativeScript Localize Plugin

Source: https://docs.nativescript.org/plugins/localize

Command to install the @nativescript/localize plugin using npm.

```cli
npm install @nativescript/localize
```

--------------------------------

### Install NativeScript CLI Globally (macOS)

Source: https://docs.nativescript.org/setup/macos

This command installs the NativeScript Command Line Interface globally using npm. A global installation allows the ns command to be executed from any directory, enabling the creation, building, and management of NativeScript projects.

```bash
npm install -g nativescript
```

--------------------------------

### Get Main Android Start Activity

Source: https://docs.nativescript.org/core/application

Gets the main (start) Activity for the application.

```ts
startActivity = androidApp.startActivity
```

--------------------------------

### Create NativeScript Svelte Project

Source: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-svelte

This command initializes a new NativeScript project named 'example-app' configured with Svelte. It sets up the basic project structure and installs necessary dependencies for development.

```bash
ns create example-app --svelte
```

--------------------------------

### Install NativeScript Plugin using CLI

Source: https://docs.nativescript.org/guide/development-workflow/using-packages

Demonstrates how to install a NativeScript plugin using the `ns plugin add` command. This command behaves like `npm install` but also modifies existing platform projects for proper linking.

```bash
ns plugin add <plugin-name>
```

```bash
ns plugin add @nativescript/camera
```

--------------------------------

### Create New NativeScript TypeScript Project

Source: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-typescript

This command initializes a new NativeScript project named 'example-app' configured to use TypeScript. It sets up the basic project structure and installs necessary dependencies, preparing the environment for development.

```bash
ns create example-app --ts
```

--------------------------------

### Install JDK 17 using Chocolatey

Source: https://docs.nativescript.org/setup/windows

This command installs the Temurin 17 OpenJDK binaries using the Chocolatey package manager. It requires an Administrator Command Prompt to execute successfully.

```bash
choco install -y temurin17
```

--------------------------------

### Full HTTP Request Tracing Example with NativeScript Firebase Performance (TypeScript)

Source: https://docs.nativescript.org/plugins/firebase-performance

A comprehensive example showcasing the entire process of tracing an HTTP GET request using Firebase Performance Monitoring. It includes initializing the metric, adding attributes, starting and stopping the trace, and handling response information within an asynchronous function.

```ts
import { firebase } from '@nativescript/firebase-core'
import '@nativescript/firebase-performance'

async function getRequest(url) {
  // Define the network metric
  const metric = await firebase().perf().newHttpMetric(url, 'GET')

  // Define meta details
  metric.putAttribute('user', 'abcd')

  // Start the metric
  await metric.start()

  // Perform a HTTP request and provide response information
  const response = await fetch(url)
  metric.setHttpResponseCode(response.statusCode)
  metric.setResponseContentType(response.headers['Content-Type'])
  metric.setResponsePayloadSize(response.headers['Content-Length'])

  // Stop the metric
  await metric.stop()

  return response.toJSON()
}

// Call API
getRequest('https://api.com').then((json) => {
  console.log(json)
})
```

--------------------------------

### Create NativeScript JavaScript Application

Source: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-javascript

Command to initialize a new NativeScript project using JavaScript. This creates a new directory with a skeleton app and installs necessary packages and dependencies.

```bash
ns create example-app --js
```

--------------------------------

### Get NativeScript Start Activity

Source: https://docs.nativescript.org/api/class/AndroidApplication

Retrieves the main (start) `AppCompatActivity` for the NativeScript application.

```APIDOC
startActivity: AppCompatActivity
  Description: The main (start) Activity for the application.
```

--------------------------------

### Install Node.js using nvm-windows

Source: https://docs.nativescript.org/setup/windows

This command installs the latest stable version of Node.js using the nvm-windows version manager. It should be executed in a command prompt after nvm-windows has been successfully set up.

```bash
nvm install node
```

--------------------------------

### Install Jest for Testing

Source: https://docs.nativescript.org/plugins/detox

Installs Jest, `jest-cli`, and `jest-circus` as development dependencies. Jest is used as the test runner for Detox tests in this setup.

```cli
npm install jest jest-cli jest-circus --save-dev --no-package-lock
```

--------------------------------

### Verify Node.js and npm Installation (macOS)

Source: https://docs.nativescript.org/setup/macos

These commands check the installed versions of Node.js and npm (Node Package Manager) on macOS. Running them confirms that both tools are correctly installed and accessible in the system's PATH, which is crucial for managing JavaScript dependencies.

```bash
node -v
npm -v
```

--------------------------------

### Get Device Operating System Name in NativeScript

Source: https://docs.nativescript.org/core/device

To get the operating system name of the device, use the os property of the Device class. This returns the OS name, for example, 'Android'.

```typescript
const os: string = Device.os // Android
```

--------------------------------

### Create NativeScript React TypeScript Project

Source: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-react

This command initializes a new NativeScript application configured with React and TypeScript. It sets up the basic project structure and installs necessary dependencies, preparing the environment for development.

```bash
ns create example-app --react
```

--------------------------------

### Install NativeScript Picker Plugin

Source: https://docs.nativescript.org/plugins/picker

Installs the `@nativescript/picker` plugin using npm, making it available for use in NativeScript projects.

```cli
npm install @nativescript/picker
```

--------------------------------

### Create NativeScript Angular App

Source: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular

Command to initialize a new NativeScript Angular project using the NativeScript CLI, creating a new directory and installing dependencies.

```bash
ns create example-app --ng
```

--------------------------------

### Install @valor/nativescript-websockets for WebSocket support

Source: https://docs.nativescript.org/recommended-plugins

Install the `@valor/nativescript-websockets` plugin to add web-compatible WebSocket functionality to your NativeScript application. This plugin provides essential network communication capabilities.

```bash
npm i --save @valor/nativescript-websockets
```

```bash
yarn add @valor/nativescript-websockets
```

--------------------------------

### Install and Use NativeScript ML Kit Text Recognition

Source: https://docs.nativescript.org/plugins/mlkit-core

This snippet details the installation of the @nativescript/mlkit-text-recognition plugin and provides an example for text recognition in NativeScript. It illustrates how to handle DetectionEvent to retrieve TextResult.

```cli
npm install @nativescript/mlkit-text-recognition
```

```ts
import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
import { TextResult } from '@nativescript/mlkit-text-recognition';
onDetection(event: DetectionEvent){
    if(event.type === DetectionType.Text){
        const text: TextResult = event.data;
    }
}
```

--------------------------------

### Example PostCSS configuration for Tailwind CSS v4 with other plugins

Source: https://docs.nativescript.org/plugins/tailwindcss

This `postcss.config.js` example demonstrates how to include `@nativescript/tailwind` alongside other PostCSS plugins when using Tailwind CSS v4, which typically handles its own setup automatically.

```js
// postcss.config.js (Example for v4 with other plugins)

module.exports = {
  plugins: [
    '@nativescript/tailwind', // Handles Tailwind v4 setup
    // Add other PostCSS plugins here
    '@csstools/postcss-is-pseudo-class'
  ]
}
```

--------------------------------

### Verify NativeScript Android environment setup

Source: https://docs.nativescript.org/setup/windows

Execute this command in a new Command Prompt window to confirm that your NativeScript Android development environment is correctly configured. It performs checks for all necessary dependencies and settings.

```bash
ns doctor android
```

--------------------------------

### Install NativeScript CLI for visionOS Development

Source: https://docs.nativescript.org/guide/visionos

This command updates or installs the NativeScript CLI to the latest version, which is required for visionOS development (version 8.7+). It ensures you have the necessary tools to create and manage visionOS projects.

```bash
npm install -g nativescript@latest
```

--------------------------------

### Install NativeScript Directions Plugin

Source: https://docs.nativescript.org/plugins/directions

This command installs the @nativescript/directions plugin into your NativeScript project using npm.

```cli
npm install @nativescript/directions
```

--------------------------------

### Sign in with Facebook account using Firebase Auth and NativeScript Facebook plugin

Source: https://docs.nativescript.org/plugins/firebase-auth

This section outlines the process for signing in a user with their Facebook account. Before starting, configure your Facebook Developer App to enable Facebook login and obtain the App ID and App secret. Enable the Facebook sign-in provider in Firebase Console. Install the `@nativescript/facebook` plugin and use `LoginManager.logInWithPermissions` to get user credentials, then create a Firebase credential and sign in with `signInWithCredential`.

```ts
import { firebase } from '@nativescript/firebase-core'
import { FacebookAuthProvider } from '@nativescript/firebase-auth'
import { LoginManager, AccessToken } from '@nativescript/facebook'

LoginManager.logInWithPermissions(['public_profile', 'email']).then(
  (result) => {
    // Once signed in, get the users AccesToken
    const data = await AccessToken.currentAccessToken()

    // Create a Firebase credential with the AccessToken
    const facebookCredential = FacebookAuthProvider.credential(data.tokenString)

    // Sign-in the user with the credential
    return firebase().auth().signInWithCredential(facebookCredential)
  },
)
```

--------------------------------

### Install Nativescript Camera Plugin via npm

Source: https://docs.nativescript.org/plugins/camera

Installs the @nativescript/camera plugin into your project. This command should be run in the root directory of your Nativescript application.

```CLI
npm install @nativescript/camera --save
```

--------------------------------

### Clone NativeScript Plugin Workspace

Source: https://docs.nativescript.org/plugins/plugin-workspace-guide

Instructions to clone the newly created NativeScript plugin workspace from GitHub to begin development. This command initializes your local environment with the workspace files.

```bash
git clone https://github.com/nstudio/nativescript-ui-kit.git
Cloning into 'nativescript-ui-kit'...

cd nativescript-ui-kit
```

--------------------------------

### Define a Basic SwiftUI View

Source: https://docs.nativescript.org/plugins/swift-ui

This Swift code defines a simple `SampleView` using SwiftUI, which displays 'Hello World' text. This view can then be integrated into a NativeScript application.

```swift
import SwiftUI

struct SampleView: View {

  var body: some View {
    VStack {
      Text("Hello World")
        .padding()
    }
  }
}
```

--------------------------------

### Filter results using startAt in Firebase Realtime Database

Source: https://docs.nativescript.org/plugins/firebase-database

Instead of limiting by count, you can filter results by starting at a specific node value using methods like `startAt`. This example demonstrates querying users ordered by age, starting from those aged 21 or older.

```TypeScript
import { firebase } from '@nativescript/firebase-core'

await firebase()
  .database()
  .ref('users')
  .orderByChild('age')
  .startAt(21)
  .once('value')
```

--------------------------------

### Get backgroundPosition property (NativeScript View)

Source: https://docs.nativescript.org/api/class/ViewCommon

Retrieves the `backgroundPosition` property, which sets the starting position of a background image. This is a getter property that returns a string.

```APIDOC
get backgroundPosition(): string
Returns: string
```

--------------------------------

### Install NativeScript CLI globally using npm

Source: https://docs.nativescript.org/setup/windows

This command installs the NativeScript Command Line Interface (CLI) globally on your system. The CLI is a crucial tool for developing, building, and managing NativeScript applications.

```bash
npm install -g nativescript
```

--------------------------------

### Single Root Frame Example

Source: https://docs.nativescript.org/ui/frame

This example shows a single root frame that navigates to the `main-page` by default, and allows the user to navigate further within this frame (spanning the full-screen).

```xml
<!-- app-root -->
<Frame defaultPage="main-page"/>
```

--------------------------------

### Verify JDK installation

Source: https://docs.nativescript.org/setup/windows

This command checks if the Java Development Kit (JDK) is correctly installed and accessible in the system's PATH environment variable by displaying the Java compiler version. If a version number is printed, the JDK is correctly configured.

```bash
javac --version
```

--------------------------------

### Define Basic CSS Keyframes with From/To

Source: https://docs.nativescript.org/guide/animations

This example illustrates a fundamental CSS `@keyframes` rule, defining an animation's start (`from`) and end (`to`) states for a property like `background-color`.

```css
@keyframes example {
  from {
    background-color: red;
  }
  to {
    background-color: green;
  }
}
```

--------------------------------

### Run Application

Source: https://docs.nativescript.org/api/class/ApplicationCommon

Starts the NativeScript application, optionally with a specified entry point.

```APIDOC
run(entry?: string | NavigationEntry): void
Parameters:
  entry: string | NavigationEntry
Returns: void
```

--------------------------------

### GridLayout with Mixed Sizing and Merged Cells

Source: https://docs.nativescript.org/ui/grid-layout

This example illustrates a complex GridLayout setup featuring responsive design, a mix of width and height settings, and the use of merged cells.

```xml
<GridLayout columns="40, auto, *" rows="40, auto, *" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43B3F4" />
  <Label text="0,1" row="0" col="1" colSpan="2" backgroundColor="#075B88" />
  <Label text="1,0" row="1" col="0" rowSpan="2" backgroundColor="#1089CA" />
  <Label text="1,1" row="1" col="1" backgroundColor="#43B3F4" />
  <Label text="1,2" row="1" col="2" backgroundColor="#1089CA" />
  <Label text="2,1" row="2" col="1" backgroundColor="#075B88" />
  <Label text="2,2" row="2" col="2" backgroundColor="#43B3F4" />
</GridLayout>
```

--------------------------------

### Get Root View Controller (iOS)

Source: https://docs.nativescript.org/api/namespace/Utils-ios

Obtains the root `UIViewController` of the current application's window on iOS. This is often the starting point for navigating the view hierarchy.

```APIDOC
getRootViewController(): UIViewController
  Returns: UIViewController
```

--------------------------------

### Initialize Android Localization on App Launch

Source: https://docs.nativescript.org/plugins/localize

For Android, call `androidLaunchEventLocalizationHandler` within the `Application.launchEvent` handler in `main.ts` to ensure proper localization setup when the app starts.

```ts
import { Application } from '@nativescript/core'
import { androidLaunchEventLocalizationHandler } from '@nativescript/localize'

Application.on(Application.launchEvent, (args) => {
  if (args.android) {
    androidLaunchEventLocalizationHandler()
  }
})
```

--------------------------------

### Get FirebaseApp Instance for RemoteConfig

Source: https://docs.nativescript.org/plugins/firebase-remote-config

A read-only property that returns the FirebaseApp instance associated with the current RemoteConfig setup. This allows access to the Firebase application context.

```TypeScript
import { firebase } from '@nativescript/firebase-core'

remoteConfigApp: FirebaseApp = firebase().remoteConfig().app
```

--------------------------------

### getVisibleViewController()

Source: https://docs.nativescript.org/core/utils

Gets the currently visible (topmost) `UIViewController` in the iOS application hierarchy. It requires a root `UIViewController` to start the search from, typically the window's root view controller.

```TypeScript
const visibleView: UIViewController = Utils.ios.getVisibleViewController(rootViewController: UIViewController)
```

--------------------------------

### Default JDK binaries path for PATH environment variable

Source: https://docs.nativescript.org/setup/windows

This is the typical default installation path for the JDK binaries (e.g., Temurin 17) installed via Adoptium. This path needs to be added to the system's PATH environment variable if the 'javac --version' command fails.

```plaintext
C:\Program Files\Eclipse Adoptium\jdk-17.X.X\bin
```

--------------------------------

### Get Ancestor View in NativeScript

Source: https://docs.nativescript.org/api

Retrieves an ancestor view of a specified type from the visual tree, starting from a given child view. The ancestor can be identified by its class name or type.

```APIDOC
getAncestor(view: ViewBase, criterion: string | () => any): ViewBase
  Description: Gets an ancestor from a given type.
  Parameters:
    view: [ViewBase](/api/class/ViewBase) - Starting view (child view).
    criterion: string | () => any - The type of ancestor view we are looking for. Could be a string containing a class name or an actual type. Returns an instance of a view (if found), otherwise undefined.
  Returns: [ViewBase](/api/class/ViewBase)
```

--------------------------------

### Svelte Native: Initial Home Component with Navigation Setup

Source: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-svelte

This code defines the `Home.svelte` component's UI and initial script. It sets up a `listView` to display flick items and includes the `navigate` function from `@nativescript-community/svelte-native` to handle navigation to the `Details` component, passing the `flickId` as a prop.

```xml
<!-- app/pages/Home.svelte -->

<page>
  <actionBar title="NativeFlix" />
  <stackLayout height="100%">
    <listView height="100%" separatorColor="transparent" items="{flicks}">
      <Template let:item>
        <gridLayout
          height="280"
          borderRadius="10"
          class="bg-secondary"
          rows="*, auto, auto"
          columns="*"
          margin="5 10"
          padding="0"
        >
          <image row="0" margin="0" stretch="aspectFill" src="{item.image}" />
          <label
            row="1"
            margin="10 10 0 10"
            fontWeight="700"
            class="text-primary"
            fontSize="18"
            text="{item.title}"
          />
          <label
            row="2"
            margin="0 10 10 10"
            class="text-secondary"
            fontSize="14"
            textWrap="true"
            text="{item.description}"
          />
        </gridLayout>
      </Template>
    </listView>
  </stackLayout>
</page>

<script>
  // Add this 👇
  import { navigate } from '@nativescript-community/svelte-native'
  import { Template } from '@nativescript-community/svelte-native/components'
  import { FlickService } from '../services/FlickService'
  // Add this 👇
  import Details from './Details.svelte'

  let flicks = FlickService.getInstance().getFlicks()

  // Add this 👇
  function onFlickTap(event) {
    navigate({
      page: Details,
      props: { flickId: flicks[event.index].id }
    })
  }
</script>
```

--------------------------------

### Initiate NativeScript Plugin Workspace Migration with Nx

Source: https://docs.nativescript.org/plugins/plugin-workspace-guide

Describes the initial step to update a NativeScript plugin workspace. This command fetches the latest version of `@nativescript/plugin-tools` and analyzes for available migrations.

```bash
npx nx migrate @nativescript/plugin-tools
```

--------------------------------

### Import and Use NativeScript Camera Plugin

Source: https://docs.nativescript.org/guide/development-workflow/using-packages

Provides an example of importing and calling a method from the `@nativescript/camera` plugin. This snippet demonstrates the basic usage pattern for integrating an installed plugin into your application code.

```javascript
import { requestPermissions } from '@nativescript/camera'
requestPermissions()
```

```typescript
import { requestPermissions } from '@nativescript/camera'
requestPermissions()
```

--------------------------------

### NativeScript Debugger Connection URL Output

Source: https://docs.nativescript.org/guide/debugging

Example console output showing the debugger proxy setup and the URL to connect Chrome DevTools to the NativeScript application's debugging session.

```bash
Setting up debugger proxy...
Press Ctrl + C to terminate, or disconnect.

Opened localhost 41000
To start debugging, open the following URL in Chrome:
devtools://devtools/bundled/inspector.html?ws=localhost:41000
```

--------------------------------

### Default NativeScript Configuration Example

Source: https://docs.nativescript.org/configuration/nativescript

Illustrates the basic structure and common properties of a `nativescript.config.ts` file. This example includes settings for the application ID, source code path, resource path, and initial Android-specific configurations like V8 flags and marking mode.

```TypeScript
import { NativeScriptConfig } from '@nativescript/core'

export default {
  id: 'org.nativescript.app',
  appPath: 'app',
  appResourcesPath: 'App_Resources',
  android: {
    v8Flags: '--expose_gc',
    markingMode: 'none',
  },
} as NativeScriptConfig
```

--------------------------------

### Run NativeScript React App on iOS and Android

Source: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-react

These commands navigate into the newly created project directory and launch the NativeScript application on connected iOS or Android devices/emulators. The ns run command also enables live synchronization of code changes.

```bash
cd example-app

// run on iOS
ns run ios

// run on Android
ns run android
```

--------------------------------

### Get Visible View Controller from Root (iOS)

Source: https://docs.nativescript.org/api/namespace/Utils-ios

Recursively finds and returns the currently visible `UIViewController` starting from a given root view controller. This is helpful for determining the active screen in complex navigation flows.

```APIDOC
getVisibleViewController(rootViewController: UIViewController): UIViewController
  Parameters:
    rootViewController: UIViewController - The root view controller to start the search from.
  Returns: UIViewController
```

--------------------------------

### Run NativeScript Angular App

Source: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular

Commands to navigate into the project directory and run the NativeScript Angular application on iOS or Android devices/simulators.

```bash
cd example-app

// run on iOS
ns run ios

// run on Android
ns run android
```

--------------------------------

### Install @nativescript-community/ui-image for advanced image handling

Source: https://docs.nativescript.org/recommended-plugins

Enhance image display and caching in NativeScript applications using `@nativescript-community/ui-image`. This plugin integrates `SDWebImage` for iOS and `Fresco` for Android, offering an alternative image caching solution.

```bash
npm i --save @nativescript-community/ui-image
```

```bash
yarn add @nativescript-community/ui-image
```

--------------------------------

### setupInteractiveGesture Function API Definition

Source: https://docs.nativescript.org/api/class/Transition

Defines an interactive gesture setup function. This function is typically used to associate a callback with a specific view for handling interactive transitions or animations. It takes a start callback and the target view as arguments.

```APIDOC
setupInteractiveGesture(startCallback: () => void, view: View): void
  Parameters:
    startCallback: () => void - A callback function that is executed when the interactive gesture starts.
    view: View - The view instance to which the interactive gesture is attached.
  Returns: void
```

--------------------------------

### Set up a local server for testing NativeScript background HTTP uploads

Source: https://docs.nativescript.org/plugins/background-http

Instructions to start a simple Node.js server locally to accept file uploads, useful for testing the NativeScript background HTTP plugin. This server listens on a specified port, and the URL in your app should be updated to match its address and port.

```cli
cd demo-server
npm i
node server 8080
```

--------------------------------

### Sign in with Twitter account using NativeScript Firebase

Source: https://docs.nativescript.org/plugins/firebase-auth

Before authenticating with Twitter, enable the Twitter sign-in provider in Firebase. Install the `@nativescript/twitter` plugin and call `TwitterSignIn.logIn()` to get user credentials (authToken, authTokenSecret), then use `TwitterAuthProvider.credential()` to create a Firebase credential and sign in.

```ts
import { firebase } from '@nativescript/firebase-core'
import { TwitterAuthProvider } from '@nativescript/firebase-auth'
import { Twitter, TwitterSignIn } from '@nativescript/twitter'

Twitter.init('TWITTER_CONSUMER_KEY', 'TWITTER_CONSUMER_SECRET') // called earlier in the app

// Perform the login request
TwitterSignIn.logIn().then((data) => {
  const twitterAuthCredential = TwitterAuthProvider.credential(
    data.authToken,
    data.authTokenSecret,
  )

  firebase().auth().signInWithCredential(twitterAuthCredential)
})
```

--------------------------------

### Create NativeScript Vue Project

Source: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-vue

Use the NativeScript CLI `ns create` command to scaffold a new NativeScript application. Specify `--vue` for Vue.js integration and `--ts` for TypeScript support, generating a basic project structure and installing dependencies.

```bash
ns create example-app --vue --ts
```

--------------------------------

### Perform One-Time Read of a Firestore Document (TypeScript)

Source: https://docs.nativescript.org/plugins/firebase-firestore

This example shows how to fetch a single document from a Firestore collection using the `get()` method. It checks for document existence and logs specific data fields if found. Error handling is included for failed operations.

```typescript
import { firebase } from '@nativescript/firebase-core'
const users = firebase().firestore().collection('users')

users
  .doc(documentId)
  .get()
  .then((snapshot) => {
    if (snapshot && !snapshot.exists) {
      conosle.log('Document does not exist')
      return
    }
    console.log(
      `Full Name: ${snapshot.data()['full_name']} ${snapshot.data()['last_name']}`,
    )
  })
  .catch((error) => console.error('Failed to add user:', error))
```

--------------------------------

### View Resolved Internal Webpack Configuration in NativeScript

Source: https://docs.nativescript.org/configuration/webpack

This snippet displays an example of the resolved internal webpack configuration, including rules like 'js' with 'babel-loader'. It's useful for understanding the default setup and identifying specific configurations to modify or reuse.

```JavaScript
// ...
/* config.module.rule('js') */
{
  test: /\.js$/,
  exclude: [
    /node_modules/
  ],
  use: [
    /* config.module.rule('js').use('babel-loader') */
    {
      loader: 'babel-loader',
      options: {
        generatorOpts: {
          compact: false
        }
      }
    }
  ]
},
// ...
```

--------------------------------

### Run NativeScript Application on iOS/Android

Source: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-javascript

Commands to navigate into the project directory and run the NativeScript application on connected iOS or Android devices/emulators. The `ns run` command builds, launches, and watches for code changes.

```bash
cd example-app

// run on iOS
ns run ios

// run on Android
ns run android
```

--------------------------------

### Example: Publishing NativeScript iOS App with All Parameters

Source: https://docs.nativescript.org/guide/publishing/ns-publish

This is a concrete example of using the `ns publish ios` command with all parameters provided. It specifies an Apple ID, password, a mobile provisioning profile identifier, and a generic 'iPhone Distribution' code sign identity for automated builds.

```bash
ns publish ios my-apple-id my-password d5d40f61-b303-4fc8-aea3-fbb229a8171c "iPhone Distribution"
```

--------------------------------

### NativeScript API Index Structure

Source: https://docs.nativescript.org/api/interface/PinchGestureEventData

This section outlines the hierarchical structure of the NativeScript API documentation, listing the main categories (Namespaces, Enumerations, Classes) and examples of elements within each category. It serves as a navigational guide to the full API reference.

```APIDOC
NativeScript API Index:
  Namespaces:
    - AccessibilityEvents
    - ApplicationSettings
    - CSSUtils
    - Connectivity
    - CoreTypes
    - DialogStrings
    - FontStyle
    - FontVariationSettings
    - FontWeight
    - GridUnitType
    - Http
    - IOSHelper
    - Length
    - PercentLength
    - TouchAction
    - Trace
    - Utils
    - capitalizationType
    - encoding
    - inputType
    - knownFolders
    - path
  Enumerations:
    - AccessibilityLiveRegion
    - AccessibilityRole
    - AccessibilityState
    - AccessibilityTrait
    - AndroidDirectory
    - CacheMode
    - FontScaleCategory
    - GestureEvents
    - GestureStateTypes
    - GestureTypes
    - HttpResponseEncoding
    - SharedTransitionAnimationType
    - SwipeDirection
  Classes:
    - AbsoluteLayout
    - ActionBar
    - ActionItem
    - ActionItems
    - ActivityIndicator
    - AndroidApplication
    - Animation
    - ApplicationCommon
    - Background
    - Binding
    - Builder
    - Button
    - ChangeType
    - CoercibleProperty
    - Color
    - ContainerView
    - ContentView
    - ControlStateChangeListener
    - CssAnimationParser
    - CssAnimationProperty
    - CssProperty
    - CustomLayoutView
    - DatePicker
    - DockLayout
    - EditableTextBase
    - FadeTransition
    - File
    - FileSystemEntity
    - FlexboxLayout
    - Folder
    - Font
    - FormattedString
    - Frame
    - GesturesObserver
    - GridLayout
    - HtmlView
    - Image
    - ImageAsset
    - ImageCache
    - ImageSource
    - InheritedCssProperty
    - InheritedProperty
    - ItemSpec
    - KeyframeAnimation
    - KeyframeAnimationInfo
    - Label
    - LayoutBase
    - ListPicker
    - ListView
    - ModalTransition
    - ModuleNameResolver
    - NavigationButton
    - Observable
    - ObservableArray
    - Page
    - PageBase
    - PageTransition
    - ParserEventType
```

--------------------------------

### Install @klippa/nativescript-http for robust HTTP functionality

Source: https://docs.nativescript.org/recommended-plugins

Integrate `@klippa/nativescript-http` as a powerful alternative to the core HTTP module. This plugin enhances network requests with features such as connection pooling, form data handling, and certificate pinning, ensuring reliable and secure data transfer.

```bash
npm i --save @klippa/nativescript-http
```

```bash
yarn add @klippa/nativescript-http
```

--------------------------------

### Accessing and Modifying Kotlin Properties from JavaScript

Source: https://docs.nativescript.org/guide/android-marshalling

This example demonstrates how Kotlin class properties are defined and subsequently accessed or modified from JavaScript in NativeScript. It illustrates that properties can be interacted with using their compiler-generated `get` and `set` methods, or in some cases, directly as JavaScript fields for convenience.

```kotlin
package com.example

class KotlinClassWithStringProperty(var stringProperty: kotlin.String)
```

```js
var kotlinClass = new com.example.KotlinClassWithStringProperty()

var propertyValue = kotlinClass.getStringPropert()
kothinClass.setStringProperty('example')

propertyValue = kotlinClass.stringProperty
kothinClass.stringProperty = 'second example'
```

--------------------------------

### Verify NativeScript Android environment setup

Source: https://docs.nativescript.org/setup/linux

Run this command in a new terminal window to verify that your NativeScript Android development environment is correctly set up. It checks for all necessary dependencies and configurations.

```bash
ns doctor android
```

--------------------------------

### Install NativeScript Firebase Installations Plugin via npm

Source: https://docs.nativescript.org/plugins/firebase-installations

This command installs the @nativescript/firebase-installations plugin into your NativeScript project using the npm package manager. This plugin is essential for integrating Firebase installation services.

```bash
npm install @nativescript/firebase-installations
```

--------------------------------

### Create Basic Home Page Layout in Svelte

Source: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-svelte

Sets up the initial structure for the `Home.svelte` page. This snippet defines a NativeScript `page` component and includes an `actionBar` with the title 'NativeFlix', serving as the primary navigation bar.

```XML
<!-- app/pages/Home.svelte -->
<page>
  <actionBar title="NativeFlix" />
</page>
<script></script>
```

--------------------------------

### Sign in with Google account using NativeScript Firebase

Source: https://docs.nativescript.org/plugins/firebase-auth

Ensure your machine's SHA1 key is configured for Android in Firebase. Install the `nativescript/google-signin` plugin, configure it with `GoogleSignin.configure()`, and then call `GoogleSignin.signIn()` to get the user's ID and access tokens. Use these tokens with `GoogleAuthProvider.credential()` to create a Firebase credential and sign in.

```ts
import { firebase } from '@nativescript/firebase-core'
import { GoogleAuthProvider } from '@nativescript/firebase-auth'
import { GoogleSignin } from '@nativescript/google-signin'

GoogleSignin.configure() // called earlier in the app

GoogleSignin.signIn().then((user) => {
  const credential = GoogleAuthProvider.credential(
    user.idToken,
    user.accessToken,
  )

  firebase().auth().signInWithCredential(credential)
})
```

--------------------------------

### Define multiple SwiftUI scenes in NativeScript Swift App

Source: https://docs.nativescript.org/plugins/swift-ui

Defines the main `App` structure in Swift, including `NativeScriptMainWindow`, `WindowGroup`, and `ImmersiveSpace` to manage different scenes within a NativeScript application. This setup allows for distinct UI presentations like standard windows and immersive environments.

```swift
@main
struct NativeScriptApp: App {
  @State private var immersionStyle: ImmersionStyle = .mixed

  var body: some Scene {
    NativeScriptMainWindow()

    WindowGroup(id: "NeatView") {
        NeatView()
    }
    .windowStyle(.plain)

    ImmersiveSpace(id: "NeatImmersive") {
        NeatImmersive()
    }
    .immersionStyle(selection: $immersionStyle, in: .mixed, .full)
  }
}
```

--------------------------------

### Initial Svelte Home Page Markup

Source: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-svelte

This snippet provides the basic structure for the 'Home.svelte' component. It includes the root '<page>' element for NativeScript UI and an empty '<script>' block for Svelte logic.

```svelte
<!-- app/pages/Home.svelte -->
<page> </page>

<script></script>
```

--------------------------------

### Implement NativeScriptMainWindow for SwiftUI Scene Management

Source: https://docs.nativescript.org/guide/visionos

This Swift struct, NativeScriptMainWindow, acts as a SwiftUI Scene that wraps the NativeScript application view. It handles the setup of the window scene, configures the NativeScript embedder, and boots the NativeScript engine upon appearance. It also sets the window style to plain.

```Swift
struct NativeScriptMainWindow: Scene {
    var body: some Scene {
        WindowGroup {
            NativeScriptAppView(found: { windowScene in
                NativeScriptEmbedder.sharedInstance().setWindowScene(windowScene)
            }).onAppear {
                // Your app is booted here!
                DispatchQueue.main.async {
                    NativeScriptStart.boot()
                }
            }
        }
        .windowStyle(.plain)
    }

    init() {
        // NativeScript engine is configured here!
        NativeScriptEmbedder.sharedInstance().setDelegate(NativeScriptViewRegistry.shared)
        NativeScriptStart.setup()
    }
}
```

--------------------------------

### Install NativeScript Plugin using npm

Source: https://docs.nativescript.org/guide/development-workflow/using-packages

Shows how to install a NativeScript plugin using the standard `npm install` command. This method is similar to installing any other npm package and adds the plugin to `node_modules` and `package.json`.

```bash
npm install --save @nativescript/camera
```

--------------------------------

### Default Android SDK Location on Windows

Source: https://docs.nativescript.org/setup/windows

This path indicates the typical default installation directory for the Android SDK on Windows systems. It is essential for setting the ANDROID_HOME environment variable.

```Text
%LOCALAPPDATA%\Android\Sdk
```

--------------------------------

### Sign in a user with Apple using Firebase Auth and NativeScript Apple Sign-In

Source: https://docs.nativescript.org/plugins/firebase-auth

This section describes how to sign in a user with Apple. Before you begin, configure Sign In with Apple and enable Apple as a sign-in provider. Ensure the app has the Sign in with Apple capability. Install the `@nativescript/apple-sign-in` plugin and use its `signIn` method to get user credentials. Create an AuthCredential instance from these credentials and call `signInWithCredential`.

```ts
import { firebase } from '@nativescript/firebase-core'
import { AppleAuthProvider } from '@nativescript/firebase-auth'
import { signIn, User } from '@nativescript/apple-sign-in'

signIn({
  scopes: ['EMAIL', 'FULLNAME'],
})
  .then((result: User) => {
    const oauthCredential = AppleAuthProvider.credential(
      result.identityToken,
      result.nonce,
    )

    firebase().auth().signInWithCredential(oauthCredential)
  })
  .catch((err) => console.log('Error signing in: ' + err))
```

--------------------------------

### Create and navigate to a new NativeScript project

Source: https://docs.nativescript.org/guide/testing

This command creates a new NativeScript project with the specified name and then changes the current directory to the newly created project's root, preparing it for further development or configuration.

```bash
ns create projectName
cd projectName
```

--------------------------------

### Make GET Request and Get JSON Response (TypeScript)

Source: https://docs.nativescript.org/core/http

Shows how to make a GET request using `Http.getJSON()` to retrieve and parse JSON data from an endpoint.

```TypeScript
Http.getJSON('https://httpbin.org/get').then(
  (result) => {
    console.log(result)
  },
  (e) => {},
)
```

--------------------------------

### Run NativeScript Application on iOS and Android

Source: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-typescript

These commands navigate into the project directory and then build and launch the NativeScript application on connected iOS or Android devices/emulators. The 'ns run' command also enables live synchronization of code changes, facilitating rapid development.

```bash
cd example-app

// run on iOS
ns run ios

// run on Android
ns run android
```

--------------------------------

### get Method

Source: https://docs.nativescript.org/api/class/Observable

Gets the value of the specified property.

```APIDOC
get(name: string): any
  name: string
Returns: any
```

--------------------------------

### Install Cocoapods and xcodeproj Ruby gems

Source: https://docs.nativescript.org/setup/macos

These commands install the essential Ruby gems, Cocoapods and xcodeproj, which are crucial for managing iOS project dependencies and interacting with Xcode project files.

```bash
gem install cocoapods\ngem install xcodeproj
```

--------------------------------

### API Documentation for startAnimationForType Method

Source: https://docs.nativescript.org/api/class/TouchManager

Detailed API documentation for the static `startAnimationForType` method, including its parameters, their types, and the return value.

```APIDOC
Method: startAnimationForType
Type: Static
Signature: startAnimationForType(view: View, type: TouchAnimationTypes): void
Defined In: @nativescript/core/ui/gestures/touch-manager.d.ts:49:4
Parameters:
  - name: view
    type: View
    description: 
  - name: type
    type: TouchAnimationTypes
    description: 
Returns: void
```

--------------------------------

### Get a group or groups of contacts

Source: https://docs.nativescript.org/plugins/contacts

To get a group or groups of contacts, use the `getGroups()` method. To get a group of contacts with a specific name, call the method passing it the name of the group.

```ts
import { Contacts } from '@nativescript/contacts'

Contacts.getGroups('Test Group') //[name] optional. If defined will look for group with the specified name, otherwise will return all groups.
  .then(
    function (args) {
      console.log('getGroups Complete')
      /// Returns args:
      /// args.data: Generic cross platform JSON object, null if no groups were found.
      /// args.reponse: "fetch"

      if (args.data === null) {
        console.log('No Groups Found!')
      } else {
        console.log('Group(s) Found!')
      }
    },
    function (err) {
      console.log('Error: ' + err)
    },
  )
```
Tokens:
Raw