# Getting Started Learn how to create a cross-platform app with ULT 1\. Select your package manager and run the command to create your new project {% tabs %} {% tab title="NPM" %} ```bash npx ult ``` {% endtab %} {% tab title="Yarn" %} ```bash yarn dlx ult ``` {% endtab %} {% endtabs %} 2\. Choose a task from the table below to run with your selected package manager {% tabs %} {% tab title="NPM" %} ```bash npm run ``` {% endtab %} {% tab title="Yarn" %} ```bash yarn run ``` {% endtab %} {% endtabs %} | Task | Description | | ------------- | ------------------------------ | | web | Start development on Web | | android | Start development on Android | | ios | Start development on iOS | | macos | Start development on MacOS | | windows | Start development on Windows | | build-web | Build a production Web bundle | | build-android | Build a production Android app | | build-ios | Build a production iOS app | | build-macos | Build a production MacOS app | | build-windows | Build a production Windows app | # View This component is a generic container for other components. ### Styles * Flexbox Styles * View Styles * Transform Styles ### Props | Name | Type | Description | | ------------------------------------ | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **accessibilityLabel** | `string` |
  • Alternate text for screen readers
  • If not defined, title prop is used
| | **accessibilityTraits** | `AccessibilityTrait \| AccessibilityTrait[]` |
  • Traits used to hint screen readers, etc.
| | **accessibilityLiveRegion** | `AccessibilityLiveRegion` |
  • Region for accessibility mechanisms
  • Android and web only
| | **accessibilityId** | `string` |
  • It is hard or impossible to tell by a reference to an instance of a component from where this component has been instantiated
  • You can assign this property and check instance.props.accessibilityId
  • For example accessibilityId is used in View's FocusArbitrator callback
| | **activeOpacity** | `number` |
  • Opacity value the button should animate to, on touch on views that have onPress handlers
  • iOS and Android only
| | **animateChildEnter** | `boolean` |

  • Animation of children:

    • Every child must have a key
    • String refs aren't supported on children, only callback refs are
| | **animateChildLeave** | `boolean` |

  • Animation of children

    • Every child must have a key
    • String refs aren't supported on children, only callback refs are
| | **animateChildMove** | `boolean` |

  • Animation of children

    • Every child must have a key
    • String refs aren't supported on children, only callback refs are
| | **ariaLabelledBy**? | `string` |
  • Id of an element that describes the view for screen-reader
  • Web only
| | **ariaRoleDescription**? | `string` |
  • A custom role description to be read by the screen-readers
  • Web only
| | **blockPointerEvents** | `boolean` |
  • Block touches for this component and all of its children
| | **disableTouchOpacityAnimation** | `boolean` |
  • Disable default opacity animation on touch on views that have onPress handlers
  • iOS and Android only
| | **id** | `string` |
  • Specifies a unique id for an HTML element
  • NOTE: This property may be going away in future versions
  • Web only
| | **ignorePointerEvents** | `boolean` |
  • Ignore clicks and other mouse events, allowing children or components behind to receive them
| | **importantForAccessibility**? | `ImportantForAccessibility` |
  • Expose the element and/or its children as accessible to screen-readers
| | **restrictFocusWithin** | `boolean` |
  • When the keyboard navigation is happening, restrict the focusable elements within this view
  • Useful for popups and modals, you might want to prevent the focus from going outside of the popup or modal
  • The views with restrictFocusWithin are stacked and the last mounted view is a winner
  • This means if you, for example, have restricted the focus within some modal, and you have a popup (which also desires for a restricted focus) inside this modal, the popup will get the restriction, but when dismissed, the restriction will be restored for the modal
  • See also the companion method setFocusRestricted() below
  • WARNING: For the sake of performance, this property is readonly and changing it during the View life cycle will produce an error
| | **limitFocusWithin** | `LimitFocusType` |
  • When the keyboard navigation is happening, do not focus on this view and on all focusable elements inside this view
  • See also the companion method setFocusLimited() below
  • Useful for the list items, allows to skip the consecutive focusing on one list item (and item's internal focusable elements) after another using the Tab key and implement the switching between the items using the arrow keys (or using some other behaviour)
  • When limitFocusWithin=LimitFocusType.Limited, the View and the focusable components inside the View get both tabIndex=-1 and aria-hidden=true
  • When limitFocusWithin=LimitFocusType.Accessible, the View and the focusable components inside the View get only tabIndex=-1.
  • WARNING: For the sake of performance, this property is readonly and changing it during the View life cycle will produce an error
| | **autoFocus** | `boolean` |
  • Should be focused when the component is mounted, see also arbitrateFocus property below
  • WARNING: autoFocus=true means that this View's requestFocus() method will be called, however calling requestFocus() might have no effect (for example on web View is focusable only when tabIndex is specified), the application has to handle this either while setting this property or in the View's FocusArbitrator callback
| | **arbitrateFocus** | `FocusArbitrator` |
  • When multiple components with autoFocus=true inside this View are mounting at the same time, and/or multiple components inside this view have received focus() call during the same render cycle, this callback will be called so that it's possible for the application to decide which one should actually be focused
| | **importantForLayout** | `boolean` |
  • Additional invisible DOM elements will be added inside the view to track the size changes that are performed behind our back by the browser's layout engine faster (ViewBase checks for the layout updates once a second and sometimes it's not fast enough)
  • Web only
| | **onDragStart** | `(e: DragEvent) => void` |
  • Mouse-specific Events
  • For drag specific events, if onDragStart is present, the view is draggable
  • onDragStart/onDrag/onDragEnd are source specific events
  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events
