8.8 released—CSS Media Query support, SF Symbols and much more...
Learn more
This class is the base class for all UI components. A View occupies a rectangular area on the screen and is responsible for drawing and layouting of all UI components within.

Summary

Constructors

constructor

Properties

_androidContentDescriptionUpdated
accessibilityBlurEvent
accessibilityFocusChangedEvent
accessibilityFocusEvent
accessibilityHidden
accessibilityHint
accessibilityIdentifier
accessibilityLabel
accessibilityLanguage
accessibilityLiveRegion
accessibilityMediaSession
accessibilityRole
accessibilityState
accessibilityValue
accessible
android
androidDynamicElevationOffset
androidElevation
automationText
background
backgroundColor
backgroundImage
bindingContext
borderBottomColor
borderBottomLeftRadius
borderBottomRightRadius
borderBottomWidth
borderColor
borderLeftColor
borderLeftWidth
borderRadius
borderRightColor
borderRightWidth
borderTopColor
borderTopLeftRadius
borderTopRightRadius
borderTopWidth
borderWidth
boxShadow
color
cssClasses
cssPseudoClasses
cssType
height
horizontalAlignment
ios
iosAccessibilityAdjustsFontSize
iosAccessibilityMaxFontScale
iosAccessibilityMinFontScale
iosIgnoreSafeArea
iosOverflowSafeArea
iosOverflowSafeAreaEnabled
isEnabled
isLayoutValid
isUserInteractionEnabled
layoutChangedEvent
margin
marginBottom
marginLeft
marginRight
marginTop
minHeight
minWidth
modal
opacity
originX
originY
perspective
rotate
rotateX
rotateY
scaleX
scaleY
showingModallyEvent
shownModallyEvent
translateX
translateY
verticalAlignment
visibility
width

Methods

_closeAllModalViewsInternal
_eachLayoutView
_getNativeViewsCount
_getRootModalViews
_getValue
_handleLivesync
_hasAncestorView
_onAttachedToWindow
_onDetachedFromWindow
_onSizeChanged
_setValue
_updateStyleScope
accessibilityAnnouncement
accessibilityScreenChanged
animate
combineMeasuredStates
createAnimation
eachChildView
focus
getActualSize
getGestureObservers
getLocationInWindow
getLocationOnScreen
getLocationRelativeTo
getMeasuredHeight
getMeasuredState
getMeasuredWidth
getSafeAreaInsets
hasGestureObservers
layout
layoutChild
layoutNativeView
measure
measureChild
off
on
onBackPressed
onLayout
onMeasure
resolveSizeAndState
sendAccessibilityEvent
setMeasuredDimension
setOnTouchListener

Constructors

constructor

new View(): View

Properties

_androidContentDescriptionUpdated

_androidContentDescriptionUpdated?: boolean
Internal use only. This is used to limit the number of updates to android.view.View.setContentDescription()

accessibilityHidden

accessibilityHidden: boolean
Hide the view and its children from the a11y service

accessibilityHint

accessibilityHint: string
A hint describes the elements behavior. Example: 'Tap change playback speed'

accessibilityIdentifier

accessibilityIdentifier: string
The view's unique accessibilityIdentifier. This is used for automated testing.

accessibilityLabel

accessibilityLabel: string
Short description of the element, ideally one word.

accessibilityLanguage

accessibilityLanguage: string
Sets the language in which to speak the element's label and value. Accepts language ID tags that follows the "BCP 47" specification.

accessibilityLiveRegion

accessibilityMediaSession

accessibilityMediaSession: boolean
This view starts a media session. Equivalent to trait = startsMedia

accessibilityRole

accessibilityRole: AccessibilityRole
Which role should this view be treated by the a11y service?

accessibilityState

accessibilityState: AccessibilityState
Which state should this view be treated as by the a11y service?

accessibilityValue

accessibilityValue: string
Current value of the element in a localized string.

accessible

accessible: boolean
If `true` the element is an accessibility element and all the children will be treated as a single selectable component.

android

android: any
Gets the android-specific native instance that lies behind this proxy. Will be available if running on an Android platform.

androidDynamicElevationOffset

androidDynamicElevationOffset: number
Gets or sets the dynamic elevation offset of the android view.

androidElevation

androidElevation: number
Gets or sets the elevation of the android view.

automationText

automationText: string

background

background: string
Gets or sets the background style property.

backgroundColor

