### 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 ``` ```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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 '' element for NativeScript UI and an empty ' ``` -------------------------------- ### 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) }, ) ```