| | **onDrag** | `(e: DragEvent) => void` |

  • Mouse-specific Events
  • For drag specific events, if onDragStart is present, the view is draggable
  • onDragStart/onDrag/onDragEnd are source specific events
  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events
| | **onDragEnd** | `(e: DragEvent) => void` |

  • Mouse-specific Events
  • For drag specific events, if onDragStart is present, the view is draggable
  • onDragStart/onDrag/onDragEnd are source specific events
  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events
| | **onDragEnter** | `(e: DragEvent) => void` |

  • Mouse-specific Events
  • For drag specific events, if onDragStart is present, the view is draggable
  • onDragStart/onDrag/onDragEnd are source specific events
  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events
| | **onDragOver** | `(e: DragEvent) => void` |

  • Mouse-specific Events
  • For drag specific events, if onDragStart is present, the view is draggable
  • onDragStart/onDrag/onDragEnd are source specific events
  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events
| | **onDragLeave** | `(e: DragEvent) => void` |

  • Mouse-specific Events
  • For drag specific events, if onDragStart is present, the view is draggable
  • onDragStart/onDrag/onDragEnd are source specific events
  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events
| | **onDrop** | `(e: DragEvent) => void` |

  • Mouse-specific Events
  • For drag specific events, if onDragStart is present, the view is draggable
  • onDragStart/onDrag/onDragEnd are source specific events
  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events
| | **onMouseEnter** | `(e: MouseEvent) => void` |

  • Mouse-specific Events
  • For drag specific events, if onDragStart is present, the view is draggable
  • onDragStart/onDrag/onDragEnd are source specific events
  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events
| | **onMouseLeave** | `(e: MouseEvent) => void` |

  • Mouse-specific Events
  • For drag specific events, if onDragStart is present, the view is draggable
  • onDragStart/onDrag/onDragEnd are source specific events
  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events
| | **onMouseMove** | `(e: MouseEvent) => void` |

  • Mouse-specific Events
  • For drag specific events, if onDragStart is present, the view is draggable
  • onDragStart/onDrag/onDragEnd are source specific events
  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events
| | **onMouseOver** | `(e: MouseEvent) => void` |

  • Mouse-specific Events
  • For drag specific events, if onDragStart is present, the view is draggable
  • onDragStart/onDrag/onDragEnd are source specific events
  • onDragEnter/onDragOver/onDragLeave/onDrop are destination specific events
| | **onContextMenu** | `(e: React.SyntheticEvent) => void` |
  • Mouse & Touch Events
| | **onPress** | `(e: SyntheticEvent) => void` |
  • Mouse & Touch Events
| | **onFocus** | `(e: FocusEvent) => void` |
  • Focus Events
| | **onBlur** | `(e: FocusEvent) => void` |
  • Focus Events
| | **onKeyPress** | `(e: KeyboardEvent) => void` |
  • Keyboard Events
| | **onTouchStartCapture** | `(e: React.SyntheticEvent) => void` |
  • Touch-specific Events
| | **onTouchMoveCapture** | `(e: React.SyntheticEvent) => void` |
  • Touch-specific Events
| | **onLongPress** | `(e: SyntheticEvent) => void` |
  • Touch-specific Events
| | **onMoveShouldSetResponder** | `(e: React.SyntheticEvent) => boolean` |
  • Touch-specific Events
| | **onMoveShouldSetResponderCapture** | `(e: React.SyntheticEvent) => boolean` |
  • Touch-specific Events
| | **onResponderGrant** | `(e: React.SyntheticEvent) => void` |
  • Touch-specific Events
| | **onResponderReject** | `(e: React.SyntheticEvent) => void` |
  • Touch-specific Events
| | **onResponderRelease** | `(e: React.SyntheticEvent) => void` |
  • Touch-specific Events
| | **onResponderStart** | `(e: React.TouchEvent) => void` |
  • Touch-specific Events
| | **onResponderMove** | `(e: React.TouchEvent) => void` |
  • Touch-specific Events
| | **onResponderEnd** | `(e: React.TouchEvent) => void` |
  • Touch-specific Events
| | **onResponderTerminate** | `(e: React.SyntheticEvent) => void` |
  • Touch-specific Events
| | **onResponderTerminationRequest** | `(e: React.SyntheticEvent) => boolean` |
  • Touch-specific Events
| | **onStartShouldSetResponder** | `(e: React.SyntheticEvent) => boolean` |
  • Touch-specific Events
| | **onStartShouldSetResponderCapture** | `(e: React.SyntheticEvent) => boolean` |
  • Touch-specific Events
| | **onLayout** | `(e: ViewOnLayoutEvent) => void` |
  • Other Events
| | **shouldRasterizeIOS** | `boolean` |
  • Rasterize contents using offscreen bitmap (perf optimization)
  • iOS only
| | **tabIndex** | `number` |
  • Keyboard tab order
| | **testId** | `string` |
  • ID that can be used to identify the instantiated element for testing purposes
| | **title** | `string` |
  • Text for a tooltip
| | **style** | `ViewStyleRuleSet \| ViewStyleRuleSet[]` |
  • See below for supported styles
| | **viewLayerTypeAndroid** | `'none' \| 'software' \| 'hardware'` |
  • Should use hardware or software rendering?
  • Android only property
| | **underlayColor** | `string` |
  • Background color that will be visible on touch on views that have onPress handlers
  • iOS and Android only
| | **useSafeInsets** | `boolean` |

  • When true:

    • Renders children within the safe area boundaries of a device, i.e. with padding with ensure the children don't cover navigation bars, toolbars etc.
    • Applies a style of { flex: 1, alignSelf: 'stretch' } to this view
    • Some ViewProps may be ignored. iOS only
