diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index ad7e0d29..2d43ca46 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -17,9 +17,9 @@ jobs: - name: Setup Node uses: actions/setup-node@v3 with: - node-version: 19 + node-version: 22.14.0 cache: 'npm' - - run: npm ci + - run: yarn - run: npm run lint --if-present - run: npm run build --if-present env: diff --git a/.vitepress/clientAppEnhance.ts b/.vitepress/clientAppEnhance.ts new file mode 100644 index 00000000..9c5fb04b --- /dev/null +++ b/.vitepress/clientAppEnhance.ts @@ -0,0 +1,8 @@ +export default ({ router }) => { + router.afterEach(() => { + // Ensure the DOM is updated before scrolling + setTimeout(() => { + window.scrollTo(0, 0) + }, 0) + }) +} diff --git a/.vitepress/config.mts b/.vitepress/config.mts index fdff7764..0a3833ee 100644 --- a/.vitepress/config.mts +++ b/.vitepress/config.mts @@ -4,7 +4,8 @@ import mainSidebar from '../content/sidebar' import uiSidebar from '../content/ui/sidebar' import pluginsSidebar from '../content/plugins/sidebar' import nav from './nav' -import './theme/cliLanguage' +import './clientAppEnhance'; +// import './theme/cliLanguage' import path from 'node:path' import { SiteMap } from './genSitemap.mjs' @@ -71,6 +72,7 @@ export default defineConfig({ }, markdown: { headers: true, + theme: "github-dark" }, async transformPageData(pageData, { siteConfig }) { // const contributors = await githubAuthors.getAuthorsForFilePath( diff --git a/.vitepress/theme/cliLanguage.ts b/.vitepress/theme/cliLanguage.ts index 3a12cddb..03af6911 100644 --- a/.vitepress/theme/cliLanguage.ts +++ b/.vitepress/theme/cliLanguage.ts @@ -1,10 +1,10 @@ // https://mysticmind.dev/vitepress-fenced-code-block-syntax-highlighting-quirks-with-net-or-other-languages -import { BUNDLED_LANGUAGES } from "shiki"; -import cliLanguageGrammar from "./shiki/cli.tmLanguage.json"; +import { bundledLanguages } from 'shiki' +import cliLanguageGrammar from './shiki/cli.tmLanguage.json' -BUNDLED_LANGUAGES.push({ - id: "cli", - scopeName: "source.cli", - // @ts-ignore +bundledLanguages['cli'] = { + id: 'cli', + scopeName: 'source.cli', grammar: cliLanguageGrammar, -}); +} +// bundledLanguages.push() diff --git a/content/assets/publishing/launch-android-002.png b/content/assets/publishing/launch-android-002.png new file mode 100644 index 00000000..d399ff6a Binary files /dev/null and b/content/assets/publishing/launch-android-002.png differ diff --git a/content/assets/publishing/launch-android-003.png b/content/assets/publishing/launch-android-003.png new file mode 100644 index 00000000..9a091309 Binary files /dev/null and b/content/assets/publishing/launch-android-003.png differ diff --git a/content/assets/publishing/launch-android-004.png b/content/assets/publishing/launch-android-004.png new file mode 100644 index 00000000..4e781ed5 Binary files /dev/null and b/content/assets/publishing/launch-android-004.png differ diff --git a/content/assets/publishing/launch-android-005.png b/content/assets/publishing/launch-android-005.png new file mode 100644 index 00000000..33bb39cc Binary files /dev/null and b/content/assets/publishing/launch-android-005.png differ diff --git a/content/assets/publishing/launch-screen-howto-002.png b/content/assets/publishing/launch-screen-howto-002.png new file mode 100644 index 00000000..bbf3732a Binary files /dev/null and b/content/assets/publishing/launch-screen-howto-002.png differ diff --git a/content/assets/publishing/launch-screen-howto-003.png b/content/assets/publishing/launch-screen-howto-003.png new file mode 100644 index 00000000..8afbb20d Binary files /dev/null and b/content/assets/publishing/launch-screen-howto-003.png differ diff --git a/content/assets/publishing/launch-screen-howto-008.png b/content/assets/publishing/launch-screen-howto-008.png new file mode 100644 index 00000000..d40a9713 Binary files /dev/null and b/content/assets/publishing/launch-screen-howto-008.png differ diff --git a/content/assets/publishing/launch-screen-howto-009.png b/content/assets/publishing/launch-screen-howto-009.png new file mode 100644 index 00000000..5851079d Binary files /dev/null and b/content/assets/publishing/launch-screen-howto-009.png differ diff --git a/content/assets/publishing/launch-screen-howto-010.png b/content/assets/publishing/launch-screen-howto-010.png new file mode 100644 index 00000000..3759a5c3 Binary files /dev/null and b/content/assets/publishing/launch-screen-howto-010.png differ diff --git a/content/best-practices/ios-tips.md b/content/best-practices/ios-tips.md index 9c09a19d..2604c451 100644 --- a/content/best-practices/ios-tips.md +++ b/content/best-practices/ios-tips.md @@ -18,7 +18,7 @@ let applePayController: PKPaymentAuthorizationViewController applePayController = PKPaymentAuthorizationViewController.alloc().initWithPaymentRequest( - paymentRequest + paymentRequest, ) applePayController.delegate = PKPaymentAuthorizationViewControllerDelegateImpl.initWithOwner(this) @@ -32,7 +32,7 @@ let applePayControllerDelegate: PKPaymentAuthorizationViewControllerDelegateImpl applePayController = PKPaymentAuthorizationViewController.alloc().initWithPaymentRequest( - paymentRequest + paymentRequest, ) applePayControllerDelegate = PKPaymentAuthorizationViewControllerDelegateImpl.initWithOwner(this) diff --git a/content/best-practices/native-class.md b/content/best-practices/native-class.md index 2cfa3b71..bfcca66f 100644 --- a/content/best-practices/native-class.md +++ b/content/best-practices/native-class.md @@ -29,7 +29,7 @@ You can use setup methods in this case to mitigate any cross compilation issue, ```ts let customClass function setupCustomClass() { - if (global.isAndroid) { + if (__ANDROID__) { @NativeClass() class CustomClass extends android.view.View {} customClass = CustomClass @@ -44,7 +44,7 @@ setupCustomClass() const customClassInstance = new customClass() // can handle different platform args with ternary if needed ``` -The `global.isAndroid` conditional will get removed when building the app for iOS so your compiled code is clean and isolated while allowing you to handle in a single file. +The `__ANDROID__` macro will get removed when building the app for iOS so your compiled code is clean and isolated while allowing you to handle in a single file. ## When exported from a file and used elsewhere diff --git a/content/best-practices/platform-file-split-or-not.md b/content/best-practices/platform-file-split-or-not.md index a5fa31ca..658d0ea4 100644 --- a/content/best-practices/platform-file-split-or-not.md +++ b/content/best-practices/platform-file-split-or-not.md @@ -28,7 +28,7 @@ The advent of tree shaking and webpack builds does away with quite a bit of worr ## Conditional with tree shaking -When speaking of tree shaking ever since NativeScript 7, you've been able to use `global.isAndroid` or `global.isIOS` and anytime those are used as conditional splits in your code, only the applicable code for the platform that's being built would actually end up in your compiled code alleviating a lot of concern here. +When speaking of tree shaking ever since NativeScript 7, you've been able to use `__ANDROID__` or `global.isIOS` and anytime those are used as conditional splits in your code, only the applicable code for the platform that's being built would actually end up in your compiled code alleviating a lot of concern here. ## Future maintenance diff --git a/content/configuration/nativescript.md b/content/configuration/nativescript.md index 52ae6432..395e2f50 100644 --- a/content/configuration/nativescript.md +++ b/content/configuration/nativescript.md @@ -371,6 +371,11 @@ ios.SPMPackages: Array<{ libs: Array; repositoryURL: string; version: string; + /** + * (8.9+) If you have more targets (like widgets for example), + * you can list their names here to include the Swift Package with them. + */ + targets?: string[]; }> ``` @@ -392,6 +397,63 @@ ios: { } ``` +### ios.NativeSource + +::: tip + +NativeSource config option is available in `nativescript@8.9.0` or newer. + +::: + +```ts +ios.NativeSource: Array<{ + name: string; + path: string; +}> +``` + +Include any native source code from anywhere in the project (or workspace). Glob patterns are fully supported. + +#### Example + +- Include any `.swift` files anywhere within the project `src` directory: + +```ts +// ... +ios: { + NativeSource: [ + { + name: 'ProjectPlatformSrc', + path: './src/**/*.swift' + } + ], +} +``` + +This will create a file reference folder named `ProjectPlatformSrc` within the generated Xcode project containing any .swift files found anywhere within the project `src` directory. + +- Include any `.swift` files anywhere within the project `src` directory, including any (Swift, Obj-C impl/headers, as well as any module.modulemap files) within a workspace `packages` or `libs` dir: + +```ts +// ... +ios: { + NativeSource: [ + { + name: 'ProjectPlatformSrc', + path: './src/**/*.swift' + }, + { + name: 'Auth', + path: '../../packages/**/*.{swift,m,h,modulemap}' + }, + { + name: 'Purchasing', + path: '../../libs/**/*.{swift,m,h,modulemap}' + } + ], +} +``` + ## Hooks Configuration Reference ```ts diff --git a/content/configuration/webpack.md b/content/configuration/webpack.md index 60423253..d9e79aa1 100644 --- a/content/configuration/webpack.md +++ b/content/configuration/webpack.md @@ -49,7 +49,7 @@ Add file replacement rules. For source files (`.js` and `.ts`) this will add a n Example: -```cli +```bash --env.replace=./src/environments/environment.ts:./src/environments/environment.prod.ts ``` @@ -324,7 +324,7 @@ module.exports = (env) => { config.get('externals').concat([ // add your own externals 'some-external-dependency', - ]) + ]), ) }) @@ -380,7 +380,7 @@ module.exports = (env) => { To change an existing rule, it's useful to know how it has been set up first: -```cli +```bash ns prepare android|ios --env.verbose # Note: we plan to add a separate command to just print the internal config ``` @@ -518,7 +518,7 @@ module.exports = (env) => { 'ignoreWarnings', (config.get('ignoreWarnings') || []).concat([ /a regex that matches the warning to suppress/, - ]) + ]), ) }) @@ -577,7 +577,7 @@ module.exports = (webpack) => { .test(/\.something$/) .use('something-loader') .loader('something-loader') - } /*, options */ + } /*, options */, ) } ``` @@ -641,7 +641,7 @@ webpack.chainWebpack( (config, env) => { config.set('somethingThatShouldBeSetLast', true) }, - { order: 10 } + { order: 10 }, ) ``` diff --git a/content/core/application.md b/content/core/application.md index 154965f5..9e56825c 100644 --- a/content/core/application.md +++ b/content/core/application.md @@ -47,7 +47,7 @@ if (isAndroid) { const androidApp: AndroidApplication = Application.android androidApp.unregisterBroadcastReceiver( - android.content.Intent.ACTION_BATTERY_CHANGED + android.content.Intent.ACTION_BATTERY_CHANGED, ) } ``` @@ -76,7 +76,7 @@ To add an iOS notification observer, follow the steps below: UIDeviceOrientationDidChangeNotification, (notification: NSNotification) => { //Handle the notification - } + }, ) ``` @@ -89,7 +89,7 @@ To remove a notification observer, use the `removeNotificationObserver` method o ```ts iOSApp.removeNotificationObserver( observer, - UIDeviceBatteryStateDidChangeNotification + UIDeviceBatteryStateDidChangeNotification, ) ``` @@ -350,7 +350,7 @@ const MyDelegate = (function (_super) { } MyDelegate.prototype.applicationDidFinishLaunchingWithOptions = function ( application, - launchOptions + launchOptions, ) { console.log('applicationWillFinishLaunchingWithOptions: ' + launchOptions) return true @@ -372,7 +372,7 @@ class MyDelegate extends UIResponder implements UIApplicationDelegate { applicationDidFinishLaunchingWithOptions( application: UIApplication, - launchOptions: NSDictionary + launchOptions: NSDictionary, ): boolean { console.log('applicationWillFinishLaunchingWithOptions: ' + launchOptions) diff --git a/content/core/http.md b/content/core/http.md index f881c9ba..c27a0e20 100644 --- a/content/core/http.md +++ b/content/core/http.md @@ -17,7 +17,7 @@ Http.getString('https://httpbin.org/get').then( (result: string) => { // do something with the string response }, - (e) => {} + (e) => {}, ) ``` @@ -30,7 +30,7 @@ Http.getJSON('https://httpbin.org/get').then( (result) => { console.log(result) }, - (e) => {} + (e) => {}, ) ``` @@ -40,12 +40,12 @@ Use the [getFile()](#getfile) method for a GET request with a response as a [Fil ```ts Http.getFile( - 'https://art.nativescript.org/logo/export/NativeScript_Logo_Wide_White_Blue_Rounded_Blue.png' + 'https://art.nativescript.org/logo/export/NativeScript_Logo_Wide_White_Blue_Rounded_Blue.png', ).then( (resultFile: File) => { // The returned result will be File object }, - (e) => {} + (e) => {}, ) ``` @@ -56,7 +56,7 @@ Use the [getImage()](#getimage) method for a GET request with a response as an i ```ts Http.getImage('https://httpbin.org/image/jpeg').then( (res: ImageSource) => {}, - (e) => {} + (e) => {}, ) ``` @@ -83,7 +83,7 @@ Http.request({ }, (e) => { // error - } + }, ) ``` diff --git a/content/core/image-source.md b/content/core/image-source.md index cd4cf09f..a1be7903 100644 --- a/content/core/image-source.md +++ b/content/core/image-source.md @@ -58,7 +58,7 @@ const color = new Color('black') const imageSource: ImageSource = ImageSource.fromFontIconCodeSync( '\uf004', font, - color + color, ) ``` @@ -206,7 +206,7 @@ Create an ImageSource from the specified local file or resource (if specified wi const imageSource: ImageSource = ImageSource.fromFontIconCodeSync( source, font, - color + color, ) ``` diff --git a/content/core/utils.md b/content/core/utils.md index 5763476d..8b1fa2ad 100644 --- a/content/core/utils.md +++ b/content/core/utils.md @@ -12,7 +12,7 @@ To verify if a path is valid resource or local file path, use the [isFileOrResou ```ts const isPathValid: boolean = Utils.isFileOrResourcePath( - 'https://nativescript.org/' + 'https://nativescript.org/', ) // false // or @@ -612,7 +612,7 @@ Gets the string id from a given resource name. ```ts const paletteColor: number = Utils.android.resources.getPaletteColor( resourceName, - Utils.android.getApplicationContext() + Utils.android.getApplicationContext(), ) ``` diff --git a/content/dev-reference.md b/content/dev-reference.md index 289f1128..fb86c82d 100644 --- a/content/dev-reference.md +++ b/content/dev-reference.md @@ -100,18 +100,116 @@ For example: ![some image](../assets/images/setup/windows/.png) ``` - + + + +### Flavor Tabs + + + +This is the vue tab + + +This is the typescript tab + + +This is the javascript tab + + +This is the angular tab + + +This is the svelte tab + + +This is the react tab + + +This is the solid tab + + + + +All Flavor tabs will be synchronized and ordered consistently: + + + +This is the typescript tab + + +This is the javascript tab + + +This is the angular tab + + +This is the svelte tab + + +This is the react tab + + +This is the vue tab + + +This is the solid tab + + ## StepList diff --git a/content/guide/animations.md b/content/guide/animations.md index 509d54c4..5f188960 100644 --- a/content/guide/animations.md +++ b/content/guide/animations.md @@ -199,8 +199,9 @@ You can combine two animations in the `animation` property by using commas: ```css .view { - animation: example 4s ease-in-out 2s infinite reverse, second-animation-example - 5s ease-out; + animation: + example 4s ease-in-out 2s infinite reverse, + second-animation-example 5s ease-out; } ``` @@ -478,11 +479,11 @@ In addition to expressing NativeScript [Animation APIs](#animating-with-code) wh ```ts touchAnimation = { down(view: View) { - if (global.isIOS) { + if (__IOS__) { UIView.animateWithDurationAnimations(0.25, () => { view.ios.transform = CGAffineTransformMakeScale(0.95, 0.95) }) - } else if (global.isAndroid) { + } else if (__ANDROID__) { const lib = androidx.dynamicanimation.animation const spring = new lib.SpringForce(0.95) .setDampingRatio(lib.SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY) @@ -490,25 +491,25 @@ touchAnimation = { let animation = new lib.SpringAnimation( view.android, lib.DynamicAnimation().SCALE_X, - float(0.95) + float(0.95), ) animation.setSpring(spring).setStartVelocity(0.7).setStartValue(1.0) animation.start() animation = new lib.SpringAnimation( view.android, lib.DynamicAnimation().SCALE_Y, - float(0.95) + float(0.95), ) animation.setSpring(spring).setStartVelocity(0.7).setStartValue(1.0) animation.start() } }, up(view: View) { - if (global.isIOS) { + if (__IOS__) { UIView.animateWithDurationAnimations(0.25, () => { view.ios.transform = CGAffineTransformIdentity }) - } else if (global.isAndroid) { + } else if (__ANDROID__) { const lib = androidx.dynamicanimation.animation const spring = new lib.SpringForce(1) .setDampingRatio(lib.SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY) @@ -516,14 +517,14 @@ touchAnimation = { let animation = new lib.SpringAnimation( view.android, lib.DynamicAnimation().SCALE_X, - float(1) + float(1), ) animation.setSpring(spring).setStartVelocity(0.7).setStartValue(0.95) animation.start() animation = new lib.SpringAnimation( view.android, lib.DynamicAnimation().SCALE_Y, - float(1) + float(1), ) animation.setSpring(spring).setStartVelocity(0.7).setStartValue(0.95) animation.start() diff --git a/content/guide/choosing-an-editor.md b/content/guide/choosing-an-editor.md index dbef4e64..d21bf4a2 100644 --- a/content/guide/choosing-an-editor.md +++ b/content/guide/choosing-an-editor.md @@ -20,7 +20,7 @@ The `code` command runs in your command-line or terminal, and it works just like Once set up, you can type `code .` in your terminal to open the files in your current folder for editing. For example, you could use the following sequence of command to create a new NativeScript app and open it for editing. -```cli +```bash ns create MyNewApp cd MyNewApp code . diff --git a/content/guide/cli-basics.md b/content/guide/cli-basics.md index 9e387ae4..834e0a4a 100644 --- a/content/guide/cli-basics.md +++ b/content/guide/cli-basics.md @@ -25,7 +25,7 @@ This helps ensure everything fits together correctly. If you're dealing with mys To clean, run this command from your project's root directory: -```cli +```bash ns clean ``` @@ -43,7 +43,7 @@ If you have multiple projects in a directory, you can run `ns clean` in it, and To list all connected devices (both physical and virtual), run: -```cli +```bash ns devices ``` @@ -61,7 +61,7 @@ Example output: To set the default package manager that the CLI uses (unless overridden in [nativescript.config.ts](/project-structure/nativescript-config#cli-packagemanager)): -```cli +```bash ns package-manager set npm ns package-manager set yarn ns package-manager set yarn2 # experimental diff --git a/content/guide/creating-a-project.md b/content/guide/creating-a-project.md index c7177c6a..41a0d11b 100644 --- a/content/guide/creating-a-project.md +++ b/content/guide/creating-a-project.md @@ -16,13 +16,13 @@ Official templates can be found in the [Templates GitHub repository](https://git Some of the templates are listed in the NativeScript CLI when creating a new project with `ns create`, others may be used by passing the `--template` flag with the template name (NPM package name). -```cli +```bash ns create myCoolApp ``` If you would like to try one of the other templates not listed by `ns create` run: -```cli +```bash ns create myCoolApp --template ``` @@ -30,7 +30,7 @@ ns create myCoolApp --template If you want to skip the interactive prompts, you can pass the following flags: -```cli +```bash ns create myCoolApp --angular // or --ng for short ns create myCoolApp --vue ns create myCoolApp --vue --ts // for vue with typescript @@ -56,7 +56,7 @@ A basic template with a single page and no custom styles. To use, run: -```cli +```bash ns create myCoolApp --template @nativescript/template-blank ``` @@ -75,7 +75,7 @@ A template with a side drawer. To use, run: -```cli +```bash ns create myCoolApp --template @nativescript/template-drawer-navigation ``` @@ -94,7 +94,7 @@ A template with multiple tabs. To use, run: -```cli +```bash ns create myCoolApp --template @nativescript/template-tab-navigation ``` @@ -111,7 +111,7 @@ A template with a ListView and a details screen. To use, run: -```cli +```bash ns create myCoolApp --template @nativescript/template-master-detail ``` diff --git a/content/guide/debugging.md b/content/guide/debugging.md index 27b64a71..666825f4 100644 --- a/content/guide/debugging.md +++ b/content/guide/debugging.md @@ -40,7 +40,7 @@ console.timeEnd('myLabel') To start a Chrome debugging session, run your app in debug mode: -```cli +```bash ns debug android|ios ``` @@ -48,7 +48,7 @@ The `ns debug` command builds and deploys the app on a connected device or emula Once the app starts, a URL is printed to the console -```cli{5-6} +```bash{5-6} Setting up debugger proxy... Press Ctrl + C to terminate, or disconnect. @@ -99,7 +99,7 @@ If you need to debug parts of the native stack instead of the JavaScript part of To start, prepare the iOS app: -```cli +```bash ns prepare ios ``` @@ -107,7 +107,7 @@ This compiles your app source, creates the `platforms/ios` folder (if it doesn't Next, open the `platforms/ios/.xcworkspace` in XCode, either through the XCode browse menu, or from the command line: -```cli +```bash open platforms/ios/.xcworkspace ``` @@ -134,7 +134,7 @@ If you need to debug parts of the native stack instead of the JavaScript part of To start, prepare the Android app: -```cli +```bash ns prepare android ``` @@ -145,7 +145,7 @@ Next, open the `platforms/android` folder in Android Studio, through the Android :::tip Tip If you [set up the `studio` command line launcher](https://stackoverflow.com/a/48266060/2270725), you can quickly open the NativeScript project from the command line with -```cli +```bash studio platforms/android ``` diff --git a/content/guide/development-workflow/using-packages.md b/content/guide/development-workflow/using-packages.md index e232afdf..e42be441 100644 --- a/content/guide/development-workflow/using-packages.md +++ b/content/guide/development-workflow/using-packages.md @@ -21,19 +21,19 @@ You can also explore [@nativescript/core](/core/#nativescript-core), which is in Once the needed plugin is found, it can be installed in a NativeScript app using the `ns plugin add` command which behaves just like `npm install` while also modifying any existing platform projects (linking, etc.). -```cli +```bash ns plugin add ``` For example, the following command installs the [NativeScript camera plugin](https://v8.docs.nativescript.org/plugins/camera.html). -```cli +```bash ns plugin add @nativescript/camera ``` Instead of using plugin add, package managers like npm, yarn, or pnpm can also be used: -```cli +```bash npm install --save @nativescript/camera ``` @@ -43,7 +43,7 @@ The installation of a NativeScript plugin is similar to installing a npm package As demonstrated above, the command `ns plugin add @nativescript/camera` is equivalent to `npm i @nativescript/camera --save` internally. However, when installing a developer dependency, such as @nativescript/types or @nativescript/webpack, you need to explicitly save it as a devDependency. To do so, use the npm install command with the --save-dev flag. For instance: -```cli +```bash npm i @nativescript/types --save-dev ``` @@ -69,13 +69,13 @@ requestPermissions() To remove a NativeScript plugin, you can use the following command. -```cli +```bash ns plugin remove ``` For example, the following command removes the NativeScript camera plugin. -```cli +```bash ns plugin remove @nativescript/camera ``` @@ -99,6 +99,6 @@ NativeScript CLI supports three package managers: In case you want to check what is the currently used package manager, you can use: -```cli +```bash ns package-manager get ``` diff --git a/content/guide/error-handling.md b/content/guide/error-handling.md index 4e77a51e..7757c538 100644 --- a/content/guide/error-handling.md +++ b/content/guide/error-handling.md @@ -79,7 +79,7 @@ Application.on( console.log(error.stack) console.log(error.nativeError) // for example, report the exception to an analytics solution here - } + }, ) ``` diff --git a/content/guide/extending-classes-and-conforming-to-protocols-ios.md b/content/guide/extending-classes-and-conforming-to-protocols-ios.md index b7e9b22e..d7e20310 100644 --- a/content/guide/extending-classes-and-conforming-to-protocols-ios.md +++ b/content/guide/extending-classes-and-conforming-to-protocols-ios.md @@ -43,7 +43,7 @@ const MyViewController = UIViewController.extend( }, { name: 'MyViewController', - } + }, ) ``` @@ -125,13 +125,13 @@ const MyViewController = UIViewController.extend( viewDidLoad: function () { // ... const aboutButton = UIButton.buttonWithType( - UIButtonType.UIButtonTypeRoundedRect + UIButtonType.UIButtonTypeRoundedRect, ) // Pass this target and the aboutTap selector for touch up callback. aboutButton.addTargetActionForControlEvents( this, 'aboutTap', - UIControlEvents.UIControlEventTouchUpInside + UIControlEvents.UIControlEventTouchUpInside, ) // ... }, @@ -149,7 +149,7 @@ const MyViewController = UIViewController.extend( // Declare the signature of the aboutTap. We can not infer it, since it is not inherited from base class or protocol. aboutTap: { returns: interop.types.void, params: [UIControl] }, }, - } + }, ) ``` @@ -181,7 +181,7 @@ const MyAppDelegate = UIResponder.extend( // We will obtain the method signature from the protocol. applicationDidFinishLaunchingWithOptions: function ( application, - launchOptions + launchOptions, ) { this._window = new UIWindow(UIScreen.mainScreen.bounds) this._window.rootViewController = MyViewController.alloc().init() @@ -194,7 +194,7 @@ const MyAppDelegate = UIResponder.extend( name: 'MyAppDelegate', // Declare that the native Objective-C class will implement the UIApplicationDelegate Objective-C protocol. protocols: [UIApplicationDelegate], - } + }, ) ``` @@ -204,7 +204,7 @@ Let's look how to declare a delegate in Typescript by setting one for the [Tesse interface G8TesseractDelegate extends NSObjectProtocol { preprocessedImageForTesseractSourceImage?( tesseract: G8Tesseract, - sourceImage: UIImage + sourceImage: UIImage, ): UIImage progressImageRecognitionForTesseract?(tesseract: G8Tesseract): void shouldCancelImageRecognitionForTesseract?(tesseract: G8Tesseract): boolean @@ -226,7 +226,7 @@ class G8TesseractDelegateImpl extends NSObject implements G8TesseractDelegate { preprocessedImageForTesseractSourceImage( tesseract: G8Tesseract, - sourceImage: UIImage + sourceImage: UIImage, ): UIImage { console.info('preprocessedImageForTesseractSourceImage') return sourceImage diff --git a/content/guide/extending-classes-and-implementing-interfaces-android.md b/content/guide/extending-classes-and-implementing-interfaces-android.md index 6ba15491..2a93c405 100644 --- a/content/guide/extending-classes-and-implementing-interfaces-android.md +++ b/content/guide/extending-classes-and-implementing-interfaces-android.md @@ -193,7 +193,7 @@ Note the `*.android` suffix - we want this file packaged for Android only. A minimal example of the custom Application class: -:::code-group +::: code-group ```ts [TypeScript] // the `JavaProxy` decorator specifies the package and the name for the native *.JAVA file generated. @@ -320,7 +320,7 @@ class CustomActivity extends androidx.appcompat.app.AppCompatActivity { this, savedInstanceState, this.getIntent(), - super.onCreate + super.onCreate, ) } @@ -329,7 +329,7 @@ class CustomActivity extends androidx.appcompat.app.AppCompatActivity { this, intent, super.setIntent, - super.onNewIntent + super.onNewIntent, ) } @@ -337,7 +337,7 @@ class CustomActivity extends androidx.appcompat.app.AppCompatActivity { this._callbacks.onSaveInstanceState( this, outState, - super.onSaveInstanceState + super.onSaveInstanceState, ) } @@ -364,28 +364,28 @@ class CustomActivity extends androidx.appcompat.app.AppCompatActivity { public onRequestPermissionsResult( requestCode: number, permissions: Array, - grantResults: Array + grantResults: Array, ): void { this._callbacks.onRequestPermissionsResult( this, requestCode, permissions, grantResults, - undefined /*TODO: Enable if needed*/ + undefined /*TODO: Enable if needed*/, ) } public onActivityResult( requestCode: number, resultCode: number, - data: android.content.Intent + data: android.content.Intent, ): void { this._callbacks.onActivityResult( this, requestCode, resultCode, data, - super.onActivityResult + super.onActivityResult, ) } } @@ -414,7 +414,7 @@ androidx.appcompat.app.AppCompatActivity.extend( this, savedInstanceState, this.getIntent(), - superProto.onCreate + superProto.onCreate, ) // Add custom initialization logic here @@ -424,14 +424,14 @@ androidx.appcompat.app.AppCompatActivity.extend( this, intent, superProto.setIntent, - superProto.onNewIntent + superProto.onNewIntent, ) }, onSaveInstanceState(outState) { this._callbacks.onSaveInstanceState( this, outState, - superProto.onSaveInstanceState + superProto.onSaveInstanceState, ) }, onStart() { @@ -455,7 +455,7 @@ androidx.appcompat.app.AppCompatActivity.extend( requestCode, permissions, grantResults, - undefined + undefined, ) }, onActivityResult(requestCode, resultCode, data) { @@ -464,11 +464,11 @@ androidx.appcompat.app.AppCompatActivity.extend( requestCode, resultCode, data, - superProto.onActivityResult + superProto.onActivityResult, ) }, /* Add any other events you need to capture */ - } + }, ) ``` @@ -532,7 +532,7 @@ button.setOnClickListener( onClick() { // Perform action on click }, - }) + }), ) ``` diff --git a/content/guide/ios-marshalling.md b/content/guide/ios-marshalling.md index ce1b0c82..5f3436b3 100644 --- a/content/guide/ios-marshalling.md +++ b/content/guide/ios-marshalling.md @@ -227,7 +227,7 @@ NSURLConnection.sendAsynchronousRequestQueueCompletionHandler( null, (response, data, connectionError) => { console.log('request complete') - } + }, ) ``` diff --git a/content/guide/multithreading.md b/content/guide/multithreading.md index 0cc02b8a..e47f5fc3 100644 --- a/content/guide/multithreading.md +++ b/content/guide/multithreading.md @@ -117,7 +117,7 @@ Runtime errors inside the worker are reported back to the main thread through th ```ts myWorker.onerror = (e) => { console.log( - `Error occured in the worker thread in file ${e.filename} on line ${e.lineno}` + `Error occured in the worker thread in file ${e.filename} on line ${e.lineno}`, ) console.log(e.message, e.stackTrace) } @@ -305,7 +305,7 @@ worker.onmessage = function (message) { worker.onerror = function (err) { console.log( `An unhandled error occurred in worker: ${err.filename}, line: ${err.lineno} :`, - err.message + err.message, ) } ``` diff --git a/content/guide/native-code/generate-typings.md b/content/guide/native-code/generate-typings.md index 4b022fb2..e50af688 100644 --- a/content/guide/native-code/generate-typings.md +++ b/content/guide/native-code/generate-typings.md @@ -8,7 +8,7 @@ contributors: ## Generate types for iOS -```cli +```bash ns typings ios ``` @@ -18,7 +18,7 @@ This will generate the following folder structure `typings/ios/arm64` For Android run: -```cli +```bash ns typings android --jar # or ns typings android --aar @@ -26,13 +26,13 @@ ns typings android --aar You can also generate typings for an Android package (Maven): -```cli +```bash ns typings android ``` For instance: -```cli +```bash ns typings android "com.google.android.gms:play-services-tasks" ``` diff --git a/content/guide/property-system.md b/content/guide/property-system.md index 00de8b1b..14f0f08f 100644 --- a/content/guide/property-system.md +++ b/content/guide/property-system.md @@ -135,11 +135,11 @@ const marginProperty = new ShorthandProperty< } return `${PercentLength.convertToString( - this.marginTop + this.marginTop, )} ${PercentLength.convertToString( - this.marginRight + this.marginRight, )} ${PercentLength.convertToString( - this.marginBottom + this.marginBottom, )} ${PercentLength.convertToString(this.marginLeft)}` }, converter: convertToMargins, diff --git a/content/guide/publishing/android-google-play.md b/content/guide/publishing/android-google-play.md index cde5d270..f3ca3f3d 100644 --- a/content/guide/publishing/android-google-play.md +++ b/content/guide/publishing/android-google-play.md @@ -33,7 +33,7 @@ The following commands will build your app in release mode, and copy the result -```cli +```bash ns build android --release \ --key-store-path \ --key-store-password \ @@ -45,7 +45,7 @@ ns build android --release \ -```cli +```bash ns build android --release \ --key-store-path \ --key-store-password \ @@ -58,7 +58,7 @@ ns build android --release \ -```cli +```bash ns build android --release \ --key-store-path C:\projects\app\upload.keystore \ --key-store-password example_password \ @@ -70,7 +70,7 @@ ns build android --release \ -```cli +```bash ns build android --release \ --key-store-path ~/projects/app/upload.keystore \ --key-store-password example_password \ diff --git a/content/guide/publishing/apple-app-store.md b/content/guide/publishing/apple-app-store.md new file mode 100644 index 00000000..009c55ad --- /dev/null +++ b/content/guide/publishing/apple-app-store.md @@ -0,0 +1,523 @@ +--- +title: Publishing to Apple App Store +category: Publishing +categoryLink: /guide/publishing/ +prev: /guide/publishing/ +next: false +contributors: + - rigor789 + - NathanWalker +breadcrumbs: + - name: 'Publishing' + href: '/guide/publishing/' + - name: 'Publishing to Apple App Store' +--- + +You can publish a NativeScript app in the _App Store_ the same way you would [release a purely native iOS app](https://developer.apple.com/ios/submit/). + +1. Verify that the iOS native project inside your app contains your latest changes and resources by running the following command. + ```cli + ns prepare ios --release + ``` +2. Open the iOS native project in Xcode. Your native project is located at: `{name}/platforms/ios/{name}.xcworkspace` (or in `{name}/platforms/ios/{name}.xcodeproj` if the project does not contain any native iOS libraries). +3. [Configure the project for distribution](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/ConfiguringYourApp/ConfiguringYourApp.html). +4. [Upload the app to App Store Connect](https://help.apple.com/xcode/mac/current/#/dev442d7f2ca). +5. [Submit it to the _App Store_](https://help.apple.com/app-store-connect/#/dev301cb2b3e). + +### Creating iOS NativeScript app + +#### Bundle ID + +The _Bundle ID_ is a unique identifier, provided by you for your app. It uses reverse domain name notation. For example, the NativeScript CLI will use `org.nativescript.` as default. During `ns create` you can provide the _Bundle ID_ using the `--appid ` option. + +In iOS apps, the _Bundle ID_ is stored in the `CFBundleIdentifier` in the `Info.plist`, but the NativeScript CLI will explicitly set this to the value of the `id` key stored in the `nativescript.config.ts` file in the root of your application. + +:::tip Note + +To edit the _Bundle ID_, edit the `nativescript.config.ts` of your app and set the `id` key. + +::: + +The _Bundle ID_ is used to precisely identify your app at various situations and plays an important role, when it is built and launched by the CLI, as well as when _Provisioning Profiles_ and certificates are created in the _Apple Member Center_. + +For more information consider [the 'About Bundle IDs' section in the following article](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/ConfiguringYourApp/ConfiguringYourApp.html). + +### App name + +This is the display name for your app. It is purely cosmetic but highly important. For example, it will appear under the app icon. +The value is stored in the `app/App_Resources/iOS/Info.plist` file as the `CFBundleDisplayName` key. + +### App icons + +The NativeScript framework will use icons from `app/App_Resources/iOS/`. All files from that folder are added as resources in the generated Xcode project in `platforms/ios`. + +_App Store_ submissions will be rejected if certain icon files are not present. To ensure you have the required icons, you can consider the following Apple article: ['App Icons on iPad and iPhone'](https://developer.apple.com/library/ios/qa/qa1686/_index.html). + +If you want to extend the default icon set, and you don't want to use the default naming, or you need finer control, you can use the `app/App_Resources/iOS/Info.plist`. +List the icons using [`CFBundleIconFiles`](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html#//apple_ref/doc/uid/TP40009249-SW10) or [`CFBundleIcon`](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html#//apple_ref/doc/uid/TP40009249-SW13). + +For example, listing icons using `CFBundleIconFiles`: + +#### Example 1: How to customise Info.plist.\_\_> + +```xml + + + + + + CFBundleIconFiles + + Icon@2x.png + Icon.png + Icon-Small@3x.png + Icon-Small@2x.png + Icon-Small.png + Icon-Small-50@2x.png + + + + +``` + +### Launch files + +Launch screens are an essential part of your iOS app. This is the first thing your users see when they start your app. + +The Springboard will play a subtle animation transitioning from the home screen to your app. In order to provide a pleasing experience, it's best to avoid a default that's entirely black or white. + +The launch files are not a splash screen; instead, they are a way for the OS to quickly grab a preview image of your app and use it during the first ~300ms while your app is booting. + +[For design guidelines you can consider the following article provided by Apple](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LaunchImages.html). + +:::tip Note + +If you think that following these guidelines will result in a plain, boring launch image, you’re right. Remember, the launch image doesn’t provide you with an opportunity for artistic expression. It’s solely intended to enhance the user’s perception of your app as quick to launch and immediately ready for use. + +::: + +_App Store_ submissions will be rejected if certain launch files are not present. Make sure that when new iOS versions and devices are released that you update your _launch files_ and accommodate the upcoming form factors. + +If a customer runs your app on a device with a high resolution screen and your app is missing the launch screen file for that device, then iOS will render your app using a smaller resolution, degrading its quality: + +- Your app may be upscaled, and blurred +- Your app may have black areas + +Earlier iOS versions had to support a small range of form factors. Providing a different launch image per screen size was trivial. With the new devices released by Apple, the number of images that had to be provided increased. That's where Apple introduced the _launch screen storyboard_. +The storyboard allows basic primitives such as images to be presented on the screen, and you can have dynamic layout using layout constraints. This makes it possible to design a single _launch screen_ that fits well for all form factors. + +The NativeScript framework default project has a _Launch Screen Storyboard_ and _Launch Images_. In iOS8 and later, your app may use storyboards; your app can use launch images for devices that run earlier versions of iOS. + +#### Launch screen images + +The images are placed, similar to the icons already mentioned, in `app/App_Resources/iOS`. The default project template ships several `Default-*.PNG` files there; you may consider changing them. + +In iOS8 and later versions, your app will display its storyboard. If you want to use images on all devices, you can consider disabling the _Launch Screen Storyboard_. Instructions for how to do this are explained later in the next section. + +Similar to the icons, you can use the [`UILaunchImageFile`](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/iPhoneOSKeys.html#//apple_ref/doc/uid/TP40009252-SW24) and [`UILaunchImages`](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/iPhoneOSKeys.html#//apple_ref/doc/uid/TP40009252-SW28) key in the `app/App_Resources/iOS`. + +#### Launch screen Storyboard + +The NativeScript framework will provide a _Launch Screen Storyboard_ in `platforms/ios//en.lproj/LaunchScreen.xib`, but does **not** yet provide a means to store it at `app/App_Resources/iOS`. +If you want to edit it you can use the `.xcodeproj` generated in `platforms/ios`. You will have to add it in source control. +CLI rebuilds may overwrite it, so you will have to watch out for automatic changes in it when you commit. + +To disable the default _Launch Screen Storyboard_, remove the `UILaunchStoryboardName` from the `app/App_Resources/iOS/Info.plist`: + +```xml +UILaunchStoryboardName +LaunchScreen +``` + +This will force all supported launch screens to use the _launch image_. + +#### Creating App Icons and Launch Screens for iOS + +Publishing your iOS app is an essential step in the development process and in order for your iOS application +to be published successfully in the App Store, there are some requirements that need to be fulfilled. +As described in [iOS Human Interface Guidelines](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html) setting the following is mandatory: + +- App name +- App icon +- Launch image or files + +In NativeScript, your application comes with predefined template settings and images for these steps. +In this article, we are going to introduce the workflow to create your own launch screens. + +:::warning Warning + +Occasionally, the iOS operating system caches your application’s icons and launch screens. If you’re updating icons or launch screens and not seeing your changes, delete the application from your device or emulator and redeploy. If on a real device: remove `platforms` folder from your project, delete app, restart device, redeploy. + +::: + +#### Setting launch screen and App Icons + +Setting up launch screens depends on the version of iOS you are targeting. +In iOS 7 and lower, the approach for creating the launch screen is to use static image resources. +The drawback of this method is that the app developer will have to provide many different +images, each with different resolution for each iOS device. In iOS 8 and above, the approach is to create +a LaunchScreen.storyboard, which is much more powerful in terms of customization and is easier to maintain. + +The default Hello-World project in NativeScript is provided with default settings that supports both +approaches. When you build your app for devices with iOS lower then version 8, NativeScript will use the static images and when you use NativeScript to build your app for devices with iOS 8 and above, it will use the provided LaunchScreen.storyboard. + +#### How to set your launch screen + +The default template in NativeScript (created with `ns create myApp`) provides you with predefined +AppIcons, launch images and a LaunchScreen.storyboard all with the NativeScript logo. +To modify that template and create your own launch screen using your own assets and design, you will need the following: + +- **app/App_Resources/iOS/Assets.xcassets**: The resource that holds your image asset catalogs (for AppIcons, LaunchImages and LaunchScreen). + +- **app/App_Resources/iOS/LaunchScreen.storyboard**: Your default storyboard used for your launch screen (used in iOS versions 8+). + +- **app/App_Resources/iOS/build.xcconfig**: The resource that holds the references to the assets catalogs which will be used + (optional: modify only if you change the name convention or introduce a new image asset catalog). + +- Xcode 7.1 or newer version (optional: needed only if you prefer WYSIWYG workflow for changing your images). + +The workflow for creating your own launch screen can be handled from Xcode or manually in the NativeScript environment. +In this article we are going to cover both the manual and the Xcode WYSIWYG approach. + +In your **app/App_Resources/iOS/Assets.xcassets** you will find the following sub-folders: + +- **AppIcon.appiconset**: The resource that holds the images for your AppIcons (all iOS versions). + +- **LaunchScreen.AspectFill.imageset**: The resource that holds the background image for your LaunchScreen.storyboard. + +- **LaunchScreen.Center.imageset**: The resource that holds the centered image for your LaunchScreen.storyboard. + +#### Customizing App Icons + +- Changing AppIcons: manual approach + +Open **AppIcon.appiconset** and change the default icons images with your own using the proper resolution for each image (e.g., icon-29.png should be 29px x 29px; icon-29@2x should be 58px x 58px; icon-29@3x should be 87px x 87px). +If your images have different file names then open Contents.json and change the key `filename` for each image. + +App icons config.json + +- Changing AppIcons: Xcode WYSIWYG approach + +Drag and drop your **Assets.xcassets** into Xcode (7.1 or newer version). +In the opened window choose **AppIcon** and add a proper image for each iOS version and device. +Close Xcode and rebuild your NativeScript app to use the new AppIcons. + +AppIcon setup in Xcode + +#### Customizing launch images + +- Manual approach + +Open **LaunchImage.launchimage** and change the default launch images with your own using the proper resolution for each image (e.g., Default-568h@2x.png should be 640px x 1136px). +If your images have different file names then open Contents.json and change the key `filename` for each image. + +| Device | Image Resolution | Image name | +| ----------------------- | ---------------- | -------------------------- | +| iPhone 1g-3Gs | 320x480 | `Default.png` | +| iPhone 4, 4s | 640x960 | `Default@2x.png` | +| iPhone 5, 5c, 5s | 640x1136 | `Default-568h@2x.png` | +| iPhone 6s - 8 | 750x1334 | `Default-667h@2x.png` | +| iPhone 6s Plus - 8 Plus | 1242x2208 | `Default-736h@3x.png` | +| iPhone X | 1125px × 2436px | `Default-1125h.png` | +| iPhone X Landscape | 2436px × 1125px | `Default-Landscape-X.png` | +| iPad, iPad 2, Mini | 768x1024 | `Default-Portrait.png` | +| iPad Landscape | 1024x768 | `Default-Landscape.png` | +| iPad Retina | 1536x2048 | `Default-Portrait@2x.png` | +| 12.9" iPad Pro | 2048x1536 | `Default-Landscape@2x.png` | + +:::tip Note + +For a better understanding of the supported image resolutions for the different iOS devices, refer to [iOS Human Interface Guidelines](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1) or check our reference table. +::: + +- Xcode WYSIWYG approach + +Drag and drop your **Assets.xcassets** into Xcode (7.1 or newer version). +In the opened window add the proper image for each iOS version and device. +Close Xcode and rebuild your NativeScript app to use the new launch images. + +:::tip Important + +Make sure you have provided all required images or your app will be rejected from publishing in the App Store. + +::: + +#### Customizing LaunchScreen.storyboard + +The default template app in NativeScript comes with **LaunchScreen.storyboard**, which contains two image views. +The first one, named **LaunchScreen.AspectFill.imageset**, is used to visualize your background. +The second one, named **LaunchScreen.Center.imageset**, is used to visualize your centered logo. +Your own storyboard can be customized to use your own logic with different images and styles. +However, keep in mind that according to iOS Human Interface Guidelines, the LaunchScreen should be as light as possible +with minimal or no moving elements and text labels. It is meant to provide immediate UX rather than artistic presentation. + +LaunchScreen setup in Xcode + +##### Customizing LaunchScreen.AspectFill + +- Manual approach + +Open **LaunchScreen.AspectFill.imageset** and change the default LaunchScreen.AspectFill images with your own using the proper scale for each image (1x, 2x and 3x). +As this is an image that will be used in your LaunchScreen.storyboard, your actual resolution may vary depending on your design. +The default NativeScript template ships a LaunchScreen-AspectFill.png and LaunchScreen-AspectFill@2x.png used as a sample background. +If your images have different file names then open Contents.json and change the key `filename` for each image. + +:::tip Important + +After each file change in the **Assets.xcassets** folder you should rebuild your project and restart your emulator to avoid visualizing cached images. + +::: + +- Xcode WYSIWYG approach + +Drag and drop your **Assets.xcassets** into Xcode (7.1 or newer version). +In the opened window choose **LaunchScreen.AspectFill** and add the properly scaled image for each entry (1x, 2x and 3x). +Close Xcode and rebuild your NativeScript app to use the new LaunchScreen.AspectFill. + +LaunchScreen.AspectFill setup in Xcode + +##### Customizing LaunchScreen.Center + +- Manual approach + +Open **LaunchScreen.Center.imageset** and change the default LaunchScreen.Center images with your own using the proper scale for each image (1x, 2x and 3x). +As this is an image that will be used in your LaunchScreen.storyboard, your actual resolution may vary depending on your design. +The default NativeScript template ships a LaunchScreen-Center.png and LaunchScreen-Center@2x.png used as a sample center logo image. +If your images have different file names then open Contents.json and change the key `filename` for each image. + +:::tip Important + +After each file change in the **Assets.xcassets** folder you should rebuild your project and restart your emulator to avoid visualizing cached images. + +::: + +- Xcode WYSIWYG approach + +Drag and drop your **Assets.xcassets** into Xcode (7.1 or newer version). +In the opened window choose **LaunchScreen.Center** and add the properly scaled image for each entry (1x, 2x and 3x). +Close Xcode and rebuild your NativeScript app to use the new LaunchScreen.Center. + +LaunchScreen.Center setup in Xcode + +### Certificates, identifiers & profiles + +Certificates, identifiers and profiles are managed at [https://developer.apple.com/membercenter](https://developer.apple.com/membercenter). + +[You should really explore the information Apple provides on certificates and identities](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/MaintainingCertificates/MaintainingCertificates.html). +This article will cover only the basics. + +### Account with Apple ID + +You will need a developer account with an _Apple ID_ so you can access the [Apple Developer Member Center](https://developer.apple.com/membercenter). + +You will need to be added as an iOS developer in your organization. + +### Development certificates + +Development certificates are used to sign iOS apps proving the origin of the app. If you plan to use the Xcode tooling it would be best to create a _development certificate_. + +A few pitfalls are: + +- A developer is allowed to have one certificate at any time. You must 'revoke' an existing certificate before you can create a new one. +- Certificates consist of public and private keys. The private key is never sent to Apple, so you cannot 'download' your certificate from the _Member Center_. If you lose the private key of your certificate, you have to revoke it and create a new one. +- When revoked or expired, the certificates may further invalidate _provisioning profiles_. Once the certificate is recreated, the _provisioning profiles_ need to be updated as well. +- Making a certificate requires a Mac. You use the Keychain Access tool to create a certificate request, generating a public and private keys at your side, then send the public key to Apple while storing the private key in your keychain. +- If you follow the steps at the _Member Center_ to create a new _development certificate_, the certificate must be stored in your keychain. You can consider exporting it and backing it up. + +:::tip Note + +Go to [https://developer.apple.com/account/ios/certificate/certificateList.action?type=development](https://developer.apple.com/account/ios/certificate/certificateList.action?type=development) click the '+' (add) button and follow the instructions for making a new 'iOS App Development' certificate. + +::: + +### Production certificates + +_Production certificates_ work similarly to development certificates. They consist of public and private keys. The private key stays at your side and is never sent to Apple. Your app is signed with the distribution certificate using your private key, +so Apple can verify the origin of submissions in _iTunes Connect_ using the public key you sent them. + +This _production certificates_ is used to sign the application binary when it is prepared for submission. +Usually when an app is built for a device, its IPA file is signed with the development certificate. + +:::tip Note + +You can read more about IPA (file extension) [here]() +Later, the tooling resigns the IPA with the _production certificate_ and appends the distribution provisioning profile when submitting to _iTunes Connect_. + +::: + +A few pitfalls are: + +- Creating _production certificates_ are more restricted than creating development certificates. Apple limit the number of _production certificates_ per team. +- Because production certificates are limited in quantity per team, and frequently shared between multiple team members, you must be extremely careful when you revoke an existing distribution certificate. If you ultimately lost your private key of a distribution certificate and revoke it, consult with anyone that may have backed it up or is in need of the new certificate. Hopefully this will avoid your new copy being revoked in the future or losing your admin rights. +- _Production certificates_ can be shared between team members. If you follow the steps at the _Member Center_ to create a new one (link below) the certificate will be stored in your keychain. You can export it as a .p12 file, easily backing it up and sharing it with senior team peers. + +If you need a new distribution certificate, go to [https://developer.apple.com/account/ios/certificate/certificateList.action?type=distribution](https://developer.apple.com/account/ios/certificate/certificateList.action?type=distribution) click the '+' (add) button and follow the instructions for making a new 'App Store Distribution' certificate. Chances are you are part of a larger organization and your role does not have sufficient rights to create a new distribution certificate. Admins or other team member may provide you the certificates in that case. In such cases, you will probably be given a .p12 file and a password. You should import the file in your keychain using the `Keychain Access` application. + +### Identifiers - App IDs + +To test your app on a device or submit in the _App Store_, you will need to create an _App ID_. +App IDs consist of a _Prefix_ or a _Team ID_ that is generated by Apple, followed by an ID provided by you that must match your _Bundle ID_. +For example, you can create an _App ID_ with the `org.nativescript.*` ID that will match all your NativeScript apps. +The wildcard pattern imposes some restrictions on the services you can use, so you may also consider using a non-wildcard pattern such as `org.nativescript.`. + +These identifiers are later used to bind apps with _provisioning profiles_. + +### Devices + +At the _Member Center_ you can register the devices you and your team use for testing. +Go to [https://developer.apple.com/account/ios/device/deviceList.action](https://developer.apple.com/account/ios/device/deviceList.action). + +To register a phone you will need its UDID. Connect it to the Mac and run in a terminal: + +```cli +instruments -s devices +``` + +It will output all known devices and their UDIDs. + +### Development provisioning profiles + +Development provisioning profiles bind together one or multiple developer signing identities (developer certificates), _App ID_ and device IDs. +These are created at [https://developer.apple.com/account/ios/profile/profileList.action?type=limited](https://developer.apple.com/account/ios/profile/profileList.action?type=limited). +If you are making a new one, or adding a new app to an existing one, make sure to select these three: + +- Your _development certificate_ +- _App ID identifier_, that matches your App ID +- The _device_ you will test on + +Unlike the certificates, _provisioning profiles_ are files that can be easily updated and downloaded from the Member Center (in .mobileprovision files) and installed in Xcode by double-clicking that file. + +Xcode is also capable of obtaining these automatically. Open Xcode and from the menu go to `Xcode > Preferences... > Accounts > (select your apple ID) > (double-click on your Team Name)`. +There you can check all signing identities (developer and _production certificates_) available to Xcode as well as `Download All` _provisioning profiles_. + +When you run an app on a device, Xcode will sign the app with your development certificate and add a provisioning profile that has your certificate, device ID and App ID. + +While the _development provisioning profiles_ are easily created and updated, they frequently invalidate, especially when multiple _developer certificates_ are involved. Every time one of them is revoked or expires, you need to update the provisioning certificate. + +These are not of a particular interest for _App Store_ submissions but you may need one to test on a real device. + +### Distribution provisioning profiles + +There are several _distribution provisioning profile_ types. The one you will need for _App Store_ submission is 'App Store Distribution Provisioning Profile'. +These are similar to the _development provisioning profiles_ because they bind: + +- Your _distribution certificate_ +- Your _device_-es +- An _App ID_ +- Various settings, enabled services, etc. + +_Distribution provisioning profiles_ are created at [https://developer.apple.com/account/ios/profile/profileList.action?type=production](https://developer.apple.com/account/ios/profile/profileList.action?type=production). + +For _App Store_ submissions, you must create an _App Store Distribution Provisioning Profile_. Once you create it, download it and double-click it on your Mac so it gets registered with Xcode. + +_Distribution provisioning profiles_ invalidate rarely since they refer a single _Distribution Certificate_. + +## App Store Connect + +While you manage your _provisioning profiles_ and certificates at the _Apple Developer Member Center_, apps are registered and submitted at [App Store Connect](https://appstoreconnect.apple.com) (former iTunes Connect). +This is where you will be able to create new apps, prepare app screens, descriptions, manage app versions, etc. + +### Account + +You will need your _Apple ID_ added to your organization with sufficient rights at [https://appstoreconnect.apple.com](https://appstoreconnect.apple.com). + +### Creating an app + +To publish your app in the iOS _App Store_ you will have to register your app. Log into [https://appstoreconnect.apple.com](https://appstoreconnect.apple.com) and go to 'My Apps'. +There you can check the status and edit existing apps or create a new app. + +Click the '+' button at the top left corner. The 'New App' dialog should appear. There you have to fill the public _App Store_ name of your app and primary language. + +Also, you have to set _Bundle ID_, which must match the _Bundle ID_ referred in ['1.1. Bundle ID'](#bundle-id). +If the drop-down does not contain a suitable match, you are probably missing an _App ID_ referred at ['2.4. Identifiers - App IDs'](#identifiers-app-ids). +If there is a wildcard _App ID_, that is a potential match so select it. You will be able to type the suffix, replacing the wildcard in a text box. + +At that point you have to fill in the App Information. +There are various assets that you must provide such as screenshots, icons, description, etc. +Failing to provide all necessary assets may prevent you from submitting your app, or result in app rejection. + +:::tip Note + +Screenshots not matching the actual app may result in rejection of a new version sent for approval. + +::: + +### Builds + +Once you have your app information registered at [https://appstoreconnect.apple.com](https://appstoreconnect.apple.com) it is time to build your NativeScript app for iOS and submit it to _iTunes Connect_ — using Xcode. + +#### Build versioning + +We have already explained how the _Bundle ID_ is set in your project, how the launch screen (or storyboard) and images are added to your app, and how you can set the display name. + +Before the build, you need to set two important things: the _Bundle Short Version String_ and the _Bundle Version String_. + +_Bundle Short Version String_ is the public version of your app. It is incremented between releases. For example: `2.1`. +_Bundle Version String_ is the internal build number. One public release usually has multiple release candidates. For example `2.1.1`, `2.1.2`, etc. + +iTunes Connect has a restriction that a bundle cannot be uploaded with the same version twice, so you must increment the _Bundle Version String_ with each upload. + +The _Bundle Short Version String_ should be incremented once your app version is uploaded, sent for approval, approved and published. + +Both values are stored in `app/App_Resources/iOS/Info.plist`: + +- The `CFBundleShortVersionString` key stores the _Bundle Short Version String_. +- The `CFBundleVersion` key stores the _Bundle Version String_. + +In the `app/App_Resources/iOS/Info.plist` they appear as: + +```xml +CFBundleShortVersionString +2.1 +CFBundleVersion +2.1.2 +``` + +If you need to edit these from the command line, there is a handy tool called `PlistBuddy` that can read and write Plist files. +For example, the following shell script appends the Jenkins `$BUILD_NUMBER` to the `CFBundleVersion` in the Info.plist: + +```bash +### Set CFBundleVersion ### +export CFBundleVersion=`/usr/libexec/PlistBuddy app/App_Resources/iOS/Info.plist -c "Print :CFBundleVersion"` +/usr/libexec/PlistBuddy app/App_Resources/iOS/Info.plist -c "Set :CFBundleVersion $CFBundleVersion.$BUILD_NUMBER" +``` + +### Submit via CLI + +You can also use `ns publish ios` to submit from the CLI, see [this guide](/guide/publishing/ns-publish). + +### Submit from Xcode + +You can execute the following command using the CLI: + +```cli +ns prepare ios +``` + +This will create an Xcode project in `platforms/ios/`. Then you may consider the following Apple article about how to [configure the project for distribution](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/ConfiguringYourApp/ConfiguringYourApp.html). + +The `platform` folder is not meant to stay in source control and you should be careful when you do modifications there. +Rebuilds may erase your changes and you should add changed files to source control. + +A common pitfall, if you are using CocoaPods, is to open the Xcode project instead of the workspace, so be sure to open the workspace. + +Once you have it open in Xcode, you have to go to your target's `Signing & Capabilities` and pick a team. +In `Build Settings` there should be a suitable 'iOS Developer' and 'Code Signing Identity'. + +From the top drop-down, select your target, and from the devices and emulators, pick 'Generic iOS Device'. + +Then you should be able to select from the top menu `Product > Archive`. + +This makes an xcodearchive and opens it in the Xcode Organizer. +The Xcode Organizer displays a list with builds of your app. Pick the last build and click `Upload to App Store...`. +You should select a team again and whether to include app symbols for your app. Next, you can see a list with the binary information, entitlements, etc. +Click `Upload`. + +If you upload successfully, you should be able to log in at [https://appstoreconnect.apple.com](https://appstoreconnect.apple.com) and see your build in 'Activities'. From there you can enable Test Flight beta testing or send it for approval. + +### Send for approval and publish + +Once you successfully submit a build at _App Store Connect_, you can enable testing through _Test Flight_. +When you are ready, go to the 'Build' section of your iOS app, pick the build, and click 'Submit for Review' for that version. +The app will pass through several [App Statuses](https://help.apple.com/app-store-connect/#/dev18557d60e). If your app passes Apple review, it can go live at the _App Store_. \ No newline at end of file diff --git a/content/guide/publishing/index.md b/content/guide/publishing/index.md index 52e15ed5..0c1c33ed 100644 --- a/content/guide/publishing/index.md +++ b/content/guide/publishing/index.md @@ -7,6 +7,7 @@ breadcrumbs: - name: 'Publishing' --- -- [Publishing to Google Play](/guide/publishing/android-google-play) -- Publishing to AppStore [WIP] [old v8 docs](https://v8.docs.nativescript.org/releasing.html#ios) -- [Publishing with Fastlane](/guide/publishing/fastlane) +## [Publishing to Google Play](/guide/publishing/android-google-play) +## [Publishing to Apple App Store](/guide/publishing/apple-app-store) +## [Publishing iOS updated using ns publish ios](/guide/publishing/ns-publish) +## [Publishing with Fastlane](https://blog.nativescript.org/automatic-nativescript-app-deployments-with-fastlane/) diff --git a/content/guide/publishing/ns-publish.md b/content/guide/publishing/ns-publish.md new file mode 100644 index 00000000..a6cbb10b --- /dev/null +++ b/content/guide/publishing/ns-publish.md @@ -0,0 +1,63 @@ +--- +title: Publishing with ns publish +category: Publishing +categoryLink: /guide/publishing/ +prev: /guide/publishing/ +next: false +contributors: + - rigor789 + - NathanWalker +breadcrumbs: + - name: 'Publishing' + href: '/guide/publishing/' + - name: 'Using ns publish' +--- + +You may want to review a few specific store preparation details in the following before using `ns publish`: +- [Publishing to Google Play](/guide/publishing/android-google-play) +- [Publishing to Apple App Store](/guide/publishing/apple-app-store) + +You can execute the following command inside a NativeScript project using the CLI: + +```bash +ns publish ios +``` + +The command will prompt for your `Apple ID` and `Password` for authentication with [iTunes Connect](https://itunesconnect.apple.com) and then produce a `release` build and proceed to upload it to iTunes Connect. + +Alternatively, you can use an existing build by running the following command: + +```bash +ns publish ios --ipa +``` + +All of the parameters needed for publishing can be passed to the `publish` command directly: + +```bash +ns publish ios [ [ [ []]]]] +``` + +For example, assuming that you want to issue a build using a mobile provision with an identifier _d5d40f61-b303-4fc8-aea3-fbb229a8171c_, you could run: + +```bash +ns publish ios my-apple-id my-password d5d40f61-b303-4fc8-aea3-fbb229a8171c "iPhone Distribution" +``` + +Note that the `Code Sign Identity` can be set to something generic like _iPhone Distribution_ in order to let the build automatically detect a code sign identity. + +You can also automate the uploads of already built packages: + +```bash +ns publish ios my-apple-id my-password --ipa /tmp/build/myIpa.ipa +``` + +For more information, run the following command: + +```bash +ns help publish ios +``` + +Some tools that allow the submission process to be automated: + +- https://blog.nativescript.org/automatic-nativescript-app-deployments-with-fastlane/ +- https://github.com/fastlane/fastlane diff --git a/content/guide/running.md b/content/guide/running.md index 2046c073..9b421cc6 100644 --- a/content/guide/running.md +++ b/content/guide/running.md @@ -11,7 +11,7 @@ To run a NativeScript app, you need a device — either a physical or virtu To run a project, use the `ns run` command. There's also a `ns debug` command covered in the [debugging documentation](/guide/debugging#debugging-with-chrome-devtools). -```cli +```bash ns run android ns run ios ``` @@ -52,13 +52,13 @@ Next, go to `Settings › System › Developer options` and enable `USB debuggin Plug in your device via USB and check that it is correctly being detected by ADB: -```cli +```bash adb devices ``` To verify NativeScript can also detect the device, run: -```cli +```bash ns devices android ``` @@ -99,7 +99,7 @@ If there's no `.xcworkspace` file, you can open the `.xcodeproj` file instead. Once the app successfully runs from Xcode, you can close it and continue using the NativeScript cli: -```cli +```bash ns run ios ``` @@ -111,7 +111,7 @@ Once the device has been [prepared for development](#preparing-an-ios-device-for After disconnecting the cable, the device should remain visible in `ns devices` and running the app should work as normal: -```cli +```bash ns run ios ``` diff --git a/content/guide/shared-element-transitions.md b/content/guide/shared-element-transitions.md index 6cb04fe0..255ba8b2 100644 --- a/content/guide/shared-element-transitions.md +++ b/content/guide/shared-element-transitions.md @@ -346,7 +346,7 @@ SharedTransition.events().on( SharedTransition.finishedEvent, (data: SharedTransitionEventData) => { // - } + }, ) ``` diff --git a/content/guide/styling.md b/content/guide/styling.md index 3a7fb511..4a8a642c 100644 --- a/content/guide/styling.md +++ b/content/guide/styling.md @@ -811,8 +811,7 @@ Used with CSS variables: ```css element { - --my-variable: 10: - width: calc(100% * var(--my-variable)); /* width: 125% */ + --my-variable: 10: width: calc(100% * var(--my-variable)); /* width: 125% */ } ``` diff --git a/content/guide/testing.md b/content/guide/testing.md index 2f7a881f..2b557399 100644 --- a/content/guide/testing.md +++ b/content/guide/testing.md @@ -17,14 +17,14 @@ Before writing and running unit tests, the completion of the following steps mus 1. [Install and configure the NativeScript CLI on your system.](/setup/) 1. If you don't have any projects, create a new project and navigate to the directory of the newly created directory. - ```cli + ```bash ns create projectName cd projectName ``` 1. If you want to create tests for an existing directory, navigate to the directory of the project. - ```cli + ```bash cd existingProjectDirectory ``` @@ -40,7 +40,7 @@ The NativeScript CLI lets you choose between three widely popular unit testing f To initialize your project for unit testing, run the following command and, when prompted, use the keyboard arrows to select the framework that you want to use. -```cli +```bash ns test init ``` @@ -59,19 +59,19 @@ To enable and write unit tests for TypeScript or Angular project install the Typ -```cli +```bash npm i @types/jasmine --save-dev ``` -```cli +```bash npm i @types/mocha --save-dev ``` -```cli +```bash npm i @types/qunit --save-dev ``` @@ -147,12 +147,12 @@ QUnit.test('Hello World Sample Test:', function (assert) { assert.equal( mainViewModel.createViewModel().counter, 42, - 'Counter, 42; equal succeeds.' + 'Counter, 42; equal succeeds.', ) //Assert that the counter equals 42. assert.equal( mainViewModel.createViewModel().message, '42 taps left', - 'Message, 42 taps left; equal succeeds.' + 'Message, 42 taps left; equal succeeds.', ) //Assert that the message is "42 taps left". }) ``` @@ -248,13 +248,13 @@ Before running your tests, verify that your development machine and your testing - The Android native emulators on which you want to run your tests must be running on your development machine. To verify that your machine recognizes the devices, run the following command. - ```cli + ```bash ns device ``` - The physical devices on which you want to run your tests must be connected to your development machine. To verify that your machine recognizes the devices, run the following command. - ```cli + ```bash ns device ``` @@ -269,25 +269,25 @@ To execute your test suite on any connected Android devices or running Android e Be sure you have prepared the app at least once before starting the unit test runner. ::: -```cli +```bash ns test android ``` To execute your test suite on connected iOS devices, run the following command. -```cli +```bash ns test ios ``` To execute your test suite in the iOS Simulator, run the following command. -```cli +```bash ns test ios --emulator ``` To execute your test suite in CI make sure to add `--justlaunch`. This parameter will exit the simulator. -```cli +```bash ns test ios --emulator --justlaunch ``` @@ -308,7 +308,7 @@ The NativeScript can continuously monitor your code for changes and when such ch To enable this behavior, run your `ns test` command with the `--watch` flag. For example: -```cli +```bash ns test android --watch ns test ios --watch ns test ios --emulator --watch diff --git a/content/guide/updating/common-steps.md b/content/guide/updating/common-steps.md index 5ca09ad5..597d21d2 100644 --- a/content/guide/updating/common-steps.md +++ b/content/guide/updating/common-steps.md @@ -6,7 +6,7 @@ Before starting an update, it's recommended to have a clean git branch. Having a Every update starts with updating the NativeScript CLI to the latest version. -```cli +```bash npm install -g nativescript@latest ``` @@ -23,7 +23,7 @@ v8.x.x For a quick update of the essential dependencies, run: -```cli +```bash ns update ``` @@ -47,6 +47,6 @@ If you prefer to update dependencies manually, you can do that as well, for exam To make sure all dependencies are updated correctly, it's recommended to clean the project with: -```cli +```bash ns clean ``` diff --git a/content/guide/updating/index.md b/content/guide/updating/index.md index 9faa7e71..f998229b 100644 --- a/content/guide/updating/index.md +++ b/content/guide/updating/index.md @@ -16,7 +16,7 @@ Updating a NativeScript app is usually a quick process if done regularly. The fo To try upcoming features that have not been release yet, you can install the `next` tag of the CLI (built from the latest commit in the [NativeScript CLI repository](https://github.com/NativeScript/nativescript-cli/commits/main)) via: -```cli +```bash npm install -g nativescript@next ``` @@ -24,6 +24,6 @@ You can also pass a tag to the `ns update` command. For example, to try all the latest features that have not made it into a stable release yet, you can run: -```cli +```bash ns update next ``` diff --git a/content/guide/widgets-ios.md b/content/guide/widgets-ios.md new file mode 100644 index 00000000..e49b11b8 --- /dev/null +++ b/content/guide/widgets-ios.md @@ -0,0 +1,154 @@ +--- +title: Developing Widgets for iOS +--- + +[Widgets](https://developer.apple.com/design/human-interface-guidelines/widgets) display content and offer specific functionality without requiring people to open your app. People can use widgets to organize and personalize their devices, quickly accessing the information and features they need. + +> A widget elevates and displays a small amount of timely, relevant information from your app or game so people can see it at a glance in additional contexts. + +Starting with NativeScript 8.9 CLI (`npm install -g nativescript`), you can create an iOS Widget with a single command: + +```bash +$ ns widget ios +``` + +This will allow you to create a Home Screen Widget, a Live Activity on the lock screen or a combination of both. + + + +## ns widget ios + +The widget command generates all the necessary files for your NativeScript project to develop iOS widgets. The setup includes a fully functioning hypothetical pizza delivery widget which you can learn from and customize for your own needs. + +The command will prompt to name the widget and choose a type. We will provide a custom name to outline exactly what is generated to explain each file. + +```bash +$ ns widget ios +? What name would you like for this widget? (Default is 'widget') › pizza +? What type of widget would you like? › - Use arrow-keys. Return to submit. + Live Activity +❯ Live Activity with Home Screen Widget - This will create a Live Activity that will display on the iOS Lock Screen with ability to also display a Home Screen Widget. + Home Screen Widget +``` + +Once the choice is made, the widget will be generated. Based on the above responses, you would see a few followup steps: + +```bash +Created Shared Resources: Shared_Resources/iOS/SharedWidget. + +🚀 Your widget is now ready to develop: App_Resources/iOS/extensions/pizza. + +Followup steps: + +- Check App_Resources/iOS/build.xcconfig uses IPHONEOS_DEPLOYMENT_TARGET=17 or higher. +- Update App_Resources/iOS/extensions/provisioning.json with your profile id. +- Customize App_Resources/iOS/extensions/pizza/PizzaLiveActivity.swift for your display. +- Customize Shared_Resources/iOS/SharedWidget/Sources/SharedWidget/PizzaModel.swift for your data. +``` + +Let's discuss each note by outlining everything that was generated: + +- `App_Resources/iOS/app.entitlements`: Includes the App Groups capability for shared data between your app and widget. _If one doesn't exist, it will be created for you._ +- `App_Resources/iOS/extensions/pizza/extension.json`: Xcode build configuration details. This is where additional frameworks, if desired, for your widget can also be included in the `frameworks` collection at the top. +- `App_Resources/iOS/extensions/pizza/Info.plist`: The widget's info property list. +- `App_Resources/iOS/extensions/pizza/pizza.entitlements`: Similar to the app.entitlements, this also includes the App Groups capability for shared data between your app and widget. +- `App_Resources/iOS/extensions/pizza/PizzaBundle.swift`: This allows different widget features to be bundled together. For example, when choosing a Live Activity with a Home Screen Widget, both will be listed as part of the widget bundle here. +- `App_Resources/iOS/extensions/pizza/PizzaHomeScreenWidget.swift`: The Home Screen Widget itself. This is where the view is defined as well as the [Timeline](https://developer.apple.com/documentation/widgetkit/timeline) which determines how data should be provided to the view. It comes already setup to use data from shared app/widget data which you can customize further. +- `App_Resources/iOS/extensions/pizza/PizzaLiveActivity.swift`: The Live Activity to show on the lock screen. The view is defined via `LockScreenView` and also provides example customizations to the iPhone [Dynamic Island](https://support.apple.com/guide/iphone/use-the-dynamic-island-iph28f50d10d/ios). +- `App_Resources/iOS/extensions/pizza/PrivacyInfo.xcprivacy`: The privacy policy for the widget. Refence documentation can be found [here](https://developer.apple.com/documentation/bundleresources/privacy-manifest-files). +- `App_Resources/iOS/extensions/provisioning.json`: The provisioning profile configured to use with the widget id. On first generation, a placeholder is inserted however you can update this value to the provision profile needed. + +::: tip Provisioning Profiles +`open ~/Library/Developer/Xcode/UserData/Provisioning\ Profiles` and sort by modified date; this will allow you to find the profile id auto generated by xcode for your widget. +::: + +- `App_Resources/iOS/src/AppleWidgetUtils.swift`: This provides various static utilities for your NativeScript app to start, update and cancel live activities, as well as initiate widget updates and interact with shared data between your app and the widget. +- `Shared_Resources/iOS/SharedWidget/Sources/SharedWidget/PizzaModel.swift`: This model is the contract of data between your app and your widget. + +::: info Shared Model Data +Because your app and widget are separate processes yet need to share the same model data to interact, `Shared_Resources/iOS/SharedWidget` is created as a local shared Swift package and auto configured via `nativescript.config` to share between your app and widget. This allows you to avoid unnecessary code duplication. +::: + +Your projects `references.d.ts` are also annotated to include strong types for `AppleWidgetUtils` usage from your TypeScript codebase: + +```ts +/** + * Customize for your own Apple Widget Data + */ +declare interface AppleWidgetModelData { + numberOfPizzas: number + totalAmount: string + message: string + deliveryTime: number +} +declare class AppleWidgetUtils extends NSObject { + static startActivity(data: AppleWidgetModelData): void + static updateActivity( + data: Pick, + ): void + static cancelActivity(data: Pick): void + static updateWidget(): void + static updateDataWithKey(key: string, data: string): void + static getDataWithKey(key: string): string + static removeDataWithKey(key: string): void +} +``` + +Based on your own data needs, you can customize `AppleWidgetModelData` and the method signatures of `AppleWidgetUtils` to suit your case. + +All shared group data between your app and widget are intended to be a string value so when using `AppleWidgetUtils.updateDataWithKey` with structured data, you can stringify it: + +```ts +AppleWidgetUtils.updateDataWithKey( + 'widgetData', + JSON.stringify({ + pizzas: ['Pepperoni', 'Supreme', 'Hawaiian', 'Meat Lovers', 'Margherita'], + orderTime: this.orderTime(), + delivered: false, + }), +) +``` + +This data is always decoded in the widget for it's own data purposes. + +::: tip Widget Development +All of the generated files are intended to be customized for your needs while at the same time giving you enough to follow to be successful at widget creation. +::: + +## Sample Project + +A helpful sample project is available [here](https://github.com/NativeScript/widget-ios-example). It utilizes everything that `ns widget ios` provides for you to learn from. + +## Resources + +Additional features can be discussed anytime: + +- https://github.com/orgs/NativeScript/discussions +- https://github.com/NativeScript/NativeScript/issues/10703 + +Widget extensions have been supported with NativeScript for several years. Prior to 8.9, they required a number of manual steps. We'll include the following resources for additional context: + +- https://blog.nativescript.org/add-home-screen-widget +- https://www.bryanleetc.com/creating-a-share-extension-in-nativescript/ +- https://blog.nativescript.org/making-a-today-widget-in-ios-with-nativescript-and-ui-for-nativescript +- https://old.docs.nativescript.org/tooling/ios-app-extensions.html + +## Troubleshooting + +Several common cases could occur while developing widgets. + +### Minimum version targeting + +The widget generator expects iOS 17 minimum. + +If you encounter errors similar to the following: + +```bash +App_Resources/iOS/extensions/widget/WidgetBundle.swift:7:3: error: 'WidgetHomeScreen' is only available in application extensions for iOS 17.0 or newer +``` + +Add the following line to your `App_Resources/iOS/build.xcconfig`: + +```bash +IPHONEOS_DEPLOYMENT_TARGET = 17; +``` diff --git a/content/plugins/animated-circle.md b/content/plugins/animated-circle.md index 778cf7c1..378f99d3 100644 --- a/content/plugins/animated-circle.md +++ b/content/plugins/animated-circle.md @@ -31,7 +31,7 @@ A plugin that creates a circular progress bar on iOS and Android. ## Installation -```cli +```bash npm install @nativescript/animated-circle ``` @@ -103,7 +103,7 @@ import { registerElement } from 'nativescript-vue' registerElement( 'AnimatedCircle', - () => require('@nativescript/animated-circle').AnimatedCircle + () => require('@nativescript/animated-circle').AnimatedCircle, ) ``` @@ -138,7 +138,7 @@ import { registerNativeViewElement } from 'svelte-native/dom' registerNativeViewElement( 'animatedCircle', - () => require('@nativescript/animated-circle').AnimatedCircle + () => require('@nativescript/animated-circle').AnimatedCircle, ) ``` @@ -195,7 +195,7 @@ declare global { registerElement( 'animatedCircle', - () => require('@nativescript/animated-circle').AnimatedCircle + () => require('@nativescript/animated-circle').AnimatedCircle, ) ``` diff --git a/content/plugins/appavailability.md b/content/plugins/appavailability.md index 89579b91..65a13757 100644 --- a/content/plugins/appavailability.md +++ b/content/plugins/appavailability.md @@ -15,7 +15,7 @@ A plugin that checks if an app is installed on a device. ## Installation -```cli +```bash npm install @nativescript/appavailability ``` @@ -47,7 +47,7 @@ available(twitterScheme).then((available) => { Utils.openUrl( twitterScheme + (isIOS ? '/user?screen_name=' : 'user?user_id=') + - 'eddyverbruggen' + 'eddyverbruggen', ) } else { // open in the default browser @@ -66,7 +66,7 @@ if (availableSync('twitter://')) { Utils.openUrl( 'twitter://' + (isIOS ? '/user?screen_name=' : 'user?user_id=') + - 'eddyverbruggen' + 'eddyverbruggen', ) } else { Utils.openUrl('https://twitter.com/eddyverbruggen') diff --git a/content/plugins/apple-pay.md b/content/plugins/apple-pay.md index df1be772..808b3c40 100644 --- a/content/plugins/apple-pay.md +++ b/content/plugins/apple-pay.md @@ -113,7 +113,7 @@ applePayBtn.once( // 1. Send the user payment data to your payments services provider(PSP) // 2. Use the response from the PSP to further process your transation, or // close the payment sheet - } + }, ) ``` diff --git a/content/plugins/apple-sign-in.md b/content/plugins/apple-sign-in.md index 6677573a..1f9a2ab3 100644 --- a/content/plugins/apple-sign-in.md +++ b/content/plugins/apple-sign-in.md @@ -15,7 +15,7 @@ A plugin that allows you to authenticate users with [Sign In with Apple](https:/ ## Installation -```cli +```bash npm install @nativescript/apple-sign-in ``` diff --git a/content/plugins/auto-fit-text.md b/content/plugins/auto-fit-text.md index 3829f18d..f6d1a1c9 100644 --- a/content/plugins/auto-fit-text.md +++ b/content/plugins/auto-fit-text.md @@ -26,7 +26,7 @@ A plugin that extends the Nativescript [Label](https://docs.nativescript.org/ui/ ## Installation -```cli +```bash npm install @nativescript/auto-fit-text ``` @@ -99,7 +99,7 @@ import { registerElement } from 'nativescript-vue' registerElement( 'AutoFitText', - () => require('@nativescript/auto-fit-text').AutoFitText + () => require('@nativescript/auto-fit-text').AutoFitText, ) ``` @@ -121,14 +121,17 @@ import { registerNativeViewElement } from 'svelte-native/dom' registerNativeViewElement( 'autoFitText', - () => require('@nativescript/auto-fit-text').AutoFitText + () => require('@nativescript/auto-fit-text').AutoFitText, ) ``` 2. Use the view in a markup of any component. ```svelte - + ``` ## Credits diff --git a/content/plugins/background-http.md b/content/plugins/background-http.md index a41f455e..b97d56ef 100644 --- a/content/plugins/background-http.md +++ b/content/plugins/background-http.md @@ -31,7 +31,7 @@ A plugin that allows you to make background HTTP uploads. ## Installation -```cli +```bash npm install @nativescript/background-http ``` @@ -417,7 +417,7 @@ All the following task events extend the preceding EventData interface. To test the plugin , you must have a server instance to accept the uploads. There are online services that can be used for small file uploads - e.g. `http://httpbin.org/post` However, these cannot be used for large files. The plugin repository comes with a simple server you can run locally. Here is how to start it: -```cli +```bash cd demo-server npm i node server 8080 diff --git a/content/plugins/biometrics.md b/content/plugins/biometrics.md index 1d2b1011..f770b85e 100644 --- a/content/plugins/biometrics.md +++ b/content/plugins/biometrics.md @@ -38,7 +38,7 @@ A plugin that allows you to authenticate users with biometrics, such as fingerpr ## Installation -```cli +```bash npm install @nativescript/biometrics ``` @@ -168,7 +168,7 @@ biometricAuth // For IOS the secret is stored in the keycain }) .catch((err) => - this.set('status', `Biometric ID NOT OK: " + ${JSON.stringify(err)}`) + this.set('status', `Biometric ID NOT OK: " + ${JSON.stringify(err)}`), ) ``` @@ -194,7 +194,7 @@ biometricAuth verifyMySecret(decryptedText) // verify the secret by some means, e.g. a call to a back end server. }) .catch((err) => - this.set('status', `Biometric ID NOT OK: " + ${JSON.stringify(err)}`) + this.set('status', `Biometric ID NOT OK: " + ${JSON.stringify(err)}`), ) ``` @@ -215,7 +215,7 @@ biometricAuth console.log('Fingerprint/ PIN was OK') }) .catch((err) => - this.set('status', `Biometric ID NOT OK: " + ${JSON.stringify(err)}`) + this.set('status', `Biometric ID NOT OK: " + ${JSON.stringify(err)}`), ) ``` diff --git a/content/plugins/brightness.md b/content/plugins/brightness.md index 3a2b4976..97afe872 100644 --- a/content/plugins/brightness.md +++ b/content/plugins/brightness.md @@ -27,7 +27,7 @@ A plugin that get and set the device's brightness level. ## Installation -```cli +```bash npm install @nativescript/brightness ``` diff --git a/content/plugins/camera.md b/content/plugins/camera.md index a70c9383..010404e8 100644 --- a/content/plugins/camera.md +++ b/content/plugins/camera.md @@ -37,7 +37,7 @@ A plugin that allows you to take a picture and optionally save it on the device To install the plugin, run the following command in the root directory of your project: -```cli +```bash npm install @nativescript/camera --save ``` diff --git a/content/plugins/contacts.md b/content/plugins/contacts.md index b0845282..39b5e98a 100644 --- a/content/plugins/contacts.md +++ b/content/plugins/contacts.md @@ -51,7 +51,7 @@ A plugin that allows you to access Contacts directory on iOS and Android. You ca Run the following command to install the plugin: -```cli +```bash npm install @nativescript/contacts ``` @@ -178,7 +178,7 @@ Contacts.getContact().then(function (args) { contact.name.family = 'Doe' ImageSource.fromUrl( - 'http://www.google.com/images/errors/logo_sm_2.png' + 'http://www.google.com/images/errors/logo_sm_2.png', ).then(function (src) { contact.photo = src contact.save() @@ -219,7 +219,7 @@ Contacts.getContact().then(function (args) { if (args.response === 'selected') { const contact = args.data //See data structure below console.log( - contact.isUnified() ? 'Contact IS unified' : 'Contact is NOT unified' + contact.isUnified() ? 'Contact IS unified' : 'Contact is NOT unified', ) } }) @@ -247,7 +247,7 @@ Contacts.getContactsByName('Hicks', contactFields).then( }, function (err) { console.log('Error: ' + err) - } + }, ) ``` @@ -275,7 +275,7 @@ Contacts.getAllContacts(contactFields).then( }, function (err) { console.log('Error: ' + err) - } + }, ) ``` @@ -297,7 +297,7 @@ Contacts.getContactById(contactId).then( }, function (err) { console.log('Error: ' + err) - } + }, ) ``` @@ -324,7 +324,7 @@ Contacts.getGroups('Test Group') //[name] optional. If defined will look for gro }, function (err) { console.log('Error: ' + err) - } + }, ) ``` @@ -365,7 +365,7 @@ Contacts.getGroups('Test Group').then( }, function (err) { console.log('Error: ' + err) - } + }, ) ``` @@ -390,7 +390,7 @@ Contacts.getContact().then(function (args) { }, function (err) { console.log('Error: ' + err) - } + }, ) } }) @@ -421,13 +421,13 @@ Contacts.getGroups('Test Group').then( }, function (err) { console.log('Error: ' + err) - } + }, ) } }, function (err) { console.log('Error: ' + err) - } + }, ) ``` @@ -453,13 +453,13 @@ Contacts.getGroups('Test Group') //[name] optional. If defined will look for gro }, function (err) { console.log('Error: ' + err) - } + }, ) } }, function (err) { console.log('Error: ' + err) - } + }, ) ``` diff --git a/content/plugins/datetimepicker.md b/content/plugins/datetimepicker.md index 23181534..bfbfe2f1 100644 --- a/content/plugins/datetimepicker.md +++ b/content/plugins/datetimepicker.md @@ -47,7 +47,7 @@ A plugin that provides the UI elements `DatePickerField`, `TimePickerField` and ## Installation -```cli +```bash npm install @nativescript/datetimepicker ``` @@ -137,7 +137,7 @@ Once you have installed the plugin, register the `DateTimePickerFields` with you ```ts registerNativeViewElement( 'dateTimePickerFields', - () => require('@nativescript/datetimepicker').DateTimePickerFields + () => require('@nativescript/datetimepicker').DateTimePickerFields, ) ``` @@ -361,7 +361,7 @@ function createPicker(args: EventData) { cancelButtonText: 'Cancel', locale: 'es', }, - dateTimePickerStyle + dateTimePickerStyle, ).then((result) => { // handle the result }) @@ -378,12 +378,12 @@ function onPickDateTap(args: EventData) { const dateTomorrow = new Date( dateToday.getFullYear(), dateToday.getMonth(), - dateToday.getDate() + 1 + dateToday.getDate() + 1, ) const dateNextWeek = new Date( dateToday.getFullYear(), dateToday.getMonth(), - dateToday.getDate() + 7 + dateToday.getDate() + 7, ) DateTimePicker.pickDate({ @@ -409,7 +409,7 @@ function onPickTimeTap(args: EventData) { const dateTomorrow = new Date( dateToday.getFullYear(), dateToday.getMonth(), - dateToday.getDate() + 1 + dateToday.getDate() + 1, ) dateTomorrow.setHours(8) dateTomorrow.setMinutes(0) diff --git a/content/plugins/debug-ios.md b/content/plugins/debug-ios.md index fb305b16..d6fc1e6b 100644 --- a/content/plugins/debug-ios.md +++ b/content/plugins/debug-ios.md @@ -13,7 +13,7 @@ editUrl: https://github.com/NativeScript/plugins/tree/main/packages/debug-ios/RE Advanced iOS debugging made possible via [Flex](https://github.com/FLEXTool/FLEX). -```cli +```bash npm install @nativescript/debug-ios -D ``` diff --git a/content/plugins/detox.md b/content/plugins/detox.md index d998382f..1762789f 100644 --- a/content/plugins/detox.md +++ b/content/plugins/detox.md @@ -30,7 +30,7 @@ Easily add [Detox](https://github.com/wix/Detox) end-to-end testing to your Nati ## Installation -```cli +```bash npm install @nativescript/detox ``` @@ -40,13 +40,13 @@ The full setup requirements can be found [here](https://github.com/wix/Detox/blo ### Install Detox command line tools (`detox-cli`) -```cli +```bash npm install -g detox-cli ``` ### Install [applesimutils](https://github.com/wix/AppleSimulatorUtils) (iOS) -```cli +```bash brew tap wix/brew brew install applesimutils ``` @@ -55,19 +55,19 @@ brew install applesimutils ### Install the Detox package to your NativeScript project -```cli +```bash npm install detox --save-dev ``` ### Install Jest -```cli +```bash npm install jest jest-cli jest-circus --save-dev --no-package-lock ``` ### Initialize Detox -```cli +```bash detox init -r jest ``` @@ -257,7 +257,7 @@ You should now be able to write tests to simulate user behavior and test for exp Build your app for testing using the following command with the value for the `-c` flag being any of the properties of `configuration` object' in `.detoxrc.js`: -```cli +```bash detox build -c ios.sim.debug|android.emu.debug ``` @@ -265,7 +265,7 @@ detox build -c ios.sim.debug|android.emu.debug Run your tests with the folling command: -```cli +```bash detox test -c ios.sim.debug|android.emu.debug ``` @@ -289,14 +289,14 @@ Now to build and run tests you would run: Android: -```cli +```bash npm run e2e:android:build:debug npm run e2e:android:test:debug ``` iOS: -```cli +```bash npm run e2e:ios:build:debug npm run e2e:ios:test ``` diff --git a/content/plugins/directions.md b/content/plugins/directions.md index f9315cea..c217d76a 100644 --- a/content/plugins/directions.md +++ b/content/plugins/directions.md @@ -29,7 +29,7 @@ A plugin that allows you to launch the Google Maps app, if it's installed on the To install the plugin, run the following command in the root directory of your app. -```cli +```bash npm install @nativescript/directions ``` @@ -74,7 +74,7 @@ directions }, (error) => { console.log(error) - } + }, ) ``` diff --git a/content/plugins/email.md b/content/plugins/email.md index 3e68642e..02391eb2 100644 --- a/content/plugins/email.md +++ b/content/plugins/email.md @@ -44,7 +44,7 @@ This plugin depends on the default mail app. If you want a fallback to a third p To install the plugin, run the following command in the root directory of your project: -```cli +```bash npm install @nativescript/email ``` @@ -98,7 +98,7 @@ compose({ }, function (err) { console.log('Error: ' + err) - } + }, ) ``` diff --git a/content/plugins/facebook.md b/content/plugins/facebook.md index c251b1c8..afce3df7 100644 --- a/content/plugins/facebook.md +++ b/content/plugins/facebook.md @@ -35,7 +35,7 @@ A plugin that allows you to integrate Facebook Login with your app using the Fac Install the plugin to add the Facebook SDK by running the following command: -```cli +```bash npm install @nativescript/facebook ``` diff --git a/content/plugins/fingerprint-auth.md b/content/plugins/fingerprint-auth.md index 56f83312..0dbfd6eb 100644 --- a/content/plugins/fingerprint-auth.md +++ b/content/plugins/fingerprint-auth.md @@ -15,7 +15,7 @@ This plugin is replaced by [@nativescript/biometrics](../biometrics) # @nativescript/fingerprint-auth -```cli +```bash npm install @nativescript/fingerprint-auth ``` @@ -108,9 +108,9 @@ fingerprintAuth 'Fingerprint NOT OK. Error code: ' + error.code + '. Error message: ' + - error.message + error.message, ) - } + }, ) ``` diff --git a/content/plugins/firebase-admob.md b/content/plugins/firebase-admob.md index 127888bf..5c2d5d07 100644 --- a/content/plugins/firebase-admob.md +++ b/content/plugins/firebase-admob.md @@ -69,7 +69,7 @@ The `@nativescript/firebase-admob` plugin currently supports loading and display To install `@nativescript/firebase-admob`, run the following command in the root directory of the project: -```cli +```bash npm install @nativescript/firebase-admob ``` @@ -341,7 +341,7 @@ Create an Interstitial ad instance by calling the static `createForAdRequest` on ```ts import { InterstitialAd } from '@nativescript/firebase-admob' const ad = InterstitialAd.createForAdRequest( - 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy' + 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy', ) ``` @@ -353,7 +353,7 @@ To listen for the ad lifecycle events, such as when the ad is display or dismiss import { InterstitialAd } from '@nativescript/firebase-admob' const ad = InterstitialAd.createForAdRequest( - 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy' + 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy', ) ad.onAdEvent((event, error, data) => { @@ -379,7 +379,7 @@ ad.onAdEvent((event, error, data) => { import { InterstitialAd } from '@nativescript/firebase-admob' const ad = InterstitialAd.createForAdRequest( - 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy' + 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy', ) ad.onAdEvent((event, error, data) => { @@ -408,7 +408,7 @@ To display the ad, call the `show` method on the ad instance. This method is cal import { InterstitialAd } from '@nativescript/firebase-admob' const ad = InterstitialAd.createForAdRequest( - 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy' + 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy', ) ad.onAdEvent((event, error, data) => { @@ -493,7 +493,7 @@ const loader = new NativeAdLoader( nativeAdOptions: { adChoicesPlacement: AdChoicesPlacement.TOP_RIGHT, }, - } + }, ) ``` @@ -631,7 +631,7 @@ Create a Rewarded ad instance by calling the `createForAdRequest` static method import { RewardedAd } from '@nativescript/firebase-admob' const ad = RewardedAd.createForAdRequest( - 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy' + 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy', ) ``` @@ -642,7 +642,7 @@ const ad = RewardedAd.createForAdRequest( import { RewardedAd } from '@nativescript/firebase-admob' const ad = RewardedAd.createForAdRequest( - 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy' + 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy', ) ad.onAdEvent((event, error, data) => { @@ -661,7 +661,7 @@ ad.onAdEvent((event, error, data) => { import { RewardedAd } from '@nativescript/firebase-admob' const ad = RewardedAd.createForAdRequest( - 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy' + 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy', ) ad.onAdEvent((event, error, data) => { @@ -682,7 +682,7 @@ To show the ad on the screen, call the `show()` method on the ad instance. import { RewardedAd } from '@nativescript/firebase-admob' const ad = RewardedAd.createForAdRequest( - 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy' + 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy', ) ad.onAdEvent((event, error, data) => { diff --git a/content/plugins/firebase-analytics.md b/content/plugins/firebase-analytics.md index 5fe42bef..8e4fc0ab 100644 --- a/content/plugins/firebase-analytics.md +++ b/content/plugins/firebase-analytics.md @@ -48,7 +48,7 @@ Analytics collects usage and behavior data for your app. Its two primary concern Install the plugin by running the following command in the root directory of your project. -```cli +```bash npm install @nativescript/firebase-analytics ``` diff --git a/content/plugins/firebase-app-check.md b/content/plugins/firebase-app-check.md index 85605680..2d875f4d 100644 --- a/content/plugins/firebase-app-check.md +++ b/content/plugins/firebase-app-check.md @@ -11,7 +11,7 @@ editUrl: https://github.com/NativeScript/firebase/tree/main/packages/firebase-ap # @nativescript/firebase-app-check -```cli +```bash npm install @nativescript/firebase-app-check ``` diff --git a/content/plugins/firebase-auth.md b/content/plugins/firebase-auth.md index 64eb0af3..31d78ade 100644 --- a/content/plugins/firebase-auth.md +++ b/content/plugins/firebase-auth.md @@ -57,7 +57,7 @@ Use this plugin with the [@nativescript/firebase-core](../firebase-core/) plugin Install the plugin by running the following command in the root directory of your project. -```cli +```bash npm install @nativescript/firebase-auth ``` @@ -211,7 +211,7 @@ signIn({ .then((result: User) => { const oauthCredential = AppleAuthProvider.credential( result.identityToken, - result.nonce + result.nonce, ) firebase().auth().signInWithCredential(oauthCredential) @@ -250,7 +250,7 @@ LoginManager.logInWithPermissions(['public_profile', 'email']).then( // Sign-in the user with the credential return firebase().auth().signInWithCredential(facebookCredential) - } + }, ) ``` @@ -277,7 +277,7 @@ Twitter.init('TWITTER_CONSUMER_KEY', 'TWITTER_CONSUMER_SECRET') // called earlie TwitterSignIn.logIn().then((data) => { const twitterAuthCredential = TwitterAuthProvider.credential( data.authToken, - data.authTokenSecret + data.authTokenSecret, ) firebase().auth().signInWithCredential(twitterAuthCredential) @@ -315,7 +315,7 @@ GoogleSignin.configure() // called earlier in the app GoogleSignin.signIn().then((user) => { const credential = GoogleAuthProvider.credential( user.idToken, - user.accessToken + user.accessToken, ) firebase().auth().signInWithCredential(credential) @@ -357,7 +357,7 @@ PhoneAuthProvider.provider() // use the verificationCode entered by the user to create PhoneAuthCredentials const credential = PhoneAuthProvider.provider().credential( verificationId, - verificationCode + verificationCode, ) firebase().auth().signInWithCredential(credential) }) diff --git a/content/plugins/firebase-core.md b/content/plugins/firebase-core.md index d37a0045..7a2f2f55 100644 --- a/content/plugins/firebase-core.md +++ b/content/plugins/firebase-core.md @@ -37,7 +37,7 @@ Use this plugin with any of the following plugins: Install the plugin by running the following command in the root directory of your project. -```cli +```bash npm install @nativescript/firebase-core ``` diff --git a/content/plugins/firebase-crashlytics.md b/content/plugins/firebase-crashlytics.md index 2a645884..5dc5818d 100644 --- a/content/plugins/firebase-crashlytics.md +++ b/content/plugins/firebase-crashlytics.md @@ -45,7 +45,7 @@ Crashlytics helps you to collect analytics and details about crashes and errors Install the plugin by running the following command in the root directory of your project. -```cli +```bash npm install @nativescript/firebase-crashlytics ``` diff --git a/content/plugins/firebase-database.md b/content/plugins/firebase-database.md index f3eb1678..6ce358ca 100644 --- a/content/plugins/firebase-database.md +++ b/content/plugins/firebase-database.md @@ -65,7 +65,7 @@ NativeScript Firebase provides integration with the Android & iOS Firebase SDKs, Install the plugin by running the following command in the root directory of your project. -```cli +```bash npm install @nativescript/firebase-database ``` diff --git a/content/plugins/firebase-dynamic-links.md b/content/plugins/firebase-dynamic-links.md index fc059468..18d7c771 100644 --- a/content/plugins/firebase-dynamic-links.md +++ b/content/plugins/firebase-dynamic-links.md @@ -68,7 +68,7 @@ This plugin allows you to add the [Firebase Dynamic Links SDK](https://firebase. 1. Install the plugin by running the following command in the root directory of your project. - ```cli + ```bash npm install @nativescript/firebase-dynamic-links ``` @@ -141,7 +141,7 @@ Allows you to add a callback function that gets called when your app's screen is ```ts type OnLinkListener = ( link: DynamicLink | null, - error: FirebaseError | null + error: FirebaseError | null, ) => void ``` @@ -164,7 +164,7 @@ const dynamicLinks = firebase().dynamicLinks() const link = dynamicLinks.createShortLink( 'https://docs.nativescript.org', - 'https://triniwiz.page.link' + 'https://triniwiz.page.link', ) link.social = new DynamicLinkSocialParameters() @@ -248,7 +248,7 @@ dynamicLinks = firebase().dynamicLinks() dynamicLinkParameters: DynamicLinkParameters = dynamicLinks.createLink( link, - domainUri + domainUri, ) ``` @@ -269,7 +269,7 @@ dynamicLinks = firebase().dynamicLinks() dynamicLinkParameters: DynamicLinkParameters = dynamicLinks.createShortLink( link, domainUri, - shortLinkType + shortLinkType, ) ``` @@ -328,7 +328,7 @@ Allows you to add a callback function that gets called when your app's screen is ```ts type OnLinkListener = ( link: DynamicLink | null, - error: FirebaseError | null + error: FirebaseError | null, ) => void ``` diff --git a/content/plugins/firebase-firestore.md b/content/plugins/firebase-firestore.md index 01e6aec8..d1baa0f1 100644 --- a/content/plugins/firebase-firestore.md +++ b/content/plugins/firebase-firestore.md @@ -99,7 +99,7 @@ To add the Cloud Firestore SDK to your app, install and import the `@nativescrip 1. Install the plugin by running the following command in the root directory of your project. -```cli +```bash npm install @nativescript/firebase-firestore ``` @@ -398,7 +398,7 @@ async function massDeleteUsers() { } massDeleteUsers().then(() => - console.log('All users deleted in a single batch operation.') + console.log('All users deleted in a single batch operation.'), ) ``` @@ -440,7 +440,7 @@ users console.log( `Full Name: ${snapshot.data()['full_name']} ${ snapshot.data()['last_name'] - }` + }`, ) }) .catch((error) => console.error('Failed to add user:', error)) @@ -462,7 +462,7 @@ firebase() }, (error) => { console.error(error) - } + }, ) ``` @@ -1523,9 +1523,8 @@ Returns the Transaction object for iOS. ```ts firestore().runTransaction(async (transaction) => { // 3. Read the document's data - const documentSnapshot: DocumentSnapshot = await transaction.get( - documentReference - ) + const documentSnapshot: DocumentSnapshot = + await transaction.get(documentReference) }) ``` @@ -1565,7 +1564,7 @@ firestore().runTransaction(async (transaction) => { documentReference, field, value, - moreFieldsAndValues + moreFieldsAndValues, ) //OR transactionAfterUpdate = transaction.update(documentReference, data) diff --git a/content/plugins/firebase-functions.md b/content/plugins/firebase-functions.md index f9036a7c..d2b7fcfc 100644 --- a/content/plugins/firebase-functions.md +++ b/content/plugins/firebase-functions.md @@ -49,7 +49,7 @@ To create your Firestore database, follow the instructions at [Create a Cloud Fi To add the Cloud Firebase Functions SDK to your app, install the `@nativescript/firebase-functions` plugin by running the following command in the root directory of your project. -```cli +```bash npm install @nativescript/firebase-functions ``` diff --git a/content/plugins/firebase-in-app-messaging.md b/content/plugins/firebase-in-app-messaging.md index 99b76c1e..70335395 100644 --- a/content/plugins/firebase-in-app-messaging.md +++ b/content/plugins/firebase-in-app-messaging.md @@ -44,7 +44,7 @@ To add the Firebase In-App Messaging SDK to your app follow these steps: 1. Install the `@nativescript/firebase-in-app-messaging` plugin by running the following command in the root directory of your project. -```cli +```bash npm install @nativescript/firebase-in-app-messaging ``` diff --git a/content/plugins/firebase-installations.md b/content/plugins/firebase-installations.md index 96ca1136..4eaec597 100644 --- a/content/plugins/firebase-installations.md +++ b/content/plugins/firebase-installations.md @@ -11,7 +11,7 @@ editUrl: https://github.com/NativeScript/firebase/tree/main/packages/firebase-in # @nativescript/firebase-installations -```cli +```bash npm install @nativescript/firebase-installations ``` diff --git a/content/plugins/firebase-messaging.md b/content/plugins/firebase-messaging.md index f2276c18..1022b1ba 100644 --- a/content/plugins/firebase-messaging.md +++ b/content/plugins/firebase-messaging.md @@ -92,7 +92,7 @@ To add the Firebase Cloud Messaging SDK to your app follow these steps: 1. Install the `@nativescript/firebase-messaging` plugin by running the following command in the root directory of your project. -```cli +```bash npm install @nativescript/firebase-messaging ``` @@ -233,7 +233,7 @@ admin.messaging().sendToDevice( contentAvailable: true, // Required for background/quit data-only messages on Android priority: 'high', - } + }, ) ``` @@ -368,7 +368,7 @@ async function onUserPictureLiked(ownerId, userId, picture) { contentAvailable: true, // Required for background/quit data-only messages on Android priority: 'high', - } + }, ) } ``` diff --git a/content/plugins/firebase-performance.md b/content/plugins/firebase-performance.md index 94846ad0..45aea6d3 100644 --- a/content/plugins/firebase-performance.md +++ b/content/plugins/firebase-performance.md @@ -67,7 +67,7 @@ To add the Firebase Performance Monitoring to your app, follow these steps: 1. Install the `@nativescript/firebase-performance` plugin by running the following command in the root directory of your project. -```cli +```bash npm install @nativescript/firebase-performance ``` diff --git a/content/plugins/firebase-remote-config.md b/content/plugins/firebase-remote-config.md index 4279b536..4f16e48d 100644 --- a/content/plugins/firebase-remote-config.md +++ b/content/plugins/firebase-remote-config.md @@ -72,7 +72,7 @@ To add the Firebase Remote Config to your app, follow these steps: 1. Install the `@nativescript/firebase-remote-config` plugin by running the following command in the root directory of your project. -```cli +```bash npm install @nativescript/firebase-remote-config ``` @@ -144,7 +144,7 @@ firebase() console.log('Configs were retrieved from the backend and activated.') } else { console.log( - 'No configs were fetched from the backend, and the local configs were already activated' + 'No configs were fetched from the backend, and the local configs were already activated', ) } }) diff --git a/content/plugins/firebase-storage.md b/content/plugins/firebase-storage.md index 188d8082..9564f267 100644 --- a/content/plugins/firebase-storage.md +++ b/content/plugins/firebase-storage.md @@ -88,7 +88,7 @@ To add the Cloud Storage SDK to your app, install and import the `@nativescript/ 1. Install the plugin by running the following command in the root directory of your project. -```cli +```bash npm install @nativescript/firebase-storage ``` @@ -181,7 +181,7 @@ const task = reference.putFile(pathToFile) task.on('state_changed', (taskSnapshot) => { console.log( - `${taskSnapshot.bytesTransferred} transferred out of ${taskSnapshot.totalBytes}` + `${taskSnapshot.bytesTransferred} transferred out of ${taskSnapshot.totalBytes}`, ) }) diff --git a/content/plugins/flutter.md b/content/plugins/flutter.md index 92dbbf86..96a5ba20 100644 --- a/content/plugins/flutter.md +++ b/content/plugins/flutter.md @@ -188,7 +188,7 @@ Common troubleshooting tips: Before running Android, you will want to build the flutter module first. Otherwise you may see this error: -```cli +```bash Transform's input file does not exist: flutter_views/.android/Flutter/build/intermediates/flutter/debug/libs.jar ``` diff --git a/content/plugins/geolocation.md b/content/plugins/geolocation.md index 0ad99fa7..608b6c8d 100644 --- a/content/plugins/geolocation.md +++ b/content/plugins/geolocation.md @@ -35,7 +35,7 @@ A geolocation plugin to use for getting current location, monitor movement, etc. To install the plugin, run the following command in the root of your project. -```cli +```bash npm install @nativescript/geolocation ``` diff --git a/content/plugins/google-maps.md b/content/plugins/google-maps.md index 76816ee0..dc61f8cd 100644 --- a/content/plugins/google-maps.md +++ b/content/plugins/google-maps.md @@ -109,7 +109,7 @@ at `App_Resources/iOS`. ## Installation -```cli +```bash npm install @nativescript/google-maps ``` @@ -275,8 +275,8 @@ googleMap.animateCamera( lat: -32.1234, lng: 125.1234, }, - googleMap.cameraPosition.zoom - ) + googleMap.cameraPosition.zoom, + ), ) ``` @@ -644,7 +644,7 @@ You can create Polylines using the [GoogleMap](#googlemap-object)'s object `addP ```ts function addPolyline( map: GoogleMap, - polylineOptions: PolylineOptions + polylineOptions: PolylineOptions, ): Polyline { return map.addPolyline(polylineOptions) } @@ -686,7 +686,7 @@ You can create Ground Overlays using the [GoogleMap](#googlemap-object)'s object ```ts function addGroundOverlay( map: GoogleMap, - groundOverlayOptions: GroundOverlayOptions + groundOverlayOptions: GroundOverlayOptions, ): GroundOverlay { return map.addGroundOverlay(groundOverlayOptions) } @@ -729,7 +729,7 @@ You can create Tile Overlays using the [GoogleMap](#googlemap-object)'s object ` ```ts function addTileOverlay( map: GoogleMap, - tileOverlayOptions: TileOverlayOptions + tileOverlayOptions: TileOverlayOptions, ): TileOverlay { return map.addTileOverlay(tileOverlayOptions) } diff --git a/content/plugins/google-pay.md b/content/plugins/google-pay.md index 86ff83b4..43bb0c6c 100644 --- a/content/plugins/google-pay.md +++ b/content/plugins/google-pay.md @@ -42,7 +42,7 @@ A plugin that allows you to offer [Google Pay](https://developers.google.com/pay ## Installation -```cli +```bash ns plugin add @nativescript/google-pay ``` @@ -114,7 +114,7 @@ googlePayBtn.once( // send the user payments data to your payments services provider here const result = await someHttpCallToPaymentServiceProvider(payloadToBackend) - } + }, ) ``` diff --git a/content/plugins/google-signin.md b/content/plugins/google-signin.md index 9d950368..17fdbcc7 100644 --- a/content/plugins/google-signin.md +++ b/content/plugins/google-signin.md @@ -42,7 +42,7 @@ A plugin that allows you to authenticate users with Google Sign-In. Install the plugin by running the following command at the root of the project. -```cli +```bash npm install @nativescript/google-signin ``` @@ -64,14 +64,14 @@ To generate the SHA-1 fingerprint for the debug keystore with the following comm - **macOS/Linux** -```cli +```bash keytool -list -v \ -alias androiddebugkey -keystore ~/.android/debug.keystore ``` - **Windows** -```cli +```bash keytool -list -v \ -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore ``` @@ -142,7 +142,7 @@ Register the button as follows: import { registerElement } from '@nativescript/angular' registerElement( 'GoogleSignInButton', - () => require('@nativescript/google-signin').GoogleSignInButton + () => require('@nativescript/google-signin').GoogleSignInButton, ) ``` @@ -159,7 +159,7 @@ To register the button, add the following code to the `main.ts` file. ```ts registerElement( 'GoogleSignInButton', - () => require('@nativescript/google-signin').GoogleSignInButton + () => require('@nativescript/google-signin').GoogleSignInButton, ) ``` diff --git a/content/plugins/haptics.md b/content/plugins/haptics.md index 1338d40c..d25f7bdc 100644 --- a/content/plugins/haptics.md +++ b/content/plugins/haptics.md @@ -34,7 +34,7 @@ Thanks to [Eddy Verbruggen](EddyVerbruggen) for providing [nativescript-taptic-e ## Installation -```cli +```bash npm install @nativescript/haptics ``` diff --git a/content/plugins/imagepicker.md b/content/plugins/imagepicker.md index 8870c95f..ec27ed55 100644 --- a/content/plugins/imagepicker.md +++ b/content/plugins/imagepicker.md @@ -36,7 +36,7 @@ Imagepicker plugin supporting both single and multiple selection. Install the plugin by running the following command in the root directory of your app. -```cli +```bash npm install @nativescript/imagepicker ``` diff --git a/content/plugins/ionic-portals.md b/content/plugins/ionic-portals.md index a66b5846..dffa5547 100644 --- a/content/plugins/ionic-portals.md +++ b/content/plugins/ionic-portals.md @@ -55,7 +55,7 @@ A plugin that allows you to use [Ionic Portals](https://ionic.io/docs/portals) i To install the plugin, run the following command from the root of your project: -```cli +```bash npm install @nativescript/ionic-portals ``` @@ -193,7 +193,7 @@ const subscriptionId = IonicPortalManager.subscribeToTopic( 'useful-web-event', (result) => { console.log('received web portal useful-web-event with data:', result.data) - } + }, ) ``` diff --git a/content/plugins/ios-security.md b/content/plugins/ios-security.md index 595cba00..179309df 100644 --- a/content/plugins/ios-security.md +++ b/content/plugins/ios-security.md @@ -44,7 +44,7 @@ editUrl: https://github.com/NativeScript/plugins/tree/main/packages/ios-security To install the plugin, run the following command in your app's root folder: -```cli +```bash npm install @nativescript/ios-security ``` diff --git a/content/plugins/iqkeyboardmanager.md b/content/plugins/iqkeyboardmanager.md index 371220e1..238fe4f7 100644 --- a/content/plugins/iqkeyboardmanager.md +++ b/content/plugins/iqkeyboardmanager.md @@ -43,7 +43,7 @@ A NativeScript wrapper for the popular [IQKeyboardManager](https://cocoapods.org To install the plugin, run the following command from the root folder of your project: -```cli +```bash npm install @nativescript/iqkeyboardmanager ``` @@ -123,7 +123,7 @@ registerElement('PreviousNextView', () => PreviousNextView) ```ts registerElement( 'PreviousNextView', - () => require('@nativescript/iqkeyboardmanager').PreviousNextView + () => require('@nativescript/iqkeyboardmanager').PreviousNextView, ) ``` @@ -148,7 +148,7 @@ registerElement( ```ts registerNativeViewElement( 'previousNextView', - () => require('@nativescript/iqkeyboardmanager').PreviousNextView + () => require('@nativescript/iqkeyboardmanager').PreviousNextView, ) ``` @@ -251,11 +251,11 @@ declare global { } registerElement( 'previousNextView', - () => require('@nativescript/iqkeyboardmanager').PreviousNextView + () => require('@nativescript/iqkeyboardmanager').PreviousNextView, ) registerElement( 'textViewWithHint', - () => require('@nativescript/iqkeyboardmanager').TextViewWithHint + () => require('@nativescript/iqkeyboardmanager').TextViewWithHint, ) ``` diff --git a/content/plugins/jetpack-compose.md b/content/plugins/jetpack-compose.md index e3d2fede..c0b82518 100644 --- a/content/plugins/jetpack-compose.md +++ b/content/plugins/jetpack-compose.md @@ -26,7 +26,7 @@ A plugin that allows you to use Jetpack Compose in NativeScript. ## Installation -```cli +```bash npm install @nativescript/jetpack-compose ``` @@ -122,7 +122,7 @@ import { declare var com registerJetpackCompose( 'flyingHearts', - (view) => new ComposeDataDriver(new com.example.FlyingHearts(), view) + (view) => new ComposeDataDriver(new com.example.FlyingHearts(), view), ) ``` diff --git a/content/plugins/keyboard-toolbar.md b/content/plugins/keyboard-toolbar.md index 476afc83..5a5a8777 100644 --- a/content/plugins/keyboard-toolbar.md +++ b/content/plugins/keyboard-toolbar.md @@ -153,7 +153,7 @@ Register the plugin in `app.js` (or depending on your app's setup: `app.ts`, or import Vue from 'nativescript-vue' Vue.registerElement( 'KeyboardToolbar', - () => require('nativescript-keyboard-toolbar').Toolbar + () => require('nativescript-keyboard-toolbar').Toolbar, ) ``` diff --git a/content/plugins/local-notifications.md b/content/plugins/local-notifications.md index 4da0a8de..8627fde1 100644 --- a/content/plugins/local-notifications.md +++ b/content/plugins/local-notifications.md @@ -50,7 +50,7 @@ Just like remote push notifications, but a few orders of magnitude easier to set Install the plugin by running the following command in the root directory of your project. -```cli +```bash npm install @nativescript/local-notifications ``` @@ -122,7 +122,7 @@ LocalNotifications.schedule([ }, (error) => { console.log('scheduling error: ' + error) - } + }, ) ``` @@ -173,9 +173,8 @@ LocalNotifications.addOnMessageReceivedCallback((notification) => { ### schedule() ```ts -scheduledNotificationsIDs: Array = await LocalNotifications.schedule( - scheduleOptions -) +scheduledNotificationsIDs: Array = + await LocalNotifications.schedule(scheduleOptions) ``` Schedules the specified [scheduleOptions](#scheduleoptions) notification(s), if the user has granted the permission. If the user has not been prompted for permission, it prompts the user for permission and schedules the notification(s) if permission is granted. For a manual permission request, use the [requestPermission](#requestpermission) method. diff --git a/content/plugins/localize.md b/content/plugins/localize.md index 4bf9843e..254fb835 100644 --- a/content/plugins/localize.md +++ b/content/plugins/localize.md @@ -50,7 +50,7 @@ A plugin that implements internationalization (i18n) using the native capabiliti To install the plugin, run the following command in the root directory of your project. -```cli +```bash npm install @nativescript/localize ``` diff --git a/content/plugins/mlkit-core.md b/content/plugins/mlkit-core.md index e0062b14..ee82ba36 100644 --- a/content/plugins/mlkit-core.md +++ b/content/plugins/mlkit-core.md @@ -44,7 +44,7 @@ A plugin that provides a UI component to access the different functionalities of ## Installation -```cli +```bash npm install @nativescript/mlkit-core ``` @@ -149,7 +149,7 @@ Detection works only for optional modules installed #### Barcode Scanning -```cli +```bash npm i @nativescript/mlkit-barcode-scanning ``` @@ -167,7 +167,7 @@ For more details, see [@nativescript/mlkit-barcode-scanning](../mlkit-barcode-sc #### Face Detection -```cli +```bash npm install @nativescript/mlkit-face-detection ``` @@ -186,7 +186,7 @@ For more details, see [@nativescript/mlkit-face-detection](../mlkit-face-detecti #### Image Labeling -```cli +```bash npm install @nativescript/mlkit-image-labeling ``` @@ -204,7 +204,7 @@ For more details, see [nativescript/mlkit-image-labeling](../mlkit-image-labelin #### Object Detection -```cli +```bash npm install @nativescript/mlkit-object-detection ``` @@ -222,7 +222,7 @@ For more details, see [@nativescript/mlkit-object-detection](../mlkit-object-det #### Pose Detection -```cli +```bash npm install @nativescript/mlkit-pose-detection ``` @@ -240,7 +240,7 @@ For more details, see [@nativescript/mlkit-pose-detection](../mlkit-pose-detecti #### Text Recognition -```cli +```bash npm install @nativescript/mlkit-text-recognition ``` diff --git a/content/plugins/mlkit-face-detection.md b/content/plugins/mlkit-face-detection.md index 0d0165b9..4bf2cc97 100644 --- a/content/plugins/mlkit-face-detection.md +++ b/content/plugins/mlkit-face-detection.md @@ -25,7 +25,7 @@ A plugin that is used with [@nativescript/mlkit-core](../mlkit-core/) to enable Install `@nativescript/mlkit-face-detection` by running the following command: -```cli +```bash npm install @nativescript/mlkit-face-detection ``` diff --git a/content/plugins/mlkit-image-labeling.md b/content/plugins/mlkit-image-labeling.md index 26fd9152..dea51be1 100644 --- a/content/plugins/mlkit-image-labeling.md +++ b/content/plugins/mlkit-image-labeling.md @@ -23,7 +23,7 @@ A plugin that is used with [@nativescript/mlkit-core](../mlkit-core/) to enable ## Installation -```cli +```bash npm install @nativescript/mlkit-image-labeling ``` diff --git a/content/plugins/mlkit-object-detection.md b/content/plugins/mlkit-object-detection.md index 0a563bfa..3645ce8f 100644 --- a/content/plugins/mlkit-object-detection.md +++ b/content/plugins/mlkit-object-detection.md @@ -25,7 +25,7 @@ A plugin that is used with [@nativescript/mlkit-core](../mlkit-core/) to enable Install `@nativescript/mlkit-object-detection` by running the following command: -```cli +```bash npm install @nativescript/mlkit-object-detection ``` diff --git a/content/plugins/mlkit-pose-detection.md b/content/plugins/mlkit-pose-detection.md index 57d1cc19..39aa66a5 100644 --- a/content/plugins/mlkit-pose-detection.md +++ b/content/plugins/mlkit-pose-detection.md @@ -25,7 +25,7 @@ A plugin that is used with [@nativescript/mlkit-core](../mlkit-core/) to enable Install `@nativescript/mlkit-pose-detection` by running the following command: -```cli +```bash npm install @nativescript/mlkit-pose-detection ``` diff --git a/content/plugins/mlkit-text-recognition.md b/content/plugins/mlkit-text-recognition.md index b540f549..f61d7f00 100644 --- a/content/plugins/mlkit-text-recognition.md +++ b/content/plugins/mlkit-text-recognition.md @@ -23,7 +23,7 @@ A plugin used with [@nativescript/mlkit-core](../mlkit-core) to enable Text Reco ## Installation -```cli +```bash npm install @nativescript/mlkit-text-recognition ``` diff --git a/content/plugins/nativescript-ui/rad-list-view.md b/content/plugins/nativescript-ui/rad-list-view.md index c6803dd5..a10c9bef 100644 --- a/content/plugins/nativescript-ui/rad-list-view.md +++ b/content/plugins/nativescript-ui/rad-list-view.md @@ -20,7 +20,7 @@ The **NativeScript UI ListView** plugin is a virtualizing list component that pr In Command prompt / Terminal navigate to your application root folder and run: -```cli +```bash npm install nativescript-ui-listview ``` diff --git a/content/plugins/payments.md b/content/plugins/payments.md index 15fb157c..12cfeb94 100644 --- a/content/plugins/payments.md +++ b/content/plugins/payments.md @@ -173,7 +173,7 @@ export class SomeViewModel { case PaymentEvent.Context.PROCESSING_ORDER: if (event.result === PaymentEvent.Result.FAILURE) { console.log( - `🛑 Payment Failure - ${event.payload.description} 🛑` + `🛑 Payment Failure - ${event.payload.description} 🛑`, ) // handle the failure of the purchase } else if (event.result === PaymentEvent.Result.SUCCESS) { diff --git a/content/plugins/picker.md b/content/plugins/picker.md index 46339645..5e78be1f 100644 --- a/content/plugins/picker.md +++ b/content/plugins/picker.md @@ -15,7 +15,7 @@ A NativeScript plugin that provides a UI element for picking an object/value fro ## Installation -```cli +```bash npm install @nativescript/picker ``` diff --git a/content/plugins/plugin-workspace-guide.md b/content/plugins/plugin-workspace-guide.md index 00830f1d..017caffd 100644 --- a/content/plugins/plugin-workspace-guide.md +++ b/content/plugins/plugin-workspace-guide.md @@ -27,7 +27,7 @@ With our new workspace now in GitHub we can now clone it to begin developing plu create-workspace3 -```cli +```bash git clone https://github.com/nstudio/nativescript-ui-kit.git Cloning into 'nativescript-ui-kit'... @@ -38,14 +38,14 @@ cd nativescript-ui-kit 1. This first step will ensure all the dependencies are installed properly and only really needs to be run once after cloning the workspace. You can also use it anytime you simply want to clean/reset the workspace dependencies. - ```cli + ```bash npm run setup ``` 2. Now let's configure it to use the settings we prefer like which organization we want these plugins associated with. This will also give us a chance to configure the default package.json repository url and author details we want each package to use. - ```cli + ```bash npm run config ? What npm scope would you like to use for this workspace? @@ -67,7 +67,7 @@ cd nativescript-ui-kit Let's add a package to develop a plugin, for example: `@nstudio/nativescript-label-marquee` -```cli +```bash npm run add ? What should the new package be named? @@ -90,7 +90,7 @@ This created a `packages/nativescript-label-marquee` folder containing a plugin ## Focus on a single package to develop in isolation -```cli +```bash npm start ``` @@ -103,7 +103,7 @@ You can reset anytime with `npm start` > `focus.reset` ENTER ## Publishing packages -```cli +```bash npm run publish-packages ``` @@ -117,7 +117,7 @@ Not all packages need specific Angular compatibility. Only if you want to provid You can [see an example of Angular specific behavior in a plugin here](https://github.com/NativeScript/plugins/blob/main/packages/datetimepicker/angular/nativescript-datetimepicker.accessors.ts). -```cli +```bash npm run add-angular ``` @@ -127,7 +127,7 @@ At the prompt, enter the name of the package to add an `angular` folder to it wi One of the nice benefits of using our plugin workspaces is updating them is made simple and efficient through Nx tooling. The TSC maintains plugin workspace migrations so whenever one is available you can update your plugin workspace with just a few simple commands (which will often provide dependency version bumps of supporting packages to latest NativeScript versions, configuration improvements, as well as other welcome additions to help you create and maintain NativeScript plugins): -```cli +```bash yarn nx migrate @nativescript/plugin-tools ``` @@ -135,7 +135,7 @@ That will fetch `latest` version of `plugin-tools`, analyze the package to see i Sometimes `@nativescript/plugin-tools` updates won't need any migrations so you won't always see migrations available but if it states they are available you can run them as the message states: -```cli +```bash // install latest updates yarn @@ -250,7 +250,7 @@ export class PickerFieldComponent constructor( _elementRef: ElementRef, _iterableDiffers: IterableDiffers, - _cdRef: ChangeDetectorRef + _cdRef: ChangeDetectorRef, ) { super(_elementRef, _iterableDiffers, _cdRef) } diff --git a/content/plugins/shared-notification-delegate.md b/content/plugins/shared-notification-delegate.md index 921f7383..24fa8782 100644 --- a/content/plugins/shared-notification-delegate.md +++ b/content/plugins/shared-notification-delegate.md @@ -15,7 +15,7 @@ This project aims to prevent the shortcomings that come from the iOS implementat ## Installation -```cli +```bash npm install @nativescript/shared-notification-delegate ``` @@ -65,21 +65,21 @@ interface DelegateObserver { center: UNUserNotificationCenter, response: UNNotificationResponse, completionHandler: () => void, - next: () => void + next: () => void, ): void userNotificationCenterOpenSettingsForNotification?( center: UNUserNotificationCenter, notification: UNNotification, stop: () => void, - next: () => void + next: () => void, ): void userNotificationCenterWillPresentNotificationWithCompletionHandler?( center: UNUserNotificationCenter, notification: UNNotification, completionHandler: (p1: UNNotificationPresentationOptions) => void, - next: () => void + next: () => void, ): void /** diff --git a/content/plugins/social-share.md b/content/plugins/social-share.md index 4ac984c6..22f5969b 100644 --- a/content/plugins/social-share.md +++ b/content/plugins/social-share.md @@ -32,7 +32,7 @@ editUrl: https://github.com/NativeScript/plugins/tree/main/packages/social-share ## Installation -```cli +```bash npm install @nativescript/social-share ``` @@ -75,7 +75,7 @@ import { shareUrl } from '@nativescript/social-share' shareUrl( 'https://www.nativescript.org/', 'Home of NativeScript', - 'How would you like to share this url?' + 'How would you like to share this url?', ) ``` diff --git a/content/plugins/swift-ui.md b/content/plugins/swift-ui.md index 72f52f49..941fdb96 100644 --- a/content/plugins/swift-ui.md +++ b/content/plugins/swift-ui.md @@ -36,7 +36,7 @@ Use SwiftUI with NativeScript. ## Installation -```cli +```bash npm install @nativescript/swift-ui ``` @@ -133,12 +133,12 @@ declare const SampleViewProvider: any registerSwiftUI( 'sampleView', - (view) => new UIDataDriver(SampleViewProvider.alloc().init(), view) + (view) => new UIDataDriver(SampleViewProvider.alloc().init(), view), ) registerSwiftUI( 'barChart', - (view) => new UIDataDriver(BarChartProvider.alloc().init(), view) + (view) => new UIDataDriver(BarChartProvider.alloc().init(), view), ) ``` @@ -170,11 +170,11 @@ registerElement('SwiftUI', () => SwiftUI) registerSwiftUI( 'sampleView', - (view) => new UIDataDriver(SampleViewProvider.alloc().init(), view) + (view) => new UIDataDriver(SampleViewProvider.alloc().init(), view), ) registerSwiftUI( 'barChart', - (view) => new UIDataDriver(BarChartProvider.alloc().init(), view) + (view) => new UIDataDriver(BarChartProvider.alloc().init(), view), ) ``` @@ -195,11 +195,11 @@ registerElement('SwiftUIView', () => require('@nativescript/swift-ui').SwiftUI) registerSwiftUI( 'sampleView', - (view) => new UIDataDriver(SampleViewProvider.alloc().init(), view) + (view) => new UIDataDriver(SampleViewProvider.alloc().init(), view), ) registerSwiftUI( 'barChart', - (view) => new UIDataDriver(BarChartProvider.alloc().init(), view) + (view) => new UIDataDriver(BarChartProvider.alloc().init(), view), ) ``` @@ -221,12 +221,12 @@ Register SwiftUI follows: ```ts registerSwiftUI( 'sampleView', - (view) => new UIDataDriver(SampleViewProvider.alloc().init(), view) + (view) => new UIDataDriver(SampleViewProvider.alloc().init(), view), ) registerSwiftUI( 'barChart', - (view) => new UIDataDriver(BarChartProvider.alloc().init(), view) + (view) => new UIDataDriver(BarChartProvider.alloc().init(), view), ) interface SwiftUIViewAttributes extends ViewAttributes { diff --git a/content/plugins/tailwindcss.md b/content/plugins/tailwindcss.md index 1d88b33a..e6f78f52 100644 --- a/content/plugins/tailwindcss.md +++ b/content/plugins/tailwindcss.md @@ -38,13 +38,13 @@ This guide assumes you are using `@nativescript/webpack@5.x` as some configurati Install `@nativescript/tailwind` and `tailwindcss` -```cli +```bash npm install --save @nativescript/tailwind tailwindcss ``` Generate a `tailwind.config.js` with -```cli +```bash npx tailwindcss init ``` @@ -113,7 +113,7 @@ module.exports = { if you want to apply customizations to `tailwindcss` or `@nativescript/tailwind`, you will need to disable autoloading: -```cli +```bash ns config set tailwind.autoload false ``` @@ -129,7 +129,7 @@ This usage is considered legacy and will not be supported - however we are docum See instructions -```cli +```bash npm install --save-dev @nativescript/tailwind tailwindcss postcss postcss-loader ``` @@ -143,7 +143,7 @@ module.exports = { Generate a `tailwind.config.js` with -```cli +```bash npx tailwindcss init ``` diff --git a/content/plugins/theme-switcher.md b/content/plugins/theme-switcher.md index f9a89d05..4e64a34e 100644 --- a/content/plugins/theme-switcher.md +++ b/content/plugins/theme-switcher.md @@ -27,7 +27,7 @@ editUrl: https://github.com/NativeScript/plugins/tree/main/packages/theme-switch ## Installation -```cli +```bash npm install @nativescript/theme-switcher ``` diff --git a/content/plugins/twitter.md b/content/plugins/twitter.md index 569b8692..68854c8b 100644 --- a/content/plugins/twitter.md +++ b/content/plugins/twitter.md @@ -29,7 +29,7 @@ A plugin that allows you to authenticate a user with their Twitter account. ## Installation -```cli +```bash npm install @nativescript/twitter ``` diff --git a/content/plugins/zip.md b/content/plugins/zip.md index 2eda5c6b..4b74a785 100644 --- a/content/plugins/zip.md +++ b/content/plugins/zip.md @@ -35,7 +35,7 @@ A plugin to zip and unzip files. ## Installation -```cli +```bash npm install @nativescript/zip ``` diff --git a/content/project-structure/src/fonts.md b/content/project-structure/src/fonts.md index 33f595b5..5173600e 100644 --- a/content/project-structure/src/fonts.md +++ b/content/project-structure/src/fonts.md @@ -10,7 +10,7 @@ A folder for storing custom fonts. Any `.ttf` files placed here are automaticall Place the `.ttf` files in the `src/fonts` folder, then run -```cli +```bash ns fonts ``` diff --git a/content/recommended-plugins.md b/content/recommended-plugins.md index 1309a604..b7e0fdca 100644 --- a/content/recommended-plugins.md +++ b/content/recommended-plugins.md @@ -15,11 +15,11 @@ For web-compatible WebSockets, we recommend installing the [`@valor/nativescript ::: code-group -```cli [NPM] +```bash [NPM] npm i --save @valor/nativescript-websockets ``` -```cli [Yarn] +```bash [Yarn] yarn add @valor/nativescript-websockets ``` @@ -35,11 +35,11 @@ One of the go-to plugins is [`@triniwiz/nativescript-image-cache-it`](https://ww ::: code-group -```cli [NPM] +```bash [NPM] npm i --save @triniwiz/nativescript-image-cache-it ``` -```cli [Yarn] +```bash [Yarn] yarn add @triniwiz/nativescript-image-cache-it ``` @@ -51,11 +51,11 @@ Another great plugin is from the NativeScript-Community ['@nativescript-communit ::: code-group -```cli [NPM] +```bash [NPM] npm i --save @nativescript-community/ui-image ``` -```cli [Yarn] +```bash [Yarn] yarn add @nativescript-community/ui-image ``` @@ -69,11 +69,11 @@ As an alternative to the core [Label](/ui/label), check out [`@nativescript-comm ::: code-group -```cli [NPM] +```bash [NPM] npm i --save @nativescript-community/ui-label ``` -```cli [Yarn] +```bash [Yarn] yarn add @nativescript-community/ui-label ``` @@ -87,11 +87,11 @@ A drop-in replacement for the core HTTP with improvements and additions like con ::: code-group -```cli [NPM] +```bash [NPM] npm i --save @nativescript-community/https ``` -```cli [Yarn] +```bash [Yarn] yarn add @nativescript-community/https ``` @@ -103,11 +103,11 @@ A drop-in replacement for the core HTTP with improvements and additions like con ::: code-group -```cli [NPM] +```bash [NPM] npm i --save @klippa/nativescript-http ``` -```cli [Yarn] +```bash [Yarn] yarn add @klippa/nativescript-http ``` diff --git a/content/setup/linux.md b/content/setup/linux.md index dec88edb..70f96236 100644 --- a/content/setup/linux.md +++ b/content/setup/linux.md @@ -21,7 +21,7 @@ We have gone through these steps on **Ubuntu 20.04** and noted the commands we u -```cli +```bash # On Ubuntu 20.04, we used the following command to install latest node $ curl -fsSL https://deb.nodesource.com/setup_15.x | sudo -E bash - $ sudo apt-get install -y nodejs @@ -29,7 +29,7 @@ $ sudo apt-get install -y nodejs To confirm **Node** is installed correctly, run: -```cli +```bash $ node -v $ npm -v # Should print something like @@ -45,14 +45,14 @@ A **JDK version 8 or greater** is required, and you have a couple options: -```cli +```bash # On Ubuntu 20.04, we used the following command to install OpenJDK 17 sudo apt-get install -y openjdk-17-jdk ``` To confirm **JDK** is installed correctly, run: -```cli +```bash $ java --version $ javac --version # Should print something like @@ -90,7 +90,7 @@ export PATH=$PATH:$ANDROID_HOME/platform-tools Install the NativeScript CLI globally: -```cli +```bash npm install -g nativescript ``` @@ -104,7 +104,7 @@ Depending on how you installed **Node**, you may get an `EACCESS: permission den To verify that the installation was successful, open a new Command Prompt window (to ensure the new environment variables are loaded) and run -```cli +```bash ns doctor android ``` diff --git a/content/setup/macos.md b/content/setup/macos.md index 22df707f..b23b1bda 100644 --- a/content/setup/macos.md +++ b/content/setup/macos.md @@ -30,11 +30,11 @@ To install **Node** we recommend using a node version manager, such as [nvm](htt 1. Follow the [install instructions in the nvm repository](https://github.com/nvm-sh/nvm#installing-and-updating). 2. Once the installation is complete, open a new Terminal and verify you can run `nvm ls`. 3. Install the latest Node release with: - ```cli + ```bash nvm install node ``` 4. Verify the installation was successful and run - ```cli + ```bash node -v npm -v ``` @@ -43,7 +43,7 @@ To install **Node** we recommend using a node version manager, such as [nvm](htt To install a **JDK** (using the prebuilt OpenJDK binaries from [Adoptium](https://adoptium.net/)) run the following command: -```cli +```bash brew install --cask temurin@17 ``` @@ -53,7 +53,7 @@ Using JDK 17 is highly recommended as the nativescript-bundled version of gradle Once installed, open a new Terminal and verify that the default version is the one we installed: -```cli +```bash javac --version # should print something like: # javac 17.x.x @@ -97,7 +97,7 @@ export PATH=$PATH:$ANDROID_HOME/platform-tools Install the **NativeScript CLI** globally: -```cli +```bash npm install -g nativescript ``` @@ -107,7 +107,7 @@ npm install -g nativescript To verify that the installation was successful, open a new Command Prompt window (to ensure the new environment variables are loaded) and run: -```cli +```bash ns doctor android ``` @@ -136,11 +136,11 @@ To install **Node** we recommend using a node version manager, such as [nvm](htt 1. Follow the [install instructions in the nvm repository](https://github.com/nvm-sh/nvm#installing-and-updating). 2. Once the installation is complete, open a new Terminal and verify you can run `nvm ls`. 3. Install the latest Node release with: - ```cli + ```bash nvm install node ``` 4. Verify the installation was successful and run - ```cli + ```bash node -v npm -v ``` @@ -164,7 +164,7 @@ In newer versions of XCode, 'Preferences' may be 'Settings' Install **ruby 3.3+** and link it so it's available in your shell environment: -```cli +```bash brew install ruby@3.3 brew link ruby@3.3 ``` @@ -198,7 +198,7 @@ In a new terminal window, install the **pip** and install **six** by running the following: -```cli +```bash python3 -m pip install --upgrade pip python3 -m pip install six ``` @@ -233,7 +233,7 @@ macOS ships with Python pre-installed, however starting with **macos 12.3** ther Install python3 from Homebrew, then alias it as `python`: -```cli +```bash brew install python # create /usr/local/bin directory if it doesn’t exist @@ -250,7 +250,7 @@ python --version Next, update **pip** and install **six** by running the following: -```cli +```bash python -m pip install --upgrade pip python -m pip install six ``` @@ -260,7 +260,7 @@ python -m pip install six Install the **NativeScript CLI** globally: -```cli +```bash npm install -g nativescript ``` @@ -270,7 +270,7 @@ npm install -g nativescript To verify that the installation was successful, open a new Terminal window (to ensure the new environment variables are loaded) and run: -```cli +```bash ns doctor ios ``` diff --git a/content/setup/windows.md b/content/setup/windows.md index 3bc0b6f0..e75c7093 100644 --- a/content/setup/windows.md +++ b/content/setup/windows.md @@ -24,11 +24,11 @@ To install **Node** we recommend using a node version manager, such as [nvm-wind 2. Run and follow the `nvm-setup.exe` instructions. 3. Once the installation is complete, open a new Command Prompt and verify you can run `nvm ls`. 4. Install the latest Node release with: - ```cli + ```bash nvm install node ``` 5. Verify the installation was successful and run - ```cli + ```bash node -v npm -v ``` @@ -45,13 +45,13 @@ If any of the above failed, we recommend checking out the [Microsoft Docs for Se To install a **JDK** (using the prebuilt OpenJDK binaries from [Adoptium](https://adoptium.net/)) open an Administrator Command Prompt (right click and select "Run as Administrator") and run the following command: -```cli +```bash choco install -y temurin17 ``` Once installed, you might need to add it to your `Path`. First, check if you need to add it to your `Path` by opening a new Command Prompt and running the following: -```cli +```bash javac --version ``` @@ -125,7 +125,7 @@ Next, add Android **platform-tools** to path: Install the NativeScript CLI globally: -```cli +```bash npm install -g nativescript ``` @@ -135,7 +135,7 @@ npm install -g nativescript To verify that the installation was successful, open a new Command Prompt window (to ensure the new environment variables are loaded) and run: -```cli +```bash ns doctor android ``` diff --git a/content/sidebar.ts b/content/sidebar.ts index 1e1b62db..40681002 100644 --- a/content/sidebar.ts +++ b/content/sidebar.ts @@ -47,6 +47,10 @@ export default [ text: 'Debugging', link: '/guide/debugging', }, + { + text: 'Publishing', + link: '/guide/publishing', + }, { text: 'Plugins', link: '/guide/development-workflow/using-packages', @@ -59,11 +63,6 @@ export default [ text: 'Testing', link: '/guide/testing', }, - // TODO: finish app store and fastlane - // { - // text: 'Publishing', - // link: '/guide/publishing/', - // }, { text: 'Updating', link: '/guide/updating/', @@ -299,6 +298,10 @@ export default [ { text: 'Platform Version Handling', link: '/guide/platform-version-handling', + }, + { + text: 'Widgets for iOS', + link: '/guide/widgets-ios', } ], }, diff --git a/content/snacks/index.md b/content/snacks/index.md index 1090b281..7a87153a 100644 --- a/content/snacks/index.md +++ b/content/snacks/index.md @@ -438,6 +438,30 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t videoTitle: "Screen Snapshot", }, + { + id: 24, + title: "Solid NativeScript Vibes", + href: "https://stackblitz.com/edit/nativescript-solid-vibes?file=src%2Fcomponents%2Fhome.tsx", + description: + "Example of using audio player with metering.", + categories: [ + { + title: "iOS AVAudioPlayer", + href: "https://developer.apple.com/documentation/avfaudio/avaudioplayer/averagepower(forchannel:)?language=objc", + }, + { + title: "Android Visualizer", + href: "https://developer.android.com/reference/android/media/audiofx/Visualizer", + }, + { + title: "Solid", + href: "https://www.solidjs.com/", + }, + ], + videoUrl: "https://youtube.com/embed/FLxZ_T5yN_A", + videoTitle: + "Solid NativeScript Vibes", + }, ]; diff --git a/content/troubleshooting.md b/content/troubleshooting.md index dc329d5e..7da0d794 100644 --- a/content/troubleshooting.md +++ b/content/troubleshooting.md @@ -19,7 +19,7 @@ XCode caches build data inside a folder called `DerivedData` - occasionally it c adb can sometimes get stuck in an unresponsive state. In these cases, you can force restart the adb server by running: -```cli +```bash adb kill-server ``` @@ -27,7 +27,7 @@ adb kill-server ### Cocoapods Environment setup: CocoaPods is not installed or is not configured properly -```cli +```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). @@ -37,7 +37,7 @@ Cocoapods can be installed in system directories or via [homebrew](https://brew. You can try running the following safely: -```cli +```bash pod cache clean -all pod deintegrate rm -rf "${HOME}/Library/Caches/CocoaPods" @@ -47,7 +47,7 @@ brew install cocoapods You can then confirm your Cocoapods installed properly and have the version you expect by running: -```cli +```bash pod --version ``` @@ -55,7 +55,7 @@ You could then try running `ns doctor` again. ### XCode 14: xcodebuild failed with exit code 65 -```cli +```bash error: Signing for "XXX-YYY" requires a development team. Select a development team in the Signing & Capabilities editor. (in target 'XXX-YYY' from project 'Pods') @@ -103,7 +103,7 @@ CocoaPods could not find compatible versions for pod "SDWebImage": CocoaPods are like npm packages but for iOS libraries (it’s their own npm registry if you will). Your local Cocoapods cache (usually located in `~/.cocoapods`) keeps a Spec list reference that can become outdated and needs to be manually updated with the following command: -```cli +```bash pod repo update ``` diff --git a/content/tutorials/build-a-master-detail-app-with-angular.md b/content/tutorials/build-a-master-detail-app-with-angular.md index 80464df2..b8330b0f 100644 --- a/content/tutorials/build-a-master-detail-app-with-angular.md +++ b/content/tutorials/build-a-master-detail-app-with-angular.md @@ -46,7 +46,7 @@ To set up your development environment, follow the instructions in the [Environm To create a new NativeScript Angular application, run the CLI command `ns create` with the name of the application followed by `--ng`. -```cli +```bash ns create example-app --ng ``` @@ -56,7 +56,7 @@ The NativeScript CLI creates a new directory with the root folder named `example Go to the project's directory and run the following command to run it on the respective platforms. -```cli +```bash cd example-app // run on iOS diff --git a/content/tutorials/build-a-master-detail-app-with-plain-javascript.md b/content/tutorials/build-a-master-detail-app-with-plain-javascript.md index 02556dd0..65300204 100644 --- a/content/tutorials/build-a-master-detail-app-with-plain-javascript.md +++ b/content/tutorials/build-a-master-detail-app-with-plain-javascript.md @@ -41,7 +41,7 @@ To set up your development environment, follow the instructions in the [Environm We will be using JavaScript for this tutorial. To create new NativeScript JavaScript application, run the CLI command `ns create` with the name of the application followed by `--js`. -```cli +```bash ns create example-app --js ``` @@ -51,7 +51,7 @@ The NativeScript CLI creates a new directory with the root folder named `example Go to the project's directory and run the following command to run it on the respective platforms. -```cli +```bash cd example-app // run on iOS diff --git a/content/tutorials/build-a-master-detail-app-with-plain-typescript.md b/content/tutorials/build-a-master-detail-app-with-plain-typescript.md index ec118723..d0e0c9dd 100644 --- a/content/tutorials/build-a-master-detail-app-with-plain-typescript.md +++ b/content/tutorials/build-a-master-detail-app-with-plain-typescript.md @@ -42,7 +42,7 @@ To set up your development environment, follow the instructions in the [Environm We will be using TypeScript for this tutorial. To create a new NativeScript TypeScript application, run the CLI command `ns create` with the name of the application followed by `--ts`. -```cli +```bash ns create example-app --ts ``` @@ -52,7 +52,7 @@ The NativeScript CLI creates a new directory with the root folder named `example Go to the project's directory and run the following command to run it on the respective platforms. -```cli +```bash cd example-app // run on iOS diff --git a/content/tutorials/build-a-master-detail-app-with-react.md b/content/tutorials/build-a-master-detail-app-with-react.md index 0fb758dd..2c2ee465 100644 --- a/content/tutorials/build-a-master-detail-app-with-react.md +++ b/content/tutorials/build-a-master-detail-app-with-react.md @@ -42,7 +42,7 @@ To set up your development environment, follow the instructions in the [Environm We will be using TypeScript for this tutorial. To create a new NativeScript TypeScript application, run the CLI command `ns create` with the name of the application followed by `--react`. -```cli +```bash ns create example-app --react ``` @@ -52,7 +52,7 @@ The NativeScript CLI creates a new directory with the root folder named `example Go to the project's directory and run the following command to run it on the respective platforms. -```cli +```bash cd example-app // run on iOS diff --git a/content/tutorials/build-a-master-detail-app-with-svelte.md b/content/tutorials/build-a-master-detail-app-with-svelte.md index adbfdf1e..f6b596ee 100644 --- a/content/tutorials/build-a-master-detail-app-with-svelte.md +++ b/content/tutorials/build-a-master-detail-app-with-svelte.md @@ -44,7 +44,7 @@ To set up your development environment, follow the instructions in the [Environm We will be using TypeScript for this tutorial. To create a new NativeScript TypeScript application, run the CLI command `ns create` with the name of the application followed by `--svelte`. -```cli +```bash ns create example-app --svelte ``` @@ -54,7 +54,7 @@ The NativeScript CLI creates a new directory with the root folder named `example Go to the project's directory and run the following command to run it on the respective platforms. -```cli +```bash cd example-app // run on iOS diff --git a/content/tutorials/build-a-master-detail-app-with-vue.md b/content/tutorials/build-a-master-detail-app-with-vue.md index edfe5147..33cfd4e9 100644 --- a/content/tutorials/build-a-master-detail-app-with-vue.md +++ b/content/tutorials/build-a-master-detail-app-with-vue.md @@ -45,7 +45,7 @@ To set up your development environment, follow the instructions in the [Environm To create a new NativeScript Vue application, run the CLI command `ns create` with the name of the application followed by `--vue` and `--ts`. -```cli +```bash ns create example-app --vue --ts ``` @@ -55,7 +55,7 @@ The NativeScript CLI creates a new directory with the root folder named `example Go to the project's directory and run the following command to run it on the respective platforms. -```cli +```bash cd example-app // run on iOS diff --git a/content/ui/action-bar.md b/content/ui/action-bar.md index c6c27b38..0f7cee80 100644 --- a/content/ui/action-bar.md +++ b/content/ui/action-bar.md @@ -20,7 +20,41 @@ Views also part of the ActionBar abstraction: -<<< @/../examples/src/ui/ActionBar/page.xml#example + + + +<<< @/../examples/typescript/src/ui/ActionBar/page.xml#example + + + + +::: code-group +<<< @/../examples/angular/src/ui/ActionBar/component.html#example [HTML] +<<< @/../examples/angular/src/ui/ActionBar/component.ts#example [TypeScript] +::: + + + + +<<< @/../examples/react/src/components/ui/actionbar.tsx#example + + + + +<<< @/../examples/solid/src/ui/actionbar.tsx#example + + + + +<<< @/../examples/svelte/app/components/ui/ActionBar.svelte#example + + + + +<<< @/../examples/vue/src/ui/Actionbar/component.vue#example + + + ## Examples @@ -83,6 +117,14 @@ By default, a border is drawn at the bottom of the ActionBar. In addition to the ``` +:::tip 8.9+ +You can alternatively use `iosShadow="false"` in the event you want to keep the translucency but remove the border. +::: + +```xml + +``` + ## Props ### title @@ -93,6 +135,14 @@ title: string Gets or sets the ActionBar title. +::: tip 8.9+ +On iOS, you can also enable prefersLargeTitles by setting `iosLargeTitle="true"` +::: + +```xml + +``` + ### titleView ```ts diff --git a/content/ui/activity-indicator.md b/content/ui/activity-indicator.md index 0b0cbfaa..e9e6ad26 100644 --- a/content/ui/activity-indicator.md +++ b/content/ui/activity-indicator.md @@ -15,15 +15,42 @@ contributors: -<<< @/../examples/src/ui/ActivityIndicator/template.xml#example - ## Examples ### Always busy ActivityIndicator -```xml - -``` + + + +<<< @/../examples/vue/src/ui/ActivityIndicator/component.vue#example + + + + +<<< @/../examples/typescript/src/ui/ActivityIndicator/template.xml#example + + + + +<<< @/../examples/angular/src/ui/ActivityIndicator/component.html#example + + + + +<<< @/../examples/svelte/app/components/ui/ActivityIndicator.svelte#example + + + + +<<< @/../examples/react/src/components/ui/activityindicator.tsx#example + + + + +<<< @/../examples/solid/src/ui/activityindicator.tsx#example + + + ## Props @@ -35,7 +62,7 @@ busy: boolean Gets or sets whether the indicator is busy. -### iosIndicatorViewStyle +### iosIndicatorViewStyle 8.9+ ```ts iosIndicatorViewStyle: IOSIndicatorViewStyle = 'medium' | 'large' diff --git a/content/ui/button.md b/content/ui/button.md index e93c1c49..23bf433c 100644 --- a/content/ui/button.md +++ b/content/ui/button.md @@ -17,7 +17,38 @@ For more information about the available gestures, see [Gestures](/guide/gesture -<<< @/../examples/src/ui/Button/template.xml#example + + + +<<< @/../examples/typescript/src/ui/Button/template.xml#example + + + + +<<< @/../examples/angular/src/ui/Button/component.html#example + + + + +<<< @/../examples/react/src/components/ui/button.tsx#example + + + + +<<< @/../examples/solid/src/ui/button.tsx#example + + + + +<<< @/../examples/svelte/app/components/ui/Button.svelte#example + + + + +<<< @/../examples/vue/src/ui/Button/component.vue#example + + + ## Examples diff --git a/content/ui/date-picker.md b/content/ui/date-picker.md index 9f4c358f..052e2c57 100644 --- a/content/ui/date-picker.md +++ b/content/ui/date-picker.md @@ -17,18 +17,38 @@ See also: [TimePicker](/ui/time-picker). -<<< @/../examples/src/ui/DatePicker/template.xml#example - -```xml - -``` + + + +<<< @/../examples/typescript/src/ui/DatePicker/template.xml#example + + + + +<<< @/../examples/angular/src/ui/DatePicker/component.html#example + + + + +<<< @/../examples/react/src/components/ui/datepicker.tsx#example + + + + +<<< @/../examples/solid/src/ui/datepicker.tsx#example + + + + +<<< @/../examples/svelte/app/components/ui/DatePicker.svelte#example + + + + +<<< @/../examples/vue/src/ui/DatePicker/component.vue#example + + + ## Props diff --git a/content/ui/dialogs.md b/content/ui/dialogs.md index f61ce9ec..c856d684 100644 --- a/content/ui/dialogs.md +++ b/content/ui/dialogs.md @@ -45,7 +45,41 @@ See [DialogOptions](/api/interface/DialogOptions), [R.style](https://developer.a -<<< @/../examples/src/ui/Dialogs/template.ts#example-alert + + + +<<< @/../examples/typescript/src/ui/Dialogs/template.ts#example-alert + + + + +::: code-group +<<< @/../examples/angular/src/ui/Dialogs/component.html#example-alert [HTML] +<<< @/../examples/angular/src/ui/Dialogs/component.ts#example-alert [TypeScript] +::: + + + + +<<< @/../examples/react/src/components/ui/dialogs.tsx#example-alert + + + + +<<< @/../examples/solid/src/ui/dialogs.tsx#example-alert + + + + +<<< @/../examples/svelte/app/components/ui/Dialogs.svelte#example-alert + + + + +<<< @/../examples/vue/src/ui/Dialogs/component.vue#example-alert + + + A dialog for alerting the user. @@ -60,7 +94,41 @@ See [alert()](/api/#alert). -<<< @/../examples/src/ui/Dialogs/template.ts#example-action + + + +<<< @/../examples/typescript/src/ui/Dialogs/template.ts#example-action + + + + +::: code-group +<<< @/../examples/angular/src/ui/Dialogs/component.html#example-action [HTML] +<<< @/../examples/angular/src/ui/Dialogs/component.ts#example-action [TypeScript] +::: + + + + +<<< @/../examples/react/src/components/ui/dialogs.tsx#example-action + + + + +<<< @/../examples/solid/src/ui/dialogs.tsx#example-action + + + + +<<< @/../examples/svelte/app/components/ui/Dialogs.svelte#example-action + + + + +<<< @/../examples/vue/src/ui/Dialogs/component.vue#example-action + + + A dialog for prompting the user to choose. @@ -77,7 +145,41 @@ See [action()](/api/#action). -<<< @/../examples/src/ui/Dialogs/template.ts#example-confirm + + + +<<< @/../examples/typescript/src/ui/Dialogs/template.ts#example-confirm + + + + +::: code-group +<<< @/../examples/angular/src/ui/Dialogs/component.html#example-confirm [HTML] +<<< @/../examples/angular/src/ui/Dialogs/component.ts#example-confirm [TypeScript] +::: + + + + +<<< @/../examples/react/src/components/ui/dialogs.tsx#example-confirm + + + + +<<< @/../examples/solid/src/ui/dialogs.tsx#example-confirm + + + + +<<< @/../examples/svelte/app/components/ui/Dialogs.svelte#example-confirm + + + + +<<< @/../examples/vue/src/ui/Dialogs/component.vue#example-confirm + + + A dialog for prompting the user to confirm. @@ -92,7 +194,41 @@ See [confirm()](/api/#confirm). -<<< @/../examples/src/ui/Dialogs/template.ts#example-prompt + + + +<<< @/../examples/typescript/src/ui/Dialogs/template.ts#example-prompt + + + + +::: code-group +<<< @/../examples/angular/src/ui/Dialogs/component.html#example-prompt [HTML] +<<< @/../examples/angular/src/ui/Dialogs/component.ts#example-prompt [TypeScript] +::: + + + + +<<< @/../examples/react/src/components/ui/dialogs.tsx#example-prompt + + + + +<<< @/../examples/solid/src/ui/dialogs.tsx#example-prompt + + + + +<<< @/../examples/svelte/app/components/ui/Dialogs.svelte#example-prompt + + + + +<<< @/../examples/vue/src/ui/Dialogs/component.vue#example-prompt + + + A dialog for prompting the user for input. @@ -111,7 +247,41 @@ See [prompt()](/api/#prompt), [CoreTypes.AutocapitalizationType](/api/namespace/ -<<< @/../examples/src/ui/Dialogs/template.ts#example-login + + + +<<< @/../examples/typescript/src/ui/Dialogs/template.ts#example-login + + + + +::: code-group +<<< @/../examples/angular/src/ui/Dialogs/component.html#example-login [HTML] +<<< @/../examples/angular/src/ui/Dialogs/component.ts#example-login [TypeScript] +::: + + + + +<<< @/../examples/react/src/components/ui/dialogs.tsx#example-login + + + + +<<< @/../examples/solid/src/ui/dialogs.tsx#example-login + + + + +<<< @/../examples/svelte/app/components/ui/Dialogs.svelte#example-login + + + + +<<< @/../examples/vue/src/ui/Dialogs/component.vue#example-login + + + A dialog for prompting the user for credentials. diff --git a/content/ui/html-view.md b/content/ui/html-view.md index 728e5d01..77cbcc7e 100644 --- a/content/ui/html-view.md +++ b/content/ui/html-view.md @@ -22,8 +22,45 @@ See also: [WebView](/ui/web-view). -<<< @/../examples/src/ui/HtmlView/template.xml#example -<<< @/../examples/src/ui/HtmlView/template.ts#example{xml} + + + +::: code-group +<<< @/../examples/typescript/src/ui/HtmlView/template.xml#example [XML] +<<< @/../examples/typescript/src/ui/HtmlView/template.ts#example [TypeScript] +::: + + + + + +::: code-group +<<< @/../examples/angular/src/ui/HtmlView/component.html#example [HTML] +<<< @/../examples/angular/src/ui/HtmlView/component.ts#example [TypeScript] +::: + + + + +<<< @/../examples/react/src/components/ui/htmlview.tsx#example + + + + +<<< @/../examples/solid/src/ui/htmlview.tsx#example + + + + +<<< @/../examples/svelte/app/components/ui/HtmlView.svelte#example + + + + +<<< @/../examples/vue/src/ui/HtmlView/component.vue#example + + + ## Props diff --git a/content/ui/image.md b/content/ui/image.md index 61957b2a..0770d1ba 100644 --- a/content/ui/image.md +++ b/content/ui/image.md @@ -16,7 +16,7 @@ When working with images, consider following [the best practices](/performance.h Working with many images can quickly become a memory hog, for improved image handling it's recommended to use an Image caching library. Here are a few plugins from our community: -- [@triniwiz/image-cache-it](https://triniwiz.github.io/nativescript-plugins/api-reference/image-cache-it.html) +- [@triniwiz/nativescript-image-cache-it](https://triniwiz.github.io/nativescript-plugins/api-reference/image-cache-it.html) - [@nativescript-community/ui-image](https://github.com/nativescript-community/ui-image) ::: @@ -28,7 +28,38 @@ Working with many images can quickly become a memory hog, for improved image han -<<< @/../examples/src/ui/Image/template.xml#example + + + +<<< @/../examples/typescript/src/ui/Image/template.xml#example + + + + +<<< @/../examples/angular/src/ui/Image/component.html#example + + + + +<<< @/../examples/react/src/components/ui/image.tsx#example + + + + +<<< @/../examples/solid/src/ui/image.tsx#example + + + + +<<< @/../examples/svelte/app/components/ui/Image.svelte#example + + + + +<<< @/../examples/vue/src/ui/Image/component.vue#example + + + ## Examples diff --git a/content/ui/label.md b/content/ui/label.md index 423d3d03..03dc64f8 100644 --- a/content/ui/label.md +++ b/content/ui/label.md @@ -21,7 +21,39 @@ The NativeScript `