backgroundColor: string | Color
Gets or sets the background color of the view.

backgroundImage

backgroundImage: string | LinearGradient
Gets or sets the background image of the view.

bindingContext

bindingContext: any
Gets or sets the binding context of this instance. This object is used as a source for each Binding that does not have a source object specified.

borderBottomColor

borderBottomColor: Color
Gets or sets the bottom border color of the view.

borderBottomLeftRadius

borderBottomLeftRadius: LengthType
Gets or sets the bottom left border radius of the view.

borderBottomRightRadius

borderBottomRightRadius: LengthType
Gets or sets the bottom right border radius of the view.

borderBottomWidth

borderBottomWidth: LengthType
Gets or sets the bottom border width of the view.

borderColor

borderColor: string | Color
Gets or sets the border color of the view.

borderLeftColor

borderLeftColor: Color
Gets or sets the left border color of the view.

borderLeftWidth

borderLeftWidth: LengthType
Gets or sets the left border width of the view.

borderRadius

borderRadius: string | number | LengthDipUnit | LengthPxUnit
Gets or sets the border radius of the view.

borderRightColor

borderRightColor: Color
Gets or sets the right border color of the view.

borderRightWidth

borderRightWidth: LengthType
Gets or sets the right border width of the view.

borderTopColor

borderTopColor: Color
Gets or sets the top border color of the view.

borderTopLeftRadius

borderTopLeftRadius: LengthType
Gets or sets the top left border radius of the view.

borderTopRightRadius

borderTopRightRadius: LengthType
Gets or sets the top right border radius of the view.

borderTopWidth

borderTopWidth: LengthType
Gets or sets the top border width of the view.

borderWidth

borderWidth: string | number | LengthDipUnit | LengthPxUnit
Gets or sets the border width of the view.

boxShadow

boxShadow: string | CSSShadow
Gets or sets the box shadow of the view.

color

color: Color
Gets or sets the color of the view.

cssClasses

cssClasses: Set<string>

cssPseudoClasses

cssPseudoClasses: Set<string>

cssType

cssType: string
Gets the CSS fully qualified type name. Using this as element type should allow for PascalCase and kebap-case selectors, when fully qualified, to match the element.

height

Gets or sets the desired height of the view.

horizontalAlignment

horizontalAlignment: HorizontalAlignmentType
Gets or sets the alignment of this view within its parent along the Horizontal axis.

ios

ios: any
Gets the ios-specific native instance that lies behind this proxy. Will be available if running on an iOS platform.

iosAccessibilityAdjustsFontSize

iosAccessibilityAdjustsFontSize: boolean
Defines whether accessibility font scale should affect font size.

iosAccessibilityMaxFontScale

iosAccessibilityMaxFontScale: number
Gets or sets the maximum accessibility font scale.

iosAccessibilityMinFontScale

iosAccessibilityMinFontScale: number
Gets or sets the minimum accessibility font scale.

iosIgnoreSafeArea

iosIgnoreSafeArea: boolean
Gets or sets a value indicating whether the the view should totally ignore safe areas computation. This property is iOS specific. Default value: false

iosOverflowSafeArea

iosOverflowSafeArea: boolean
Instruct container view to expand beyond the safe area. This property is iOS specific. Default value: false

iosOverflowSafeAreaEnabled

iosOverflowSafeAreaEnabled: boolean
Enables or disables the iosOverflowSafeArea property for all children. This property is iOS specific. Default value: true

isEnabled

isEnabled: boolean
Gets or sets a value indicating whether the the view is enabled. This affects the appearance of the view.

isLayoutValid

isLayoutValid: boolean
Gets is layout is valid. This is a read-only property.

isUserInteractionEnabled

isUserInteractionEnabled: boolean
Gets or sets a value indicating whether the user can interact with the view. This does not affect the appearance of the view.

margin

margin: string | number | LengthDipUnit | LengthPxUnit | LengthPercentUnit
Gets or sets margin style property.

marginBottom

marginBottom: PercentLengthType
Specifies extra space on the bottom side of this view.

marginLeft

marginLeft: PercentLengthType
Specifies extra space on the left side of this view.

marginRight

marginRight: PercentLengthType
Specifies extra space on the right side of this view.

marginTop

Specifies extra space on the top side of this view.

minHeight

minHeight: LengthType
Gets or sets the minimum height the view may grow to.

minWidth