| # Scroll This component is a generic container for other components. Unlike View, it supports scrolling, panning, and zooming so it is possible to view larger contents off-screen. ### Styles * Flexbox Styles * View Styles * Transform Styles ### Props | Name | Type | Description | | ---------------------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **bounces** | `boolean` |
  • Should scroll bar bounce when user hits the bounds?
  • iOS only
| | **horizontal** | `boolean` |
  • Does it support scrolling in the horizontal and/or vertical directions?
| | **vertical** | `boolean` |
  • Does it support scrolling in the horizontal and/or vertical directions?
| | **keyboardDismissMode** | `'none' \| 'interactive' \| 'on-drag'` |
  • When the user scrolls the view, how should the on-screen keyboard react?
  • Native only
| | **keyboardShouldPersistTaps** | `boolean \| 'always' \| 'never' \| 'handled' = 'never'` |
  • Should the on-screen keyboard remain visible when the user taps the scroll view?
  • Native
| | **onContentSizeChange** | `(width: number, height: number) => void` |
  • Invoked when the contents of the scroll view change
| | **onFocus** | `undefined` |
  • Focus Events
| | **onBlur** | `undefined` |
  • Focus Events
| | **onKeyPress** | `undefined` |
  • Keyboard Events
| | **onLayout** | `undefined` |
  • Invoked when view dimensions or position changes
| | **onScroll** | `undefined` |
  • Called when the scroll position changes
| | **onScrollBeginDrag** | `undefined` |
  • Called when the user starts or stops scrolling (touch-based systems only)
| | **onScrollEndDrag** | `undefined` |
  • Called when the user starts or stops scrolling (touch-based systems only)
| | **scrollXAnimatedValue**? | `AnimatedValue` |
  • AnimatedValue objects hooked up to either (or both) of these properties will be automatically hooked into the onScroll handler of the scrollview and .setValue() will be called on them with the updated values
  • On supported platforms, it will use RN.Animated.event() to do // a native-side/-backed coupled animation
| | **scrollYAnimatedValue**? | `AnimatedValue` |
  • AnimatedValue objects hooked up to either (or both) of these properties will be automatically hooked into the onScroll handler of the scrollview and .setValue() will be called on them with the updated values
  • On supported platforms, it will use RN.Animated.event() to do a native-side/-backed coupled animation
| | **overScrollMode**? | `'auto' \| 'always' \| 'never'` |
  • Android only property to control overScroll mode
| | **pagingEnabled** | `boolean` |
  • Snap to page boundaries?
| | **snapToInterval** | `number` |
  • Snap to page boundaries?
| | **scrollEnabled** | `boolean` |
  • Is scrolling enabled?
| | **scrollEventThrottle** | `number` |
  • Minimum duration (in milliseconds) between scroll events
| | **scrollIndicatorInsets** | `ScrollIndicatorInsets` |
  • Inset (in pixels) of scroll indicator from top/bottom (vertical) or left/right (horizontal)
| | **scrollsToTop** | `boolean` |
  • If true, this scroll bar scrolls to the top when the user taps on the status bar
| | **showsHorizontalScrollIndicator** | `boolean` |
  • Should the indicator be displayed?
| | **showsVerticalScrollIndicator** | `boolean` |
  • Should the indicator be displayed?
| | **style** | `ViewStyleRuleSet \| ViewStyleRuleSet[]` |
  • See below for supported styles
| | **tabNavigation**? | `'local' \| 'cycle' \| 'once'` |
  • Windows-only property to control tab navigation inside the view
| | **testId** | `string` |
  • ID that can be used to identify the instantiated element for testing purposes
| # Gesture This component is a generic container for other components. It supports multiple gestures – tapping, double-tapping, long-pressing, panning, and pinching. ### Styles * Flexbox Styles * View Styles * Transform Styles ### Props | Name | Type | Description | | ------------------------------ | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | **accessibilityLabel** | `string` |
  • Alternate text for screen readers
| | **accessibilityTraits** | `AccessibilityTrait \| AccessibilityTrait[]` |
  • Traits used to hint screen readers, etc.
| | **importantForAccessibility**? | `ImportantForAccessibility` |
  • Expose the element and/or its children as accessible to Screen readers
| | **onPinchZoom** | `(gestureState: MultiTouchGestureState) => void` |
  • Gestures and attributes that apply only to touch inputs
| | **onRotate** | `(gestureState: MultiTouchGestureState) => void` |
  • Gestures and attributes that apply only to touch inputs
| | **onScrollWheel** | `(gestureState: ScrollWheelGestureState) => void` |
  • Gestures and attributes that apply only to mouse inputs
| | **mouseOverCursor** | `GestureMouseCursor` |
  • Gestures and attributes that apply only to mouse inputs
| | **onPan** | `(gestureState: PanGestureState) => void` |
  • Gestures and attributes that apply to either touch or mouse inputs
| | **onPanVertical** | `(gestureState: PanGestureState) => void` |
  • Gestures and attributes that apply to either touch or mouse inputs
| | **onPanHorizontal** | `(gestureState: PanGestureState) => void` |
  • Gestures and attributes that apply to either touch or mouse inputs
| | **onTap** | `(gestureState: TapGestureState) => void` |
  • Gestures and attributes that apply to either touch or mouse inputs
| | **onDoubleTap** | `(gestureState: TapGestureState) => void` |
  • Gestures and attributes that apply to either touch or mouse inputs
| | **onContextMenu** | `(gestureState: TapGestureState) => void` |
  • Gestures and attributes that apply to either touch or mouse inputs
