Meta Developers

UIComponent is the base class for a UI panel, the scripting component to be attached to a UI Gizmo. It inherits all of the methods and properties from its parent Component class, with some UI-specialized additions.

class Welcome extends UIComponent {
  initializeUI() {
    return Text({text: 'Hello World'});
  }
}

initializeUI()

abstract initializeUI(): UINode;

This abstract method needs to be implemented and must return a UINode object. A UINode is usually constructed by a tree of base components and user-defined components.

This method is called only once, before the start() method of the component. It is common to do component setup inside initializeUI(), e.g. connecting event handlers.

panelHeight

readonly panelHeight?: number;

Default value: 500

This property determines the number of pixels of the UI panel in the horizontal direction. You cannot change it after the panel is initialized.

panelWidth

readonly panelWidth?: number;

Default value: 500

This property determines the number of pixels of the UI panel in the vertical direction. You cannot change it after the panel is initialized.

Binding

Binding class is the container for a variable value used by the UI components. It can be passed to the supported props and styles of a component in place of an explicit value. When the value of the Binding is updated at runtime, the UI panels that use it will be automatically re-rendered to reflect the change.

const binding = new Binding(initialValue);
binding.set(newValue);

A crucial concept is the difference between the “global value” and the “player values”.

Global value refers to the value that a player would see by default. A player would see the global value, unless there is a player value set for that player. When a new player joins the world, they will also receive the global values as their initial values.
Player value refers to the value you set for a particular player. When a player value is set for a player, that player will see the player value, instead of the global value like everyone else. Conceptually, it can be seen as a “deviation” from the global value.

constructor()

constructor(value: T): void;

Parameters:

Name	Type	Description
value (Required)	`Generic <T>`	The initial value of the Binding.

When you instantiate a new Binding object, you need to provide an initial value as the argument.

set()

set(value: T \| (pref: T) => T, players?: Player[]): void;

Parameters:

Name	Type	Description
value (Required)	`T \\| (prev: T) => T`	The new value of the Binding, or an update function.
players (Optional)	`Player[]`	An optional array of players to send the value update to. If not provided, every player will receive the value update.

This method is used to update the Binding. It sets a new value to the Binding and enqueues a re-render for all the UI panels that use this Binding. The UI will not update if the new value and the old value are the same.

The first parameter can either be an explicit value, or an update function in the case that the new value is calculated using the previous value. The function will receive the previous value, and should return the updated value. Functional update respects player values. It will mutate both the global value and each player value.

The second parameter is an optional array of players, and is used to determine whether the global value or the player value should be updated.

When it is not provided, every player will receive the value update. The global value will be updated, and any player values will be cleared.
When an array of players is provided, only those players will get the new value. They will get a new player value, but the global value is unchanged, so other players will be left unaffected.

reset()

reset(players?: Player[]): void;

Parameters:

Name	Type	Description
players (Optional)	`Player[]`	An optional array of players to reset the value for. If not provided, all player values are cleared; if provided, only those players in the array will be reset.

This method is used to reset the player value of a Binding, if any, back to the global value. Like the set() method, this will also enqueue a re-render for all the UI panels that use this Binding.

Just like the set() method, reset() also takes an optional array of players.

When it is not provided, all of the player values are cleared.
When it is provided, only those players will have their player values reset and receive the global value. If any other players have player values, their player values are unaffected.

derive()

derive<R>(mapFn: (value: T) => R): DerivedBinding<R>;

Parameters:

Name	Type	Description
mapFn	`(value: T) => any`	A function that specifies how the derived value is calculated from this Binding.

This method is used to derive a new value for the Binding, using the provided map function. The function takes the value of this Binding as a parameter, and returns the derived value.

The return type is a DerivedBinding. It functions a lot like a Binding, and can be passed to the supported props and styles of a component in place of an explicit value. However, it does not have a set() method, and its value is purely derived from the Binding that it depends on. When the value of the dependency Binding changes, the derived value is also automatically updated, which will also enqueue a re-render.

The derived value respects any player value that the dependency Binding might have. The map function will be used to derive both the global value and each player value.

There is also a static derive() method, where the new value is derived from multiple Bindings:

static derive<R>(
  dependencies: Binding<any>[],
  mapFn: (...args: any[]) => R,
): DerivedBinding<R>;

Parameters:

Name	Type	Description
dependencies	`Binding<any>[]`	The array of Bindings to depend on.
mapFn	`(...args: any[]) => any`	A function that specifies how the derived value is calculated from the Bindings that it depends on.