minWidth: LengthType
Gets or sets the minimum width the view may grow to.
modal: View
Returns the current modal view that this page is showing (is parent of), if any.

opacity

opacity: number
Gets or sets the opacity style property.

originX

originX: number
Gets or sets the X component of the origin point around which the view will be transformed. The default value is 0.5 representing the center of the view.

originY

originY: number
Gets or sets the Y component of the origin point around which the view will be transformed. The default value is 0.5 representing the center of the view.

perspective

perspective: number
Gets or sets the distance of the camera form the view perspective. Usually needed when rotating the view over the X or Y axis.

rotate

rotate: number
Gets or sets the rotate affine transform of the view along the Z axis.

rotateX

rotateX: number
Gets or sets the rotate affine transform of the view along the X axis.

rotateY

rotateY: number
Gets or sets the rotate affine transform of the view along the Y axis.

scaleX

scaleX: number
Gets or sets the scaleX affine transform of the view.

scaleY

scaleY: number
Gets or sets the scaleY affine transform of the view.

translateX

translateX: number
Gets or sets the translateX affine transform of the view in device independent pixels.

translateY

translateY: number
Gets or sets the translateY affine transform of the view in device independent pixels.

verticalAlignment

verticalAlignment: VerticalAlignmentType
Gets or sets the alignment of this view within its parent along the Vertical axis.

visibility

visibility: VisibilityType
Gets or sets the visibility of the view.

width

Gets or sets the desired width of the view.

accessibilityBlurEvent

Static
accessibilityBlurEvent: string
String value used when hooking to accessibilityBlur event.

accessibilityFocusChangedEvent

Static
accessibilityFocusChangedEvent: string
String value used when hooking to accessibilityFocusChanged event.

accessibilityFocusEvent

Static
accessibilityFocusEvent: string
String value used when hooking to accessibilityFocus event.

layoutChangedEvent

Static
layoutChangedEvent: string
String value used when hooking to layoutChanged event.

showingModallyEvent

Static
showingModallyEvent: string
String value used when hooking to showingModally event.

shownModallyEvent

Static
shownModallyEvent: string
String value used when hooking to shownModally event.

Methods

_closeAllModalViewsInternal

_closeAllModalViewsInternal(): boolean
Internal method: Closes all modal views. Should be used by plugins like `nativescript-angular` which implement their own `modal views` service.
Returns boolean

_eachLayoutView

_eachLayoutView(callback: (View: any) => void): void
Parameter Default Description
callback
(View: any) => void

Returns void

_getNativeViewsCount

_getNativeViewsCount(): number

_getRootModalViews

_getRootModalViews(): ViewBase[]
Internal method: Gets all modal views of the current view.
Returns ViewBase[]

_getValue

_getValue(property: any): never
__Obsolete:__ There is a new property system that does not rely on _getValue.
Parameter Default Description
property
any

Returns never

_handleLivesync

_handleLivesync(context?: { path: string }): boolean
Parameter Default Description
context
{ path: string }

Returns boolean

_hasAncestorView

_hasAncestorView(ancestorView: View): boolean
Checks whether the current view has specific view for an ancestor.
Parameter Default Description
ancestorView

Returns boolean

_onAttachedToWindow

_onAttachedToWindow(): void
Called in android when native view is attached to window.
Returns void

_onDetachedFromWindow

_onDetachedFromWindow(): void
Called in android when native view is dettached from window.
Returns void

_onSizeChanged

_onSizeChanged(): void
iOS Only Internal method used to update various view details like background rerendering, border, etc.
Returns void

_setValue

_setValue(property: any, value: any): never
__Obsolete:__ There is a new property system that does not rely on _setValue.
Parameter Default Description
property
any

value
any

Returns never

_updateStyleScope

_updateStyleScope(
  cssFileName?: string,
  cssString?: string,
  css?: string
): void
Updates styleScope or create new styleScope.
Parameter Default Description
cssFileName
string

cssString
string

css
string

Returns void

accessibilityAnnouncement

accessibilityAnnouncement(msg?: string): void
Make an announcement to the screen reader.
Parameter Default Description
msg
string

Returns void

accessibilityScreenChanged

accessibilityScreenChanged(): void
Announce screen changed
Returns void

animate

animate(options: AnimationDefinition): AnimationPromise
Animates one or more properties of the view based on the supplied options.
Parameter Default Description
options

Returns AnimationPromise

createAnimation