| | **onLongPress** | `(gestureState: TapGestureState) => void` |
  • Gestures and attributes that apply to either touch or mouse inputs
| | **onFocus** | `(e: FocusEvent) => void` |
  • Focus Events
| | **onBlur** | `(e: FocusEvent) => void` |
  • Focus Events
| | **onKeyPress** | `(e: KeyboardEvent) => void` |
  • Keyboard Events
| | **preferredPan** | `PreferredPanGesture = undefined` |
  • We can set vertical or horizontal as preferred
| | **panPixelThreshold** | `number` |
  • How many pixels (in either horizontal or vertical direction) until pan is recognized?
  • Default is 10
  • Can be any value > 0
| | **releaseOnRequest** | `boolean` |
  • Something else wants to become responder. Should this view release the responder?
  • Setting true allows release.
| | **testId** | `string` |
  • ID that can be used to identify the instantiated element for testing purposes
| # Button This component is a generic container for other components. However, it adds some additional capabilities – support for presses or clicks and hovering. ### Styles * Flexbox Styles * View Styles * Transform Styles ### Props | Name | Type | Description | | -------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **accessibilityLabel** | `boolean` |
  • Text to be used by screen readers
| | **accessibilityTraits** | `AccessibilityTrait\| AccessibilityTrait[]` |
  • Traits used to hint screen readers, etc.
| | **accessibilityId** | `string` |
  • You can assign this property, and check instance.props.accessibilityId.
  • For example accessibilityId is used, in View's FocusArbitrator callback
| | **activeOpacity** | `number` |
  • Opacity value the button should animate to on button touch
  • iOS and Android only
| | **ariaControls** | `string` |
  • Id of an expandable element revealed by the button
  • Describes a relation between button and element to screen reader
  • Web only
| | **id** | `string` |
  • Specifies a unique id for an HTML element
  • NOTE: This property may be going away in future versions
  • Web only
| | **importantForAccessibility**? | `ImportantForAccessibility` |
  • Expose the element and/or its children as accessible to Screen readers
| | **delayLongPress** | `number` |
  • Delay in ms before onLongPress is called
| | **disabled** | `boolean` |
  • If disabled, touch and mouse input events are ignored
| | **disabledOpacity** | `number` |
  • By default, opacity of a disabled element is 0.5
  • This value can be overridden with this property
| | **disableTouchOpacityAnimation** | `boolean` |
  • Disable default opacity animation on touch of buttons
| | **autoFocus** | `boolean` |
  • Should be focused when the component is mounted, see also View's arbitrateFocus property
  • WARNING: autoFocus=true means that this Button's requestFocus() method will be called, however calling requestFocus() might have no effect (for example the button is disabled), the application has to handle this either while setting this property or in the View's FocusArbitrator callback
| | **onAccessibilityTapIOS** | `(e: SyntheticEvent)=> void` |
  • Called when VoiceOver is on and the user double tapped to activate a control
  • iOS Only
| | **onFocus** | `(e: FocusEvent) => void` |
  • Focus Events
| | **onBlur** | `(e: FocusEvent) => void` |
  • Focus Events
| | **onHoverStart** | `(e: SyntheticEvent) => void` |
  • Called when the mouse cursor enters or leaves the view boundsOnHoverEnd
| | **onHoverEnd** | `(e: SyntheticEvent) => void` |
  • Called when the mouse cursor enters or leaves the view bounds
| | **onKeyPress** | `(e: KeyboardEvent) => void` |
  • Keyboard Events
| | **onLongPress** | `(e: SyntheticEvent) => void` |
  • Called when the user has pressed and held for a specified duration
| | **onPress** | `(e: SyntheticEvent) => void` |
  • Called when the touch or mouse button is released within the bounds of the view and the press has not been canceled
| | **onPressIn** | `(e: SyntheticEvent) => void` |
  • Called when touch is initiated or mouse button is pressed
| | **onPressOut** | `(e: SyntheticEvent) => void` |
  • Called when touch or the mouse button is released or the user's finger or mouse cursor is no longer over the view
| | **shouldRasterizeIOS** | `boolean` |
  • Rasterize contents using offscreen bitmap (perf optimization)
  • ios only
| | **style** | `ButtonStyleRuleSet \| ButtonStyleRuleSet[]` |
  • See below for supported styles
| | **tabIndex** | `number` |
  • Keyboard tab order
| | **testId** | `string` |
  • ID that can be used to identify the instantiated element for testing purposes.
| | **title** | `string` |
  • Text for a tooltip
| | **underlayColor** | `string` |
  • Background color that will be visible on button touch
  • iOS and Android only
| # Text This component displays basic text. Its children must be a string literal or a series of children that are either Text components or View components with a fixed height and width. ### Styles * Flexbox Styles * View Styles * Transform Styles ### Props | Name | Type | Description | | ----------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **allowFontScaling** | `boolean` |
  • Should fonts be scaled according to system setting?
  • Android and ios only
| | **ellipsizeMode** | `'head' \| 'middle' \| 'tail'` |

  • When numberOfLines is set, this prop defines how text will be truncated.

    • head: The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
    • middle: The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
    • tail: The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
  • Android and ios only
| | **id** | `string` |
  • Specifies a unique id for an HTML element
  • NOTE: This property may be going away in future versions
  • Web only
| | **importantForAccessibility** | `ImportantForAccessibility` |
  • Expose the element and/or its children as accessible to Screen readers
| | **accessibilityId** | `string` |
  • It is hard or impossible to tell by a reference to an instance of a component from where this component has been instantiated.
  • You can assign this property and check instance.props.accessibilityId
  • For example accessibilityId is used in View's FocusArbitrator callback