The first parameter is an array of Bindings, and the second parameter is a map function that takes the value of each Binding, in the given order, and returns the derived new value. The Bindings and the parameters of the map function must have the same types.

AnimatedBinding

AnimatedBinding class is a special type of Binding and is similar to the Binding class in that it also contains a variable number value that can be passed to the Bindable styles in place of an explicit value, and can be updated at runtime to trigger an automatic re-render. AnimatedBinding is different from Binding in that:

AnimatedBinding can only take number values, unlike Binding which can take any type.
AnimatedBinding has no derive() method, but a more restrictive interpolate() method.
In addition to plain numbers and update functions, the set() method can also take an Animation object to define an animated transition to the new value.

const anim = new AnimatedBinding(initialValue);
anim.set(Animation.timing(newValue));

constructor()

constructor(value: number): void;

Parameters:

Name	Type	Description
value (Required)	`number`	The initial value of the Animated Binding.

Similar to the regular Bindings, when you instantiate a new Animated Binding object, you need to provide an initial value as the argument.

set()

set(
  value: number | (pref: number) => T | Animation,
  onEnd?: (finished: boolean, player: Player) => void,
  players?: Player[],
): void;

Parameters:

Name	Type	Description
value (Required)	`number \\| (prev: number) => number \\| Animation`	The new value of the Animated Binding, an update function, or an Animation object.
onEnd (Optional)	`(finished: boolean, player: Player) => void`	Completion callback function that will be called after the animation is done, whether it finishes running normally, is interrupted or is stopped. Ignored when `value` is not an Animation object.
players (Optional)	`Player[]`	An optional array of players to send the value update to. If not provided, every player will receive the value update.

This method is used to update the Animated Binding, with or without an animation. The first parameter can either be an explicit value, or an update function, or an Animation object.

When the first parameter is an explicit value or an update function, the behavior is the same as regular Bindings. The value of the Animated Binding is updated immediately without any animated transition. Similar to regular Bindings, the update function calculates the new value from the previous value, and respects player values by mutating both the global value and each player value.

When the first parameter is an Animation object, the Animated Binding value will smoothly transition to the end value using the specified animation.

The second parameter is an optional completion callback. When the first parameter is not an Animation, this callback is ignored; when the first parameter is an Animation, this callback will be invoked after the animation is done, either when the animation finishes running normally, or when it is interrupted or stopped before it could finish. The completion callback function is invoked with two parameters:

Name	Type	Description
finished	`boolean`	A boolean flag to indicate whether the animation finishes running normally (value will be `true`), or is interrupted or stopped before it could finish (value will be `false`).
player	`Player`	The player client that this animation completion event is sent from.

To play multiple animations for the same Animated Binding in a sequence, it is better to use the Animation.sequence() modifier rather than starting the next animation in the onEnd completion callback, for performance reasons. To play an animation or update value for a different Binding, do so in the onEnd completion callback.

The third parameter is an optional array of players to determine whether the global value or the player value should be updated. It has the same behavior as the regular Bindings.

When an array of players is not provided, every player will receive the value update or see the animation. The global value will be updated, and any player values will be cleared.
When an array of players is provided, only those players will get the new value or see the animation. They will get a new player value, but the global value is unchanged, so other players will be left unaffected.

reset()

reset(players?: Player[]): void;

Parameters:

Name	Type	Description
players (Optional)	`Player[]`	An optional array of players to reset the value for. If not provided, all player values are cleared; if provided, only those players in the array will be reset.

This method is used to reset the player value back to the global value, and has the same behavior as the regular Bindings. Resetting an Animated Binding can only be an immediate update and cannot take an Animation. Similar to set(), it also takes an optional array of players.

When an array of players is not provided, all of the player values are cleared.
When an array of players is provided, only those players will have their player values reset and receive the global value. If any other players have player values, their player values are unaffected.

stopAnimation()

stopAnimation(players?: Player[]): void;

Parameters:

Name	Type	Description
players (Optional)	`Player[]`	An optional array of players to stop the animation for. If not provided, animations are stopped for all players; if provided, animations are stopped only for those players in the array.

This method is used to stop the animation currently in progress. If there is no animation in progress, the call will have no effect. Similar to set(), it also takes an optional array of players.

When an array of players is not provided, animations will be stopped for all of the players.
When an array of players is provided, animations will be stopped only for those players in the array.

interpolate()

interpolate<T extends number | string | Color>(
  inputRange: number[],
  outputRange: T[],
): AnimatedInterpolation<T>;

Parameters:

Name	Type	Description
inputRange	`number[]`	An array of numbers specifying the input range of the interpolation.
outputRange	`number[] \\| string[] \\| Color[]`	An array of numbers, strings, or `Color` objects specifying the output range of the interpolation.

This method is used to map the value of an Animated Binding to a new range with linear interpolation. It takes two arrays as the input and output ranges, and returns the interpolated value.

The return type is an AnimatedInterpolation. It functions a lot like an Animated Binding, and can be passed to the supported styles of a component in place of an explicit value. However, it does not have a set() method, and its value completely depends on the Animated Binding that it interpolate from. Conceptually it is very similar to the DerivedBinding class, although they are constructed differently.

The first parameter is the input range, represented by an array of numbers:

It must have at least 2 elements.
It must be monotonically non-decreasing.
It must not contain positive or negative infinity.

The second parameter is the output range, represented by an array of numbers, strings, or Color objects:

It must have the same length as the input range.
It must not contain positive or negative infinity.
When the elements are strings or Color objects, all elements must be in the same category.
- If the elements are suffixed numbers (a number with a unit, like "5.5%", "90deg"), there must be no space between number and suffix, and all elements must have the same suffix.
- If the elements are colors, different color formats can be used in the same array.

When the length of the input and output ranges is greater than 2, the Animated Binding is interpolated with multiple range segments. Within each segment, the value is interpolated linearly.

When an input number is outside of the input range, it will linearly extrapolate beyond the ranges given. To achieve a clamped extrapolation, you can add a small flat segment outside of the range.

Animation

Animation class represents a simple or composite animation, which can be passed into the set() method of an Animated Binding to start an animation.

anim.set(Animation.repeat(Animation.timing(endValue, {duration: 300})));

timing()

static timing(
  endValue: number | (prev: number) => number,
  config?: {
    duration?: number,
    easing?: Easing,
  },
): Animation;

Parameters:

Name	Type	Description
endValue	`number \\| (prev: number) => number`	The target value of the Animated Binding, or an update function.
config (Optional)	`{duration?: number, easing?: Easing}`	The configuration of the timing Animation to specify duration and easing function.

This method creates an animation based on duration and easing curve.

The first parameter can either be an explicit number value, or an update function. Functional update works the same way as in the set() method.

The second parameter is an optional configuration object. If not provided, all default values will be used.

Name	Type	Description
duration	`number`	[Default: `500`] Length of the animation (in milliseconds).
easing	`Easing`	[Default: `Easing.inOut(Easing.ease)`] An easing function to define the animation curve.

Easing

An easing function allows you to fine-tune the animation over the specified time duration. Because the entire Animation object must be serializable, we do not support custom easing functions. Custom UI provides a selection of built-in easing functions in the Easing module:

back provides a simple animation where the object goes slightly back before moving forward.
bezier(x1: number, y1: number, x2: number, y2: number) provides a bezier curve.
bounce provides a bouncing animation.
circle provides a circular function.
cubic provides a cubic function.
ease provides a simple inertial animation. Equivalent to bezier(0.42, 0, 1, 1).
elastic(bounciness?: number) provides a simple spring interaction.
exp provides an exponential function.
linear provides a linear function. Equivalent to bezier(0, 0, 1, 1).
poly(n: number) can be used to implement quartic, quintic, and other higher power functions.
quad provides a quadratic function.
sin provides a sinusoidal function.

Custom UI also provides the following helpers to modify other easing functions:

in(easing: Easing) runs an easing function forwards.
inOut(easing: Easing) makes any easing function symmetrical.
out(easing: Easing) runs an easing function backwards.

sequence()

static sequence(...animations: Animation[]): Animation;

Parameters:

Name	Type	Description
...animations	`...Animation[]`	Any number of Animation objects to be chained in the sequence.

This method creates an animation that chains a few animations together in a sequence.

For performance reasons, it is better to use the Animation.sequence() modifier rather than starting the next animation in the onEnd completion callback if you want to play multiple animations for the same Animated Binding in a sequence. However, to chain animations for different Animated Bindings in a sequence, you will have to do so in the onEnd completion callback.

When chaining animations with functional updates in a sequence, the effect is cumulative. The update function of the next animation will be applied on the end value of the previous animation.

repeat()

static repeat(animation: Animation, iterations?: number): Animation;

Parameters:

Name	Type	Description
animation	`Animation`	An Animation object to repeat.
iterations (Optional)	`number`	[Default: `-1`] The number of times the animation is going to be repeated. A negative value (e.g. -1) will repeat the animation indefinitely until it is interrupted or stopped.