createAnimation(options: AnimationDefinition): Animation
Creates an Animation object based on the supplied options.
Parameter Default Description
options

Returns Animation

eachChildView

eachChildView(callback: (view: View) => boolean): void
Iterates over children of type View.
Parameter Default Description
callback
(view: View) => boolean

Called for each child of type View. Iteration stops if this method returns falsy value.

Returns void

focus

focus(): boolean
Tries to focus the view. Returns a value indicating whether this view or one of its descendants actually took focus.
Returns boolean

getActualSize

getActualSize(): Size
Returns the actual size of the view in device-independent pixels.
Returns Size

getGestureObservers

getGestureObservers(type: GestureTypes): GesturesObserver[]
Parameter Default Description
type

Returns GesturesObserver[]

getLocationInWindow

getLocationInWindow(): Point
Returns the location of this view in the window coordinate system.
Returns Point

getLocationOnScreen

getLocationOnScreen(): Point
Returns the location of this view in the screen coordinate system.
Returns Point

getLocationRelativeTo

getLocationRelativeTo(otherView: View): Point
Returns the location of this view in the otherView's coordinate system.
Parameter Default Description
otherView

Returns Point

getMeasuredHeight

getMeasuredHeight(): number
Returns the raw height component.
Returns number

getMeasuredState

getMeasuredState(): number

getMeasuredWidth

getMeasuredWidth(): number
Returns the raw width component.
Returns number

getSafeAreaInsets

getSafeAreaInsets(): {
  bottom: any
  left: any
  right: any
}
Returns the iOS safe area insets of this view.
Returns { bottom: any left: any right: any }

hasGestureObservers

hasGestureObservers(): boolean
Android only check if gesture observers are attached
Returns boolean

layout

layout(
  left: number,
  top: number,
  right: number,
  bottom: number,
  setFrame?: boolean
): void
Assign a size and position to a view and all of its descendants This is the second phase of the layout mechanism. (The first is measuring). In this phase, each parent calls layout on all of its children to position them. This is typically done using the child measurements that were stored in the measure pass(). Derived classes should not override this method. Derived classes with children should override onLayout. In that method, they should call layout on each of their children.
Parameter Default Description
left
number

top
number

right
number

bottom
number

setFrame
boolean

Returns void

layoutNativeView

layoutNativeView(
  left: number,
  top: number,
  right: number,
  bottom: number
): void
Called from onLayout when native view position is about to be changed.
Parameter Default Description
left
number

Left position, relative to parent

top
number

Top position, relative to parent

right
number

Right position, relative to parent

bottom
number

Bottom position, relative to parent

Returns void

measure

measure(widthMeasureSpec: number, heightMeasureSpec: number): void
This is called to find out how big a view should be. The parent supplies constraint information in the width and height parameters. The actual measurement work of a view is performed in onMeasure(int, int), called by this method. Therefore, only onMeasure(int, int) can and must be overridden by subclasses.
Parameter Default Description
widthMeasureSpec
number

Horizontal space requirements as imposed by the parent

heightMeasureSpec
number

Vertical space requirements as imposed by the parent

Returns void

off

off(eventNames: string | GestureTypes, callback?: (args: EventData) => void, thisArg?: any): any
Removes listener(s) for the specified event name.
Parameter Default Description
eventNames
string | GestureTypes

Comma delimited names of the events or gesture types the specified listener is associated with.

callback
(args: EventData) => void

An optional parameter pointing to a specific listener. If not defined, all listeners for the event names will be removed.

thisArg
any

An optional parameter which when set will be used to refine search of the correct callback which will be removed as event listener.

Returns any

on

on(eventNames: string | GestureTypes, callback: (args: EventData) => void, thisArg?: any): any
A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
Parameter Default Description
eventNames
string | GestureTypes

String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change") or you can use gesture types.

callback
(args: EventData) => void

Callback function which will be executed when event is raised.

thisArg
any

An optional parameter which will be used as `this` context for callback execution.

Returns any
on(event: "loaded", callback: (args: EventData) => void, thisArg?: any): any
Raised when a loaded event occurs.
Parameter Default Description
event
"loaded"

callback
(args: EventData) => void

thisArg
any

Returns any
on(event: "unloaded", callback: (args: EventData) => void, thisArg?: any): any
Raised when an unloaded event occurs.
Parameter Default Description
event
"unloaded"

callback
(args: EventData) => void

thisArg
any