| | **autoFocus** | `boolean` |
  • Should be focused when the component is mounted, see also View's arbitrateFocus property
  • WARNING: autoFocus=true means that this Text's requestFocus() method will be called, however calling requestFocus() for Text might make sense only on mobile for the accessibility reasons, on web it has no effect, the application has to handle this either while setting this property or in the View's FocusArbitrator callback
| | **numberOfLines** | `number` |
  • For non-zero values, truncates with ellipsis if necessary.
  • Web platform doesn't support values greater than 1
  • Web platform may also not truncate properly if text contains line breaks, so it may be necessary to replace line breaks before rendering.
| | **onPress**? | `(e: SyntheticEvent) => void` |
  • Mouse & Touch Events
| | **selectable** | `boolean` |
  • Is the text selectable (affects mouse pointer and copy command)
| | **style** | `TextStyleRuleSet \| TextStyleRuleSet[]` |
  • See below for supported styles
| | **testId** | `string` |
  • ID that can be used to identify the instantiated element for testing purposes
| # TextInput This component provides single and multi-line text input capabilities. ### Styles * Text Styles * Flexbox Styles * View Styles * Transform Styles ### Props | Name | Type | Description | | ------------------------ | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **accessibilityLabel** | `boolean` |
  • Text to be used by screen readers
| | **accessibilityId** | `string` |
  • It is hard or impossible to tell by a reference to an instance of a component from where this component has been instantiated
  • You can assign this property and check instance.props.accessibilityId
  • For example accessibilityId is used in View's FocusArbitrator callback
| | **allowFontScaling** | `boolean` |
  • Should fonts be scaled according to system setting?
  • Android and iOS only
| | **autoCapitalize** | `'none' \| 'sentences' \|'words' \|'characters'` |
  • Auto-capitalization mode
| | **autoCorrect** | `boolean` |
  • Should auto-correction be applied to contents?
| | **autoFocus** | `boolean` |
  • Should be focused when the component is mounted, see also View's arbitrateFocus property
  • WARNING: autoFocus=true means that this TextInput's requestFocus() method will be called, however calling requestFocus() might have no effect (for example the input is disabled), the application has to handle this either while setting this property or in the View's FocusArbitrator callback
| | **blurOnSubmit** | `boolean` |
  • Should focus be lost after submitting?
| | **clearButtonMode** | `'never' \| 'while-editing' \| 'unless-editing' \| 'always'` |
  • iOS and Windows only property for controlling when the clear button should appear on the right side of the text view
  • Default behavior dependends on platform: equivalent to 'never' on iOS, and 'always' on Windows
| | **defaultValue** | `string` |
  • Initial value that will change when the user starts typing
| | **disableFullscreenUI** | `boolean` |
  • Disable full screen editor mode?
| | **editable** | `boolean` |
  • Can text be edited by the user?
| | **keyboardAppearance** | `'default' \| 'light' \| 'dark'` |
  • iOS-only prop for controlling the keyboard appearance
| | **keyboardType** | `'default' \| 'numeric' \| 'email-address' \| 'number-pad'` |
  • On-screen keyboard type to display
| | **maxLength** | `number` |
  • Maximum character count
| | **multiline** | `boolean` |
  • Should the control support multiple lines of text?
| | **onBlur** | `() => void` |
  • Called when the control loses focus
| | **onChangeText** | `(newValue: string) => void` |
  • Called when the text value changes
| | **onFocus** | `() => void` |
  • Called when the control obtains focus
| | **onKeyPress** | `(e: KeyboardEvent) => void` |
  • Called on a key event
| | **onPaste** | `(e: ClipboardEvent) => void` |
  • Called when text is pasted into the control (not currently supported on iOS or Android)
| | **onScroll** | `(newScrollLeft: number, newScrollTop: number) => void` |
  • Called when the selection scrolls due to overflow
| | **onSelectionChange** | `(start: number, end: number) => void` |
  • Called when the selection range or insertion point location changes
| | **onSubmitEditing** | `() => void` |
  • Called when the text input submit button is pressed; invalid if multiline is true
| | **placeholder** | `string` |
  • Placeholder text to dislpay when input is empty
| | **placeholderTextColor** | `color` |
  • Color of placeholder text
| | **returnKeyType** | `'done' \| 'go' \| 'next' \| 'search' \| 'send'` |
  • iOS and android prop for controlling return key type
| | **secureTextEntry** | `boolean` |
  • Obscure the text input (for passwords)?
| | **spellCheck** | `boolean` |
  • Should spell checking be applied to contents?
| | **style** | `TextInputStyleRuleSet \| TextInputStyleRuleSet[]` |
  • See below for supported styles
| | **testId** | `string` |
  • ID that can be used to identify the instantiated element for testing purposes
| | **title** | `string` |
  • Text for a tooltip
| | **value** | `string` |
  • If defined, the control value is forced to match this value
  • If undefined, control value can be modified by the user
| # Link This component displays a hyperlink. On the web, it translates to an \ tag. On mobile, it opens an embedded browser. On desktop it opens a tab in the default browser. ### Styles * Text Styles * Flexbox Styles * View Styles * Transform Styles ### Props | Name | Type | Description | | -------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **accessibilityId** | `string` |
  • It is hard or impossible to tell by a reference to an instance of a component from where this component has been instantiated
  • You can assign this property and check instance.props.accessibilityId
  • For example accessibilityId is used in View's FocusArbitrator callback
| | **allowFontScaling** | `boolean` |
  • Should fonts be scaled according to system setting?
