customizing-view-elements.md

title	description	contributors
Customizing View Elements	If a @nativescript/core element offers behavior that generally works but your app needs something extra from them, you can extend them.	NathanWalker

You can extend existing NativeScript UI elements to customize their behavior or appearance.

This guide demonstrates how to customize the font size and highlight color of the ListPicker element.

Customizing an Existing View Element

To customize an existing element such as ListPicker, follow a similar process as described in the Creating Custom Native Elements guide.

Directory Structure

Begin by creating a new folder structure for your customized ListPicker:

./list-picker-custom
  ├── common.ts
  ├── index.android.ts
  ├── index.d.ts
  └── index.ios.ts

Adjusting Font Size on iOS

To modify the font size for a ListPicker on iOS, first refer to Apple's UIPickerView documentation. Since NativeScript's ListPicker directly utilizes UIPickerView, any native iOS modifications apply.

For instance, this Stack Overflow solution describes how to change the font size.

Extending ListPicker for Custom Font Size

Create the following implementation in index.ios.ts, extending the default ListPicker:

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

  initNativeView() {
    this._delegate = ListPickerDelegateImpl.initWithOwner(new WeakRef(this))
    this.nativeViewProtected.delegate = this._delegate

    this._dataSource = ListPickerDataSource.initWithOwner(new WeakRef(this))
    this.nativeViewProtected.dataSource = this._dataSource
  }

  onLoaded() {
    super.onLoaded()
    // Customize highlight color
    for (let i = 0; i < this.nativeViewProtected.subviews.count; i++) {
      const subview = this.nativeViewProtected.subviews.objectAtIndex(
        i,
      ) as UIView
      if (subview.frame.size.height <= 34) {
        // Tip: https://www.uicolor.io
        subview.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(
          0,
          0.66,
          1,
          0.4,
        )
      }
    }
  }
}

@NativeClass
class ListPickerDelegateImpl extends NSObject implements UIPickerViewDelegate {
  static ObjCProtocols = [UIPickerViewDelegate]
  private _owner: WeakRef<ListPicker>

  static initWithOwner(owner: WeakRef<ListPicker>): ListPickerDelegateImpl {
    const delegate = <ListPickerDelegateImpl>ListPickerDelegateImpl.new()
    delegate._owner = owner
    return delegate
  }

  pickerViewViewForRowForComponentReusingView(
    pickerView: UIPickerView,
    row: number,
  ): UIView {
    const owner = this._owner?.deref()
    const label = UILabel.new()
    label.font = UIFont.systemFontOfSize(26) // Custom font size
    label.text = owner?.items[row]
    label.textAlignment = NSTextAlignment.Center
    return label
  }

  pickerViewDidSelectRowInComponent(
    pickerView: UIPickerView,
    row: number,
  ): void {
    const owner = this._owner?.deref()
    if (owner) {
      selectedIndexProperty.nativeValueChange(owner, row)
      owner.updateSelectedValue(row)
    }
  }
}

@NativeClass
class ListPickerDataSource extends NSObject implements UIPickerViewDataSource {
  static ObjCProtocols = [UIPickerViewDataSource]
  private _owner: WeakRef<ListPicker>

  static initWithOwner(owner: WeakRef<ListPicker>): ListPickerDataSource {
    const dataSource = <ListPickerDataSource>ListPickerDataSource.new()
    dataSource._owner = owner
    return dataSource
  }

  numberOfComponentsInPickerView(): number {
    return 1
  }

  pickerViewNumberOfRowsInComponent(): number {
    const owner = this._owner?.deref()
    return owner?.items?.length || 0
  }
}

In this code, the font size is customized in the delegate's pickerViewViewForRowForComponentReusingView method:

label.font = UIFont.systemFontOfSize(26)

Customizing Highlight Color

You can also customize the highlight color by modifying the subviews' background colors in the onLoaded() lifecycle hook (shown in the example above). Adjust RGB and alpha values to achieve your desired color.

Registering Your Custom Element

Register your new CustomListPicker element following the steps outlined in Creating Custom Native Elements.

Interactive StackBlitz Example

Experiment live with this custom ListPicker in this StackBlitz demo. Modify the font size or highlight color directly and observe the immediate changes.

<iframe style="width: 100%; min-height: 200px; aspect-ratio: 16 / 9;" src="https://www.youtube.com/embed/IxH4hl-T_4s" title="Customizing View Elements with NativeScript" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>