This method creates an animation that repeats the given animation the given number of times or runs it indefinitely. Before each iteration of the animation, the Animated Binding will be reset to the default value when it is created.

The second parameter is an optional number that indicates the number of iterations that the animation should repeat. If not provided, or if the number is a negative value, the animation will repeat indefinitely, until it is interrupted or stopped.

When repeating an animation with functional update, the effect is not accumulative. The same animation with the same start and end values will be replayed.

delay()

static delay(time: number, animation: Animation): Animation;

Parameters:

Name	Type	Description
time	`number`	Duration (in milliseconds) before the animation starts.
animation	`Animation`	An Animation object to delay.

This method creates an animation that starts the given animation after a delay.

Type Definitions

UIChildren

type UIChildren = UINode \| UINode[];

Bindable

type Bindable<T> = T \| Binding<T> \| DerivedBinding<T>;

Callback

type Callback = (player: Player) => void;

ColorValue

type ColorValue = string \| Color;

Specifically, when the color is represented by a string, the following formats are allowed:

RGB Hexadecimal - e.g. “#53575E”,
RGB (Red, Green, Blue) - e.g. “rgb(100, 50, 0)”,
RGBA (Red, Green, Blue, Alpha) - e.g. “rgba(255, 105, 180, 0)”,
HSL (Hue, Saturation, Lightness) - e.g. “hsl(0, 50%, 50%)”,
Named colors - e.g. “dodgerblue”.

Components

Custom UI feature provides a number of base components for you to build more complicated user-defined components and UI panels. A component is essentially a function that takes an object of props and returns a UINode. For the following documentation, we list the supported props and their usages.

UINode

UINode class is the opaque data structure representing an UI element. It is the returned value type for all components. You cannot instantiate a new UINode directly; a UINode can only be created through the provided components.

if()

static if(
  condition: Bindable<boolean>,
  trueComponent?: UIChildren,
  falseComponent?: UIChildren,
): UINode;

Parameters:

Name	Type	Description
condition (Required)	`Bindable<boolean>`	The condition to check.
trueComponent (Optional)	`UIChildren`	The UI element to render when the `condition` is true. Optional. If not provided (or when it is `undefined`), nothing will be rendered when the `condition` is true.
falseComponent (Optional)	`UIChildren`	The UI element to render when the `condition` is false. Optional. If not provided, nothing will be rendered when the `condition` is false.

This static method is used to conditionally render the UI element based on a condition. Although the return type is a UINode, it is not really a node in the DOM tree. The components in the argument, if rendered, will appear in the DOM tree.

View

View is the most fundamental component for building a UI. It is a container for other components and can have zero to many children of any type. It supports the flex layout and many styles.

const view = View({
  children: Text({text: 'Hello World'}),
  style: {alignItems: 'center', height: 200},
});

Props:

Name	Type	Description
children	`UIChildren`	The nested children components. Can be a single `UINode` or an array of `UINode`s.
style	`ViewStyle`	The style applied to the component.

Text

Text component displays text.
const text = Text({
  text: 'Hello World',
  style: { color: 'red', fontFamily: 'Anton' },
});

Props:

Name	Type	Description
numberOfLines	`number`	The number of lines to display. If the text is too long, it will be truncated with ellipsis at the end.
style	`TextStyle`	The style applied to the component.
text (Required)	`Bindable<string>`	The text to display.

Image

Image component displays an image from different types of sources, including network images, VR photos, and texture assets.

const image = Image({
  source: ImageSource.fromTextureAsset(asset),
  style: {height: 200, width: 200},
});

Props:

Name	Type	Description
source	`Bindable<ImageSource>`	The source of the image, constructed from the static methods of the ImageSource class. Currently supported sources include texture assets.
style	`ImageStyle`	The style applied to the component.

ImageSource

ImageSource class defines the source of an image used by the Image components, which can be constructed by calling one of its static methods.

fromTextureAsset()

static fromTextureAsset(texture: TextureAsset): ImageSource;

Parameters:

Name	Type	Description
texture (Required)	`TextureAsset`	The `Asset` object of the texture.

Pressable

Pressable is an interactive component that can receive player input events. It is a wrapper and can have children components inside.

const button = Pressable({
  children: Text({text: 'Click Me'}),
  onClick: () => {
    eventHandler();
  },
});

Props:

Name	Type	Description
children	`UIChildren`	The nested children components. Can be a single `UINode` or an array of `UINode`s.
disabled	`Bindable<boolean>`	[Default: ‘false’] If `true`, `onClick` and `onRelease` callbacks are disabled.
onClick	`Callback`	Called immediately after `onRelease`.
onEnter	`Callback`	Called when the player moves the raycast or the mouse into the component.
onExit	`Callback`	Called when the player moves the raycast or the mouse out of the component.
onPress	`Callback`	Called when the player presses down the controller trigger or the mouse.
onRelease	`Callback`	Called when the player releases the controller trigger or the mouse.
propagateClick	`boolean`	[Default: `true`] Events propagate to the parent by default. If `false`, event propagations are stopped.
style	`ViewStyle`	The style applied to the component.

ScrollView

Just like its React Native parent with the same name, ScrollView is the scrollable version of View. It supports horizontal and vertical scrolling, as well as distinct styling for the view itself and underlying content wrapper.

const scrollView = ScrollView({
  children: Text({text: 'Content'}),
  contentContainerStyle: {height: 1200, alignItems: 'center'},
  horizontal: true,
  style: {height: 200, width: 200},
});

Props:

Name	Type	Description
children	`UIChildren`	Identical to View, this is for nested child components. Can be a single `UINode` or an array of `UINode`s.
contentContainerStyle	`ViewStyle`	The style applied to the content container which wraps all the child nodes.
horizontal	`boolean`	Optional flag to determine whether the view should scroll horizontally rather than vertically. Default is `false`.
style	`ViewStyle`	The style applied to the ScrollView frame.

Styles

LayoutStyle