| | **autoFocus** | `boolean` |
  • Should be focused when the component is mounted, see also View's arbitrateFocus property
| | **numberOfLines** | `number` |
  • For non-zero values, truncates with ellipsis if necessary
| | **onHoverStart** | `(e: SyntheticEvent) => void` |
  • Called when the mouse cursor enters or leaves the view bounds
| | **onHoverEnd** | `(e: SyntheticEvent) => void` |
  • Called when the mouse cursor enters or leaves the view bounds
| | **onPress** | `(e: SyntheticEvent, url: string) => void` |
  • Event called when the touch or mouse button is released within the bounds of the view and the press has not been canceled
| | **onLongPress** | `(e: SyntheticEvent, url:string) => void` |
  • Event called when a long touch or mouse (> 1000ms) button is released within the bounds of the view and the press has not been canceled
| | **onContextMenu** | `(e: MouseEvent) => void` |
  • Event called when context menu is triggered, either by right mouse button click or context menu key
| | **selectable** | `boolean` |
  • Can the link be included in a text selection?
| | **style** | `LinkStyleRuleSet\| LinkStyleRuleSet[]` |
  • See below for supported styles
| | **testId** | `string` |
  • ID that can be used to identify the instantiated element for testing purposes
| | **title** | `string` |
  • Text for a tooltip
| | **url** | `string` |
  • URL to follow for hyperlink
| # Select This component displays a control that allows the user to pick from a list of items. A dropdown is used for larger screens, a dialog for smaller ones. ### Styles * Flexbox Styles * View Styles * Transform Styles ### Props | Name | Type | Description | | ----------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | **items** | `PickerPropsItem[]` |
  • List of items to be displayed in the picker
| | **mode** | `'dialog' \| 'dropdown'` |
  • 'dialog': Show a modal dialog
  • 'dropdown': Shows a dropdown anchored to the picker
  • Android only
| | **onValueChange** | `(itemValue: string, itemPosition: number) => void` |
  • Invoked when the selected value changes
| | **selectedValue** | `string` |
  • Initially-selected item
| | **style** | `PickerStyleRuleSet \| PickerStyleRuleSet[]` |
  • See below for supported styles
| | **testId** | `string` |
  • ID that can be used to identify the instantiated element for testing purposes
| | **color** | `string` |

  • Text Color
| # Spinner This component displays an animated “spinner” control that tells the user that an operation is pending. Animation continues as long as the component is displayed. ### Styles * Flexbox Styles * View Styles * Transform Styles ### Props | Name | Type | Description | | ------------- | ------------------------------------------ | -------------------------------------------------------- | | **color** | `color` |
  • Color of indicator
| | **deferTime** | `number` |
  • Number of ms to wait before displaying
| | **size** | `'large' \| 'medium' \| 'small' \| 'tiny'` |
  • Size of indicator
| | **testId** | `string` |
  • ID for testing purposes
| ### Examples ```jsx {loading && } ``` # Image This component displays an image, which can come from a local source or from the network. It supports JPEG, GIF and PNG formats. ### Styles * Flexbox Styles * View Styles * Transform Styles ### Props | Name | Type | Description | | ---------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **accessibilityLabel** | `string` |
  • Alternate text to display if the image cannot be loaded or by screen readers
| | **headers** | `{[headerName: string]: string}` |
  • HTTP headers to include when fetching the URL
| | **onError** | `(err?: Error) => void` |
  • Called when an error occurs that prevents the image from loading
| | **onLoad** | `(size: Dimensions) => void` |
  • Called when the image successfully loads
| | **resizeMethod** | `'auto' \| 'resize' \| 'scale'` |
  • Android-specific resize property
| | **resizeMode** | `'stretch' \| 'contain' \| 'cover' \| 'auto' \| 'repeat'` |
  • Determines how to resize the image if its natural size does not match the size of the container
  • Note: In Web version, 'auto' doesn't scale down image if width/height smaller than the original image size
| | **source** | `string` |
  • URL to image
| | **style** | `ImageStyleRuleSet \| ImageStyleRuleSet[ ]` |
  • See below for supported styles
| | **testId** | `string` |
  • ID that can be used to identify the instantiated element for testing purposes
| | **title** | `string` |
  • Tooltip for image
| # SVG \* This component displays a vector image. Supported properties are the path, fill color, stroke color, and stroke width. ### Installation {% hint style="info" %} This component is not included by default, to use it import the following package: {% endhint %} {% tabs %} {% tab title="NPM" %} ```bash $ npm i react-ult-ext-imagesvg ``` {% endtab %} {% tab title="Yarn" %} ``` yarn add react-ult-ext-imagesvg ``` {% endtab %} {% endtabs %} ### Styles * Flexbox Styles * View Styles * Transform Styles ### Svg Props | Name | Type | Description | | ----------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | | **style** | `ImageSvgStyleRuleSet \| ImageSvgStyleRuleSet[]` |
  • See below for supported styles
| | **fillColor** | `color` |
  • Color and opacity of fill
  • Default values are provided by SVG
| | **fillOpacity** | `number` |
  • Color and opacity of fill
  • Default values are provided by SVG
| | **preserveAspectRatio** | `boolean` |
  • Preserve aspect ratio or stretch?
| | **strokeColor** | `color` |
  • Color
  • Width and opacity of stroke
  • Default values are provided by SVG
| | **strokeWidth** | `number` |
  • Color
  • Width and opacity of stroke
  • Default values are provided by SVG
| | **strokeOpacity** | `number` |
  • Color
  • Width and opacity of stroke;
  • Default values are provided by SVG
| | **title** | `string` |
  • Tooltip for image
