chore: format

NathanWalker · NathanWalker · commit 9161502843c8 · 2025-04-05T14:55:13.000-07:00
diff --git a/content/guide/create-custom-native-elements.md b/content/guide/create-custom-native-elements.md
@@ -5,7 +5,7 @@ contributors:
   - NathanWalker
 ---
 
-When working on view markup with NativeScript, a collection of elements you interact with are registered for you like [GridLayout](https://docs.nativescript.org/ui/grid-layout), [Button](https://docs.nativescript.org/ui/button), [Label](https://docs.nativescript.org/ui/label), etc. These are just commonly used elements. 
+When working on view markup with NativeScript, a collection of elements you interact with are registered for you like [GridLayout](https://docs.nativescript.org/ui/grid-layout), [Button](https://docs.nativescript.org/ui/button), [Label](https://docs.nativescript.org/ui/label), etc. These are just commonly used elements.
 
 At anytime, you can create your own, extend others and fully customize views for your needs.
 
@@ -81,7 +81,7 @@ You can now use it like anything else:
 The registration can be done in the bootsrap file, commonly `app.ts`. With React, we use camelCase on elements where applicable.
 
 ```ts
-import { registerElement } from 'react-nativescript';
+import { registerElement } from 'react-nativescript'
 import { Checkbox } from './checkbox'
 
 registerElement('checkbox', () => Checkbox)
@@ -101,10 +101,10 @@ You can now use it like anything else:
 The registration can be done in the bootsrap file, commonly `app.tsx`.
 
 ```ts
-import { registerElement } from 'dominative';
+import { registerElement } from 'dominative'
 import { Checkbox } from './checkbox'
 
-registerElement('checkbox', Checkbox);
+registerElement('checkbox', Checkbox)
 ```
 
 You can now use it like anything else:
@@ -121,10 +121,10 @@ You can now use it like anything else:
 The registration can be done in the bootsrap file, commonly `app.ts`.
 
 ```ts
-import { registerElement } from 'nativescript-vue';
+import { registerElement } from 'nativescript-vue'
 import { Checkbox } from './checkbox'
 
-registerElement('Checkbox', () => Checkbox);
+registerElement('Checkbox', () => Checkbox)
 ```
 
 You can now use it like anything else:
@@ -148,29 +148,24 @@ There's only 2 **fundamental** required aspects to any custom NativeScript view
 
 1. Extend any NativeScript View.
 2. (**required**) `createNativeView`: Construct and return any platform native view.
-3. (*optional*) `initNativeView`: Initialize anything.
-4. (*optional*) `disposeNativeView`: Cleanup anything.
+3. (_optional_) `initNativeView`: Initialize anything.
+4. (_optional_) `disposeNativeView`: Cleanup anything.
 
 Let's look at those within the context of an example:
 
 ```ts
 // 1. (required) Extend any NativeScript View
-export class CustomView extends View { 
-
+export class CustomView extends View {
   // 2. (required) Construct and return any platform native view
   createNativeView() {
-      // return instance of UIView or android.view.View;
+    // return instance of UIView or android.view.View;
   }
 
   // 3. (optional) initialize anything
-  initNativeView() {
-
-  }
+  initNativeView() {}
 
   // 4. (optional) cleanup anything
-  disposeNativeView() { 
-
-  }
+  disposeNativeView() {}
 }
 ```
 
@@ -182,7 +177,7 @@ Let's explain each point respectively.
 import { ContentView, Label, Button } from '@nativescript/core'
 
 export class CustomView1 extends ContentView {
- // impl
+  // impl
 }
 
 export class CustomView2 extends Label {
@@ -248,4 +243,4 @@ import { Checkbox } from './checkbox'
 
 ## Customize Existing Elements?
 
-Rather than create a new element from scratch, you may want to customize existing view elements. Learn about how to [extend any element for custom beavhior here](/guide/customizing-view-elements).
+Rather than create a new element from scratch, you may want to customize existing view elements. Learn about how to [extend any element for custom beavhior here](/guide/customizing-view-elements).
diff --git a/content/guide/customizing-view-elements.md b/content/guide/customizing-view-elements.md
@@ -34,97 +34,97 @@ For instance, even this [Stack Overflow answer](https://stackoverflow.com/a/4874
 In our `index.ios.ts` we can extend the existing ListPicker to add our own [iOS delegate](https://developer.apple.com/documentation/uikit/uipickerviewdelegate?language=objc) which implements the method suggested to support making the font size bigger. We can even start with an exact replica of the [ListPicker](https://github.com/NativeScript/NativeScript/blob/main/packages/core/ui/list-picker/index.ios.ts) in core and distill it down to just what we need.
 
 ```ts
-import { ListPicker } from "@nativescript/core";
-import { selectedIndexProperty } from "@nativescript/core/ui/list-picker/list-picker-common";
+import { ListPicker } from '@nativescript/core'
+import { selectedIndexProperty } from '@nativescript/core/ui/list-picker/list-picker-common'
 
 export class CustomListPicker extends ListPicker {
-  private _delegate: ListPickerDelegateImpl;
-  private _dataSource: ListPickerDataSource;
+  private _delegate: ListPickerDelegateImpl
+  private _dataSource: ListPickerDataSource
 
   initNativeView() {
-    this._delegate = ListPickerDelegateImpl.initWithOwner(new WeakRef(this));
-    this.nativeViewProtected.delegate = this._delegate;
+    this._delegate = ListPickerDelegateImpl.initWithOwner(new WeakRef(this))
+    this.nativeViewProtected.delegate = this._delegate
     this.nativeViewProtected.dataSource = this._dataSource =
-      ListPickerDataSource.initWithOwner(new WeakRef(this));
+      ListPickerDataSource.initWithOwner(new WeakRef(this))
   }
 }
 
 @NativeClass
 class ListPickerDelegateImpl extends NSObject implements UIPickerViewDelegate {
-  static ObjCProtocols = [UIPickerViewDelegate];
-  private _owner: WeakRef<any>;
+  static ObjCProtocols = [UIPickerViewDelegate]
+  private _owner: WeakRef<any>
 
   static initWithOwner(owner: WeakRef<ListPicker>): ListPickerDelegateImpl {
-    const delegate = <ListPickerDelegateImpl>ListPickerDelegateImpl.new();
-    delegate._owner = owner;
+    const delegate = <ListPickerDelegateImpl>ListPickerDelegateImpl.new()
+    delegate._owner = owner
 
-    return delegate;
+    return delegate
   }
 
   pickerViewViewForRowForComponentReusingView(
     pickerView: UIPickerView,
     row: number,
     component: number,
-    view: UIView
+    view: UIView,
   ): UIView {
-    const owner = this._owner?.deref();
+    const owner = this._owner?.deref()
     if (owner) {
-      var label = UILabel.new();
+      var label = UILabel.new()
 
       // Change font size here!
-      label.font = UIFont.systemFontOfSize(26);
-      label.text = owner.items[row];
-      label.textAlignment = NSTextAlignment.Center;
-      return label;
+      label.font = UIFont.systemFontOfSize(26)
+      label.text = owner.items[row]
+      label.textAlignment = NSTextAlignment.Center
+      return label
     }
-    return UILabel.new();
+    return UILabel.new()
   }
 
   pickerViewDidSelectRowInComponent(
     pickerView: UIPickerView,
     row: number,
-    component: number
+    component: number,
   ): void {
-    const owner = this._owner?.deref();
+    const owner = this._owner?.deref()
     if (owner) {
-      selectedIndexProperty.nativeValueChange(owner, row);
-      owner.updateSelectedValue(row);
+      selectedIndexProperty.nativeValueChange(owner, row)
+      owner.updateSelectedValue(row)
     }
   }
 }
 
 @NativeClass
 class ListPickerDataSource extends NSObject implements UIPickerViewDataSource {
-  static ObjCProtocols = [UIPickerViewDataSource];
+  static ObjCProtocols = [UIPickerViewDataSource]
 
-  private _owner: WeakRef<ListPicker>;
+  private _owner: WeakRef<ListPicker>
 
   static initWithOwner(owner: WeakRef<ListPicker>): ListPickerDataSource {
-    const dataSource = <ListPickerDataSource>ListPickerDataSource.new();
-    dataSource._owner = owner;
+    const dataSource = <ListPickerDataSource>ListPickerDataSource.new()
+    dataSource._owner = owner
 
-    return dataSource;
+    return dataSource
   }
 
   numberOfComponentsInPickerView(pickerView: UIPickerView) {
-    return 1;
+    return 1
   }
 
   pickerViewNumberOfRowsInComponent(
     pickerView: UIPickerView,
-    component: number
+    component: number,
   ) {
-    const owner = this._owner?.deref();
+    const owner = this._owner?.deref()
 
-    return owner && owner.items ? owner.items.length : 0;
+    return owner && owner.items ? owner.items.length : 0
   }
 }
 ```
 
-This custom element now implements the `UIPickerViewDelegate`'s [pickerViewViewForRowForComponentReusingView](https://developer.apple.com/documentation/uikit/uipickerviewdelegate/pickerview(_:viewforrow:forcomponent:reusing:)?language=objc) allowing us to customize the font size with this line:
+This custom element now implements the `UIPickerViewDelegate`'s [pickerViewViewForRowForComponentReusingView](<https://developer.apple.com/documentation/uikit/uipickerviewdelegate/pickerview(_:viewforrow:forcomponent:reusing:)?language=objc>) allowing us to customize the font size with this line:
 
 ```ts
-label.font = UIFont.systemFontOfSize(26);
+label.font = UIFont.systemFontOfSize(26)
 ```
 
 #### Customize Highlight Color
@@ -138,21 +138,21 @@ export class CustomListPicker extends ListPicker {
   // ...
 
   onLoaded() {
-    super.onLoaded();
+    super.onLoaded()
     // Optional: customize selection highlight bar
     for (let i = 0; i < this.nativeViewProtected.subviews.count; i++) {
       const subview = this.nativeViewProtected.subviews.objectAtIndex(
-        i
-      ) as UIView;
+        i,
+      ) as UIView
       if (subview.frame.size.height <= 34) {
         // Use any desired color
         // Tip: https://www.uicolor.io
         subview.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(
           0,
-          .66,
+          0.66,
           1,
-          0.4
-        );
+          0.4,
+        )
       }
     }
   }
@@ -169,6 +169,3 @@ You can try this example yourself on StackBlitz here:
 https://stackblitz.com/edit/nativescript-customize-listpicker?file=src%2Fapp%2Fitem%2Flist-picker-custom%2Findex.ios.ts
 
 Try changing the font size or highlight color live on StackBlitz to see the changes to behavior yourself.
-
-
-