Returns any
on(event: "androidBackPressed", callback: (args: EventData) => void, thisArg?: any): any
Raised when a back button is pressed. This event is raised only for android.
Parameter Default Description
event
"androidBackPressed"

callback
(args: EventData) => void

thisArg
any

Returns any
on(event: "showingModally", callback: (args: ShownModallyData) => void, thisArg?: any): void
Raised before the view is shown as a modal dialog.
Parameter Default Description
event
"showingModally"

callback
(args: ShownModallyData) => void

thisArg
any

Returns void
on(event: "shownModally", callback: (args: ShownModallyData) => void, thisArg?: any): any
Raised after the view is shown as a modal dialog.
Parameter Default Description
event
"shownModally"

callback
(args: ShownModallyData) => void

thisArg
any

Returns any

onBackPressed

onBackPressed(): boolean
Derived classes can override this method to handle Android back button press.
Returns boolean

onLayout

onLayout(left: number, top: number, right: number, bottom: number): void
Called from layout when this view should assign a size and position to each of its children. Derived classes with children should override this method and call layout on each of their children.
Parameter Default Description
left
number

Left position, relative to parent

top
number

Top position, relative to parent

right
number

Right position, relative to parent

bottom
number

Bottom position, relative to parent

Returns void

onMeasure

onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void
Measure the view and its content to determine the measured width and the measured height. This method is invoked by measure(int, int) and should be overriden by subclasses to provide accurate and efficient measurement of their contents. When overriding this method, you must call setMeasuredDimension(int, int) to store the measured width and height of this view. Failure to do so will trigger an exception, thrown by measure(int, int).
Parameter Default Description
widthMeasureSpec
number

horizontal space requirements as imposed by the parent. The requirements are encoded with View.MeasureSpec.

heightMeasureSpec
number

vertical space requirements as imposed by the parent. The requirements are encoded with View.MeasureSpec.

Returns void

sendAccessibilityEvent

sendAccessibilityEvent(options: Partial<AccessibilityEventOptions>): void
Send accessibility event
Parameter Default Description
options
Partial<AccessibilityEventOptions>

Returns void

setMeasuredDimension

setMeasuredDimension(measuredWidth: number, measuredHeight: number): void
This method must be called by onMeasure(int, int) to store the measured width and measured height. Failing to do so will trigger an exception at measurement time.
Parameter Default Description
measuredWidth
number

The measured width of this view. May be a complex bit mask as defined by MEASURED_SIZE_MASK and MEASURED_STATE_TOO_SMALL.

measuredHeight
number

The measured height of this view. May be a complex bit mask as defined by MEASURED_SIZE_MASK and MEASURED_STATE_TOO_SMALL.

Returns void

setOnTouchListener

setOnTouchListener(): void
Android only to set the touch listener
Returns void

combineMeasuredStates

Static
combineMeasuredStates(curState: number, newState: any): number
Parameter Default Description
curState
number

newState
any

Returns number

layoutChild

Static
layoutChild(parent: View, child: View, left: number, top: number, right: number, bottom: number): void
Layout a child by taking into account its margins, horizontal and vertical alignments and a given bounds.
Parameter Default Description
parent

This parameter is not used. You can pass null.

child

left
number

Left position, relative to parent

top
number

Top position, relative to parent

right
number

Right position, relative to parent

bottom
number

Bottom position, relative to parent

Returns void

measureChild

Static
measureChild(parent: View, child: View, widthMeasureSpec: number, heightMeasureSpec: number): {
  measuredHeight: number
}
Measure a child by taking into account its margins and a given measureSpecs.
Parameter Default Description
parent

This parameter is not used. You can pass null.

child

The view to be measured.

widthMeasureSpec
number

heightMeasureSpec
number

Returns { measuredHeight: number }

resolveSizeAndState

Static
resolveSizeAndState(
  size: number,
  specSize: number,
  specMode: number,
  childMeasuredState: number
): number
Utility to reconcile a desired size and state, with constraints imposed by a MeasureSpec. Will take the desired size, unless a different size is imposed by the constraints. The returned value is a compound integer, with the resolved size in the MEASURED_SIZE_MASK bits and optionally the bit MEASURED_STATE_TOO_SMALL set if the resulting size is smaller than the size the view wants to be.
Parameter Default Description
size
number

specSize
number

specMode
number

childMeasuredState
number

Returns number
Previous
Transition