| | **viewBox** | `string` |
  • Bounding box
| | **webShadow** | `boolean` |
  • Shadow
| ### SvgCommon Props | Name | Type | Description | | ----------------- | -------- | ------------------------------------------------------------------------------------------------------- | | **fillColor** | `color` |
  • Color and opacity of fill
  • Default values are provided by SVG
| | **fillOpacity** | `number` |
  • Color and opacity of fill
  • Default values are provided by SVG
| | **strokeColor** | `color` |
  • Colo
  • Width and opacity of stroke
  • Default values are provided by SVG
| | **strokeWidth** | `number` |
  • Color
  • Width and opacity of stroke
  • Default values are provided by SVG
| | **strokeOpacity** | `number` |
  • Color
  • Width and opacity of stroke
  • Default values are provided by SVG
| ### SvgPath Props | Name | Type | Description | | ----- | -------- | ---------------------------------------- | | **d** | `string` |
  • Path definition string
| ### SvgRect Props | Name | Type | Description | | ---------- | -------- | ----------------------------------------------------------------- | | **x** | `number` |
  • Position and dimension information for the rect
| | **y** | `number` |
  • Position and dimension information for the rect
| | **width** | `number` |
  • Position and dimension information for the rect
| | **height** | `number` |
  • Position and dimension information for the rect
| # Video \* This component provides video playback capabilities with optional controls for play, pause, etc. ### Installation {% hint style="info" %} This component is not included by default, to use it import the following package: {% endhint %} {% tabs %} {% tab title="NPM" %} ```bash $ npm i react-ult-ext-video ``` {% endtab %} {% tab title="Yarn" %} ``` $ yarn add react-ult-ext-video ``` {% endtab %} {% endtabs %} ### Styles * Flexbox Styles * View Styles * Transform Styles ### Props | Name | Type | Description | | ---------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | **accessibilityLabel** | `string` |
  • Alternate text to display if the image cannot be loaded or by screen readers
| | **authToken** | `string` |
  • Authentication token to include in request (not supported on some React Native implementations)
| | **loop** | `boolean` |
  • Should video playback loop to beginning after it completes?
| | **onBuffer** | `() => void` |
  • Called when the video is paused for buffering
| | **onCanPlay** | `() => void` |
  • Called when enough of the video has been loaded that playback is possible
| | **onCanPlayThrough** | `() => void` |
  • Called when enough of the video has been loaded that playback can proceed all the way to the end without buffering pauses
| | **onEnded** | `() => void` |
  • Called when the video playback reaches the end
| | **onError** | `() => void` |
  • Called when the video cannot be loaded
| | **onLoadedData** | `(info: VideoInfo) => void` |
  • Called when the video's metadata has been loaded; returns information about the video
| | **onLoadStart** | `() => void` |
  • Called when the video data is starting to load
| | **onProgress** | `(progress: VideoProgress) => void` |
  • Called periodically when the video is playing; reports progress information
| | **preload** | `'auto'\|'metadata'\|'none'` |
  • Indiciates which portion of the video should be pre-loaded when the component is mounted
| | **resizeMode** | `'contain'\|'cover'\|'stretch'` |
  • Determines how to resize the image if its natural size does not match the size of the container
| | **showControls** | `boolean` |
  • Displays controls for play, pause, etc.
| | **source** | `string \| number` |
  • Source of video (URL) or resource id as resolved by require() for react-native targets
| | **style** | `ViewStyleRuleSet \| ViewStyleRuleSet[]` |
  • See above for supported styles
| ### # VirtualListView \* This components supports a list of items within a scrolling area. The visible portion of the list is referred to as the “viewport”. ### Installation {% hint style="info" %} This component is not included by default, to use it import the following package: {% endhint %} {% tabs %} {% tab title="NPM" %} ```bash $ npm i react-ult-ext-virtuallistview ``` {% endtab %} {% tab title="Yarn" %} ``` $ yarn add react-ult-ext-virtuallistview ``` {% endtab %} {% endtabs %} ### Description The component is windowed, or virtualized, which means that items are rendered only when they are within the view port (or just above or below the view port). Unlike other list views (such as the ListView provided in React Native), this component supports lists of heterogeneous items with different heights and completely different types. Each item in the list is described by a VirtualizeItemInfo object. The list of items is specified by an ordered list passed in the itemList prop. When an item comes into view, it is rendered through the use of the renderItem callback. Additional fields can be added to the VirtualizeItemInfo by the caller as it sees fit. For example, it is sometimes useful to include additional identifying information such as an item type or an item-specific render method. A height must be specified for each item. By default, this height is assumed to be accurate and constant. If you do not know the height of the object or it may change, the height can be measured at runtime. This option is expensive, so it should be avoided if possible. It optionally supports animation of items when they are added, removed or moved within the list. When items are added before or after the visible region, it attempts to maintain the current position of the visible items, adjusting the scroll position and list height as necessary. ### Performance Techniques The VirtualListView component employs a number of tricks to improve performance. It uses a technique called “cell recycling” to minimize the number of mounts and unmounts. A cell is a container for a list item. When a cell is no longer visible, it can be temporarily hidden and then reused for the next item that becomes visible. This optimization is most effective when the recycled cell and its contents are used for an item that is similar in content. For this reason, callers need to specify a “template” field to identify similar items. In some cases, disabling cell recycling can be beneficial as recycled cells continue their regular react lifecycle even when not visible, which can lead to excessive background re-rendering in some cases. It also supports “overdraw” to render items above and below the view port. This minimizes chances that the user will scroll to a new portion of the list before new items can be rendered in that area. Overdraw is employed only after the view port is initially filled. This reduces the performance impact of rendering. It also limits the number of items it renders each time to avoid consuming too many cycles on the JavaScript thread. It supports a special mode where items are re-rendered only if the corresponding VirtualizeItemInfo changes. This mode requires that the renderItem method use only information within this object. To use this mode, set the skipRenderIfItemUnchanged prop to true. ### Props | Name | Type | Description | | ------------------------------ | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **animateChanges**? | `boolean` |
  • Should the list animate additions, removals and moves within the list?