Name	Type	Description
display	`Bindable<'none' \\| 'flex'>`	[Default: `'flex'`] Similar to `display` in CSS, but only supports ‘none’ and ‘flex’. The display mode of the UI element. `none`: The UI element is not rendered. `flex`: The UI element is displayed as a block. This is the default value.
height	`Bindable<number \\| string>`	Similar to `height` in CSS, but only supports points and percentages. Ems and other units are not supported.
width	`Bindable<number \\| string>`	Similar to `width` in CSS, but only supports points and percentages. Ems and other units are not supported.
bottom	`number \\| string`	Similar to `bottom` in CSS, but only supports points and percentages. Ems and other units are not supported.
end	`number \\| string`	Equivalent to `right` when `direction` is `'ltr'`. Equivalent to `left` when `direction` is `'rtl'`.
left	`number \\| string`	Similar to `left` in CSS, but only supports points and percentages. Ems and other units are not supported.
right	`number \\| string`	Similar to `right` in CSS, but only supports points and percentages. Ems and other units are not supported.
start	`number \\| string`	Equivalent to `left` when `direction` is `'ltr'`. Equivalent to `right` when `direction` is `'rtl'`.
top	`number \\| string`	Similar to `top` in CSS, but only supports points and percentages. Ems and other units are not supported.
minWidth	`number \\| string`	Similar to `min-width` in CSS, but only supports points and percentages. Ems and other units are not supported.
maxWidth	`number \\| string`	Similar to `max-width` in CSS, but only supports points and percentages. Ems and other units are not supported.
minHeight	`number \\| string`	Similar to `min-height` in CSS, but only supports points and percentages. Ems and other units are not supported.
maxHeight	`number \\| string`	Similar to `max-height` in CSS, but only supports points and percentages. Ems and other units are not supported.
margin	`number \\| string`	Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
marginBottom	`number \\| string`	Works like `margin-bottom` in CSS.
marginEnd	`number \\| string`	Equivalent to `marginRight` when `direction` is `'ltr'`. Equivalent to `marginLeft` when `direction` is `'rtl'`.
marginHorizontal	`number \\| string`	Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`.
marginLeft	`number \\| string`	Works like `margin-left` in CSS.
marginRight	`number \\| string`	Works like `margin-right` in CSS.
marginStart	`number \\| string`	Equivalent to `marginLeft` when `direction` is `'ltr'`. Equivalent to `marginRight` when `direction` is `'rtl'`.
marginTop	`number \\| string`	Works like `margin-top` in CSS.
marginVertical	`number \\| string`	Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`.
padding	`number \\| string`	Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
paddingBottom	`number \\| string`	Works like `padding-bottom` in CSS.
paddingEnd	`number \\| string`	Equivalent to `paddingRight` when `direction` is `'ltr'`. Equivalent to `paddingLeft` when `direction` is `'rtl'`.
paddingHorizontal	`number \\| string`	Setting `paddingHorizontal` has the same effect as setting both `paddingLeft` and `paddingRight`.
paddingLeft	`number \\| string`	Works like `padding-left` in CSS.
paddingRight	`number \\| string`	Works like `padding-right` in CSS.
paddingStart	`number \\| string`	Equivalent to `paddingLeft` when `direction` is `'ltr'`. Equivalent to `paddingRight` when `direction` is `'rtl'`.
paddingTop	`number \\| string`	Works like `padding-top` in CSS.
paddingVertical	`number \\| string`	Setting `paddingVertical` has the same effect as setting both `paddingTop` and `paddingBottom`.
position	`'absolute' \\| 'relative'`	[Default: `'relative'`] Similar to `position` in CSS, but everything is set to `'relative'` by default, so ‘absolute’ positioning is always relative to the parent.
flexDirection	`'row'` `'row-reverse'` `'column'` `'column-reverse'`	[Default: `'column'`] Works like `flex-direction` in CSS, except the default is ‘column’. Controls the direction of the main axis, in which the children are stacked.
flexWrap	`'nowrap'` `'wrap'` `'wrap-reverse'`	[Default: `'nowrap'`] Works like `flex-wrap` in CSS. Controls whether children can wrap around after they hit the end of a flex container.
justifyContent	`'flex-start'` `'flex-end'` `'center'` `'space-between'` `'space-around'` `'space-evenly'`	[Default: ‘flex-start’] Works like `justify-content` in CSS. Aligns children in the main direction (along the main axis). For example, if children are flowing vertically, `justifyContent` controls how they align vertically.
alignContent	`'flex-start'` `'flex-end'` `'center'` `'stretch'` `'space-between'` `'space-around'`	[Default: `'flex-start'`] Works like `align-content` in CSS. Aligns rows or columns in the cross direction (perpendicular to the main axis). Only works if `flexWrap` is enabled and there are multiple rows or columns.
alignItems	`'flex-start'` `'flex-end'` `'center'` `'stretch'` `'baseline'`	[Default: `'stretch'`] Works like `align-items` in CSS. Aligns children within a row or column in the cross direction (perpendicular to the main axis). For example, if children are flowing vertically, `alignItems` controls how they align horizontally.
alignSelf	`'auto'` `'flex-start'` `'flex-end'` `'center'` `'stretch'` `'baseline'`	[Default: `'auto'`] Works like `align-self` in CSS. Controls how a child aligns in the cross direction (perpendicular to the main axis), overriding the `alignItems` of the parent.
overflow	`'visible' \\| 'hidden'`	[Default: `'visible'`] Works like `overflow` in CSS. Controls how children are measured and displayed. `'hidden'` causes views to be clipped.
flex	`number`	`flex` does not work the same way as in CSS. `flex` is a number rather than a string. When `flex` is a positive number, the component is flexible and will be sized proportional to its `flex` value. So a component with `flex` set to ‘2’ will take twice the space as a component with `flex` set to ‘1’. `flex: X` (where `X` is a positive number) equates to `flexGrow: X, flexShrink: 1, flexBasis: 0`. When `flex` is ‘0’ , the component is inflexible and is sized according to width and height. When flex is ‘-1’, the component is normally sized according to width and height. However, if there’s not enough space, the component will shrink to its `minWidth` and `minHeight`.
flexGrow	`number`	[Default: ‘0’] Works like `flex-grow` in CSS. Accepts a float number >= 0. Describes how the remaining space in the container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
flexShrink	`number`	[Default: ‘0’] Works like `flex-shrink` in CSS. Accepts a float number >= 0. Describes how to shrink children along the main axis when the total size of the children overflows the size of the container. A container will shrink its children weighted by the children’s `flexShrink` values. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together.
flexBasis	`number \\| string`	Works like `flex-basis` in CSS. Specifies the default size of an item along the main axis of the container, that is, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
aspectRatio	`number`	Controls the size of the undefined dimension of a component. It takes min/max dimensions into account. If one of width/height is set, aspect ratio controls the size of the unset dimension. If flex basis/grow/shrink is set, aspect ratio controls the size of the node in the cross axis if unset.
zIndex	`number`	Works like `z-index` in CSS. Controls which components display on top of others – components with a larger `zIndex` will render on top. If `zIndex` are not specified, components render according to their order in the document tree – later components draw over earlier ones. `zIndex` can be used if you don’t want this default behavior.
layoutOrigin	`[number, number]`	[Default: `'[0, 0]'`] The origin of the UI element when `position` is `'absolute'`, where `[0, 0]` is the top left of the element and `[1, 1]` is the bottom right of the element.
direction	`'inherit'` `'ltr'` `'rtl'`	[Default: `'inherit'`] Specifies the directional flow of the user interface.