| | **initialSelectedKey**? | `string` |
  • Should the list animate additions, removals and moves within the list?
| | **itemList** | `VirtualizeItemInfo[]` |
  • Ordered list of descriptors for items to display in the list.
| | **keyboardFocusScrollOffset**? | `number` |
  • Use this if you want to vertically offset the focused item from the top of the viewport when using keyboard navigation
| | **logInfo**? | `(textToLog: string) => void` |
  • Logging callback to debug issues.
| | **onItemSelected**? | `(item: ItemInfo) => void` |
  • Callback when an item is selected
| | **padding**? | `number` |
  • Optional padding around the scrolling content within the list
| | **renderItem** | `(renderDetails: VirtualListCellRenderDetails) => JSX.Element \| JSX.Element[]` |
  • Callback for rendering item when it becomes visible within view port
| | **showOverflow**? | `boolean` |
  • If true, allows each item to overflow its visible cell boundaries; by default, item contents are clipped to cell boundaries
| | **skipRenderIfItemUnchanged**? | `boolean` |
  • By default, Virtualize re-renders every item during the render
  • Setting this flag to true allows the list view to re-render only items from itemList whose descriptor has changed, thus avoiding unnecessary rendering. It uses \_.isEqual to perform this check. In this mode, renderItem should not depend on any external state, only on VirtualizeItemInfo, to render item
| | **testId** | `string` |
  • ID that can be used to identify the instantiated element for testing purposes
| | **keyboardDismissMode**? | `'none' \| 'interactive' \| 'on-drag'` |
  • Pass-through properties for scroll view
| | **keyboardShouldPersistTaps**? | `boolean` |
  • Pass-through properties for scroll view
| | **disableScrolling**? | `boolean` |
  • Pass-through properties for scroll view
| | **scrollsToTop**? | `boolean` |
  • Pass-through properties for scroll view
| | **disableBouncing**? | `boolean` |
  • Pass-through properties for scroll view
| | **scrollIndicatorInsets**? | `{top: number, left: number, bottom: number, right: number}` |
  • Pass-through properties for scroll view
| | **onLayout**? | `(e: ViewOnLayoutEvent) => void` |
  • Pass-through properties for scroll view
| | **scrollEventThrottle**? | `number` |
  • Pass-through properties for scroll view
| | **onScroll**? | `(scrollTop: number, scrollLeft: number) => void` |
  • Pass-through properties for scroll view
| | **scrollXAnimatedValue**? | `AnimatedValue` |
  • Pass-through properties for scroll view
| | **scrollYAnimatedValue**? | `AnimatedValue` |
  • Pass-through properties for scroll view
| ### # WebView \* This component displays HTML contents in an embedded browser control. You may have to specify sandbox settings depending on the source. ### Installation {% hint style="info" %} This component is not included by default, to use it import the following package: {% endhint %} {% tabs %} {% tab title="NPM" %} ```bash $ npm i react-ult-ext-webview ``` {% endtab %} {% tab title="Yarn" %} ``` $ yarn add react-ult-ext-webview ``` {% endtab %} {% endtabs %} ### Styles * No specialized styles ### Props | name | type | description | | ---- | ------------------------------------------ | ----------- | | | | | | | | | | | `'large' \| 'medium' \| 'small' \| 'tiny'` | | | | | | ### # App This service provides core methods associated with the application. It also exposes events for low-memory conditions and activity state changes. # Platform This service provides information about the OS or runtime platform on which the app is running. # International This service provides interfaces related to globalization (g11n) and internationalization (i18n). # Accessibility This service provides methods and events related to accessibility. Sometimes it’s important to announce state changes in the app for visually-impaired users. # Clipboard This service provides access to the device’s clipboard. # Storage This service provides a simple key-based local storage mechanism. If you need more powerful options to persist data, consider using the database extension. # Location This service provides access to the device’s geolocation data. # Linking This service handles deep linking in both incoming and outgoing directions. Incoming deep links instruct the app to take actions requested by other apps. # Alert This service displays an OS-specific alert over the top of the current screen. The appearance of the alert is dictated by the underlying OS platform. # Modal This service displays a view that overlays all other views rendered by the app, preventing any direct user interaction with the overlaid views. # Popup This service is a collection of methods that allow the app to display a view that overlays a portion of the screen. # StatusBar This service provides control over the device status bar at the top of the screen on mobile platforms. # UserInput This service provides events that are triggered when specific user input events occur. # UserInterface This service provides a variety of UI-related methods. # UserPresence This service provides information about whether the user is currently present. # Network \* This service provides access to the device’s network data. # Navigator \* This service provides a way for the app to present a virtual stack of “cards”, allowing the user to push or pop those cards onto the stack in an animated manner. ### Props | Name | Type | Description | | ------------------- | ---------------------------------------- | -------------------------------------------------------------------- | | cardStyle | `ViewStyleRuleSet` |
  • Style to apply to the card
| | renderScene | `(route: NavigatorRoute) => JSX.Element` |
  • Called to render the specified scene
| | transitionCompleted | `() => void` |
  • Called when a transition between cards is complete
|