BorderStyle

Name	Type	Description
borderColor	`Bindable<ColorValue>`	Works like `border-color` in CSS. The color of the border.
borderRadius	`number`	Works like `border-radius` in CSS. The radius of the border.
borderBottomLeftRadius	`number`	Works like `border-bottom-left-radius` in CSS. The radius of the bottom left corner.
borderBottomRightRadius	`number`	Works like `border-bottom-right-radius` in CSS. The radius of the bottom right corner.
borderTopLeftRadius	`number`	Works like `border-top-left-radius` in CSS. The radius of the top left corner.
borderTopRightRadius	`number`	Works like `border-top-right-radius` in CSS. The radius of the top right corner.
borderWidth	`Bindable<number>`	Works like `border-width` in CSS, but only supports points. The width of the border.
borderBottomWidth	`number`	Works like `border-bottom-width` in CSS. The width of the bottom border.
borderEndWidth	`number`	Equivalent to `borderRightWidth` when `direction` is `'ltr'`. Equivalent to `borderLeftWidth` when `direction` is `'rtl'`.
borderLeftWidth	`number`	Works like `border-left-width` in CSS. The width of the left border.
borderRightWidth	`number`	Works like `border-right-width` in CSS. The width of the right border.
borderStartWidth	`number`	Equivalent to `borderLeftWidth` when `direction` is `'ltr'`. Equivalent to `borderRightWidth` when `direction` is `'rtl'`.
borderTopWidth	`number`	Works like `border-top-width` in CSS. The width of the top border.

ShadowStyle

Name	Type	Description
shadowColor	`Bindable<ColorValue>`	The drop color of the shadow.
shadowFalloff	`'linear'` `'sqrt'` `'sigmoid'`	The falloff function, or fading, of the shadow.
shadowOffset	`[number, number]`	The offset of the shadow in [x, y] format.
shadowOpacity	`Bindable<number>`	The opacity of the shadow. The number is multiplied by the color’s alpha component, and should be in the range from ‘0.0’ to ‘1.0’.
shadowRadius	`number`	The blur radius of the shadow.
shadowSpreadRadius	`number`	The radius by which the shadow expands or shrinks under the component. May take a negative number.

TransformStyle

Name	Type	Description
transform	`Array<{rotate:Bindable<string>}` `\\| {scale:Bindable<number>}` `\\| {scaleX:Bindable<number>}` `\\| {scaleY:Bindable<number>}` `\\| {translate:[Bindable<number>,Bindable<number>]}` `\\| {translateX:Bindable<number>}` `\\| {translateY:Bindable<number>}` `\\| {skewX:Bindable<string>}` `\\| {skewY:Bindable<string>}`	`transform` accepts an array of transformation objects. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. `rotate`: Rotate the element around the `transformOrigin`. Value requires a string expressed in degrees (e.g. ‘45deg’ ) or radians (e.g. ‘0.7854rad’). `scale`: Scale the element uniformly by the given multiplier, with the `transformOrigin` being the fixed point. Equivalent to providing the same value to both `scaleX` and `scaleY`. `scaleX`: Scale the element horizontally by the given multiplier. `scaleY`: Scale the element vertically by the given multiplier. `translate`: Move the element by the given x and y values in [x, y] format. Equivalent to providing the values to `translateX` and `translateY` independently. `translateX`: Move the element horizontally by the given value in pixels. `translateY`: Move the element vertically by the given value in pixels. `skewX`: Skew the element horizontally by the given angle, represented in degrees or radians. `skewY`: Skew the element vertically by the given angle, represented in degrees or radians.
transformOrigin	`[number \\| string, number \\| string]`	[Default: [‘50%’, ‘50%’]] The origin point of the transform, specified as an [x, y] array, where [0, 0] denotes the top left corner of the UI element. Each component can be a number in pixels or a percentage string.

ViewStyle

Inherits LayoutStyle, BorderStyle, ShadowStyle, and TransformStyle.

Name	Type	Description
backgroundColor	`Bindable<ColorValue>`	Works like `'background-color'` in CSS. The background color of the component.
backgroundClip	`'border-box' \\| 'padding-box'`	[Default: `'border-box'`] Controls whether to render the background behind the border. Useful when the border color is transparent.
opacity	`Bindable<number>`	Set an opacity for the component. The number should be in the range from ‘0.0’ to ‘1.0’.
gradientColorA	`Bindable<ColorValue>`	The starting color of the gradient background.
gradientColorB	`Bindable<ColorValue>`	The ending color of the gradient background.
gradientXa	`number \\| string`	The x component of the starting position (corresponding to gradientColorA) of the gradient background. The value is a percentage as a number (from ‘0.0’ to ‘1.0’) or a string (from ‘0%’ to ‘100%’).
gradientYa	`number \\| string`	The y component of the starting position (corresponding to gradientColorA ) of the gradient background. The value is a percentage as a number (from ‘0.0’ to ‘1.0’) or a string (from ‘0%’ to ‘100%’).
gradientXb	`number \\| string`	The x component of the ending position (corresponding to gradientColorB) of the gradient background. The value is a percentage as a number (from ‘0.0’ to ‘1.0’) or a string (from ‘0%’ to ‘100%’).
gradientYb	`number \\| string`	The y component of the ending position (corresponding to gradientColorB) of the gradient background. The value is a percentage as a number (from ‘0.0’ to ‘1.0’) or a string (from ‘0%’ to ‘100%’).
gradientAngle	`string`	The gradient direction, pointing from the ending position to the starting position (gradientColorA is in the direction of gradientAngle). Default is ‘0deg’, which is equivalent to gradientYa: 0, gradientYb: 1. The value is represented in degrees.

TextStyle

Inherits ViewStyle. Unfortunately, italics are not supported by the framework at the moment. Also, there are only a limited number of custom fonts available at the moment.

Name	Type	Description
color	`Bindable<ColorValue>`	[Default: `'white'`] The color of the text.
fontFamily	`string`	[Default: `'Roboto'`] The font family of the text.
fontSize	`Bindable<number>`	[Default: `'20'`] The font size of the text.
fontWeight	`Bindable<'normal'` `\\| 'bold'` `\\| '100'` `\\| '200'` `\\| '300'` `\\| '400'` `\\| '500'` `\\| '600'` `\\| '700'` `\\| '800'` `\\| '900' >`	[Default: `'normal'`] The font weight. Not all fonts have all the weight variations. If the specified variation does not exist, it will fallback to the closest one.
letterSpacing	`number`	The spacing between the characters of the text. By default there is no extra letter spacing.
lineHeight	`number`	The height of each line in the text.
textAlign	`'auto' \\| 'left' \\| 'right' \\| 'center'`	The alignment of the text.
textAlignVertical	`'auto' \\| 'top' \\| 'bottom' \\| 'center'`	The vertical alignment of the text.
textDecorationLine	`Bindable<'none' \\| 'underline' \\| 'line-through' \\| 'underline line-through' >`	Additional text decorations.
textShadowColor	`Bindable<[ColorValue]>`	The color of the text shadow. Text shadow is only drawn when a nonzero textShadowOffset is set.
textShadowOffset	`[number, number]`	The offset of the text shadow, in pixels, in [x, y] format.
textShadowRadius	`number`	The blur radius of the text shadow. Text shadow is only drawn when textShadowOffset is set.
whiteSpace	`'normal' \\| 'pre-line' \\| 'pre-wrap'`	Additional space if needed for justification.

Available Fonts

Font Family	Weight Variations	Preview
Anton	‘normal’/’400’
Bangers	‘normal’/’400’
Kallisto	‘bold’/’700’
Optimistic	‘normal’/’400’
	‘500’
	‘bold’/’700’
Oswald	‘normal’/’400’
Roboto	‘100’
	‘300’
	‘normal’/’400’
	‘500’
	‘bold’/’700’
	‘900’
Roboto-Mono	‘normal’/’400’
	‘500’
	‘bold’/’700’

ImageStyle

Inherits ViewStyle.

Name	Type	Description
resizeMode	`'cover' \\| 'contain' \\| 'stretch' \\| 'center' \\| 'repeat'`	[Default: `'cover'`] Determines how to resize the image when the frame doesn’t match the raw image dimensions. `cover`: Scale the image uniformly (maintain the aspect ratio) so that at least one of width and height will be equal to the corresponding dimension of the view, and the other will be larger. `contain`: Scale the image uniformly (maintain the aspect ratio) so that both width and height will be equal to or less than the corresponding dimension of the view. `stretch`: Scale width and height independently, which may change the aspect ratio of the source. `center`: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view. `repeat`: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio if it is smaller than the view, and will be scaled down uniformly so that it is contained in the view if it is larger than the view.
tintColor	`Bindable<ColorValue>`	Changes the color of all the non-transparent pixels to the `tintColor`.
tintOperation	`'replace' \\| 'multiply'`	Changes how the tint color is applied to the original image source.