Valores aceitos para o componente View.

Atente-se que algumas propriedades são herdadas de outros conjuntos

Veja abaixo um exemplo utilizando algumas as propriedades:

Hierarchy

Properties

alignContent?: "center" | "start" | "end" | "between" | "around"

O alinhamento do conteúdo ao longo do eixo transversal.

alignItems?: "center" | "start" | "end" | "between" | "around"

O alinhamento dos itens ao longo do eixo transversal.

alignSelf?: "center" | "start" | "end" | "between" | "around"

O alinhamento do próprio item ao longo do eixo transversal.

backgroundAttachment?: "scroll" | "fixed" | "local" | "none"

A fixação do plano de fundo.

backgroundBlendMode?: "normal" | "multiply" | "hard-light" | "difference"

O modo de mesclagem do plano de fundo.

backgroundClip?: "border-box" | "padding-box" | "content-box" | "text"

A área de recorte do plano de fundo.

backgroundColor?: "none" | "primary-100" | "primary-300" | "primary-500" | "primary-700" | "primary-900" | "secondary-100" | "secondary-300" | "secondary-500" | "secondary-700" | "secondary-900" | "tertiary-100" | "tertiary-300" | "tertiary-500" | "tertiary-700" | "tertiary-900" | "accent-100" | "accent-300" | "accent-500" | "accent-700" | "accent-900" | "neutral-900" | "neutral-700" | "neutral-500" | "neutral-300" | "neutral-100" | "positive-700" | "positive-300" | "warning-700" | "warning-300" | "negative-700" | "negative-300" | "support-01" | "support-02" | "support-03"

Cor de fundo do componente

backgroundImage?: any

A imagem de plano de fundo.

backgroundOrigin?: "border-box" | "padding-box" | "content-box"

A origem do posicionamento do plano de fundo.

backgroundPosition?: string

A posição do plano de fundo.

backgroundPositionX?: string

A posição horizontal do plano de fundo.

backgroundPositionY?: string

A posição vertical do plano de fundo.

backgroundRepeat?: "repeat" | "space" | "round" | "no-repeat" | "repeat-x" | "repeat-y"

A repetição do plano de fundo.

backgroundSize?: "cover" | "contain" | "auto"

O tamanho do plano de fundo.

basis?: number | "auto"

A base do item flexível.

border?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda.

borderBottomWidth?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda inferior.

borderColor?: "none" | "primary-100" | "primary-300" | "primary-500" | "primary-700" | "primary-900" | "secondary-100" | "secondary-300" | "secondary-500" | "secondary-700" | "secondary-900" | "tertiary-100" | "tertiary-300" | "tertiary-500" | "tertiary-700" | "tertiary-900" | "accent-100" | "accent-300" | "accent-500" | "accent-700" | "accent-900" | "neutral-900" | "neutral-700" | "neutral-500" | "neutral-300" | "neutral-100" | "positive-700" | "positive-300" | "warning-700" | "warning-300" | "negative-700" | "negative-300" | "support-01" | "support-02" | "support-03"

Cor das bordas do componente

borderLeftWidth?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda esquerda.

borderRadius?: "none" | "micro" | "small" | "medium" | "circular" | "pill"

O raio de borda.

borderRadiusLeftBottom?: "none" | "micro" | "small" | "medium" | "circular" | "pill"

O raio de borda inferior esquerdo.

borderRadiusLeftTop?: "none" | "micro" | "small" | "medium" | "circular" | "pill"

O raio de borda superior esquerdo.

borderRadiusRightBottom?: "none" | "micro" | "small" | "medium" | "circular" | "pill"

O raio de borda inferior direito.

borderRadiusRightTop?: "none" | "micro" | "small" | "medium" | "circular" | "pill"

O raio de borda superior direito.

borderRightWidth?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda direita.

borderTopWidth?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda superior.

borderWidth?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda total.

bottom?: string | number

A distância do elemento em relação à parte inferior.

bottomInset?: boolean

Quando ativo controla o espaçamento no topo para permitir que o conteúdo não fique por baixo do gesture bar no celular.

boxShadow?: string

Efeito de sombra

checked?: boolean
color?: "none" | "primary-100" | "primary-300" | "primary-500" | "primary-700" | "primary-900" | "secondary-100" | "secondary-300" | "secondary-500" | "secondary-700" | "secondary-900" | "tertiary-100" | "tertiary-300" | "tertiary-500" | "tertiary-700" | "tertiary-900" | "accent-100" | "accent-300" | "accent-500" | "accent-700" | "accent-900" | "neutral-900" | "neutral-700" | "neutral-500" | "neutral-300" | "neutral-100" | "positive-700" | "positive-300" | "warning-700" | "warning-300" | "negative-700" | "negative-300" | "support-01" | "support-02" | "support-03"

Cor do texto no componente

direction?: "row" | "column" | "row-reverse" | "column-reverse"

A direção do flexbox.

display?: "none" | "block" | "flex" | "inline" | "inline-block" | "inline-flex"

A exibição do elemento.

flexNone?: boolean

Define se o item deve ter flexibilidade nula.

flexWrap?: "center" | "start" | "end" | "between" | "around"

O envolvimento dos itens em várias linhas ou colunas.

gap?: number

O espaçamento entre os itens flexíveis.

grow?: number | "auto"

A proporção de crescimento do item flexível.

height?: string | number

A altura do elemento.

id?: string

Preenche o ID do elemento (não tem muito uso prático)

justifyContent?: "center" | "start" | "end" | "between" | "around"

O alinhamento dos itens ao longo do eixo principal.

justifyItems?: "center" | "start" | "end" | "between" | "around"

O alinhamento dos próprios itens ao longo do eixo principal.

justifySelf?: "center" | "start" | "end" | "between" | "around"

O alinhamento do próprio item ao longo do eixo principal.

left?: string | number

A distância do elemento em relação à esquerda.

margin?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem geral.

marginBottom?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem inferior.

marginHorizontal?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem horizontal (esquerda e direita).

marginLeft?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem esquerda.

marginRight?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem direita.

marginTop?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem superior.

marginVertical?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem vertical (superior e inferior).

maxHeight?: string | number

A altura máxima do elemento.

maxWidth?: string | number

A largura máxima do elemento.

minHeight?: string | number

A altura mínima do elemento.

minWidth?: string | number

A largura mínima do elemento.

opacity?: "none" | "light" | "half" | "transparent"

A opacidade do elemento.

order?: number

A ordem do item no fluxo flexível.

overflow?: "scroll" | "auto" | "hidden" | "visible" | "overlay"

O comportamento de overflow geral.

overflowX?: "scroll" | "auto" | "hidden" | "visible" | "overlay"

O comportamento de overflow horizontal.

overflowY?: "scroll" | "auto" | "hidden" | "visible" | "overlay"

O comportamento de overflow vertical.

padding?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento geral.

paddingBottom?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento inferior.

paddingHorizontal?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento horizontal (esquerdo e direito).

paddingLeft?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento esquerdo.

paddingRight?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento direito.

paddingTop?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento superior.

paddingVertical?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento vertical (superior e inferior).

position?: "fixed" | "static" | "relative" | "absolute" | "sticky"

A posição do elemento.

right?: string | number

A distância do elemento em relação à direita.

sendFocusToInput?: boolean

Esta opção deve ser utilizada quando há algum componente de formulário, ao tocar no elemento ele induz o foco do componente de formulário que estiver contido.

<View sendFocusToInput>
<Text>Acima de um input</Text>
<Input />
</View>
shrink?: number | "auto"

A proporção de encolhimento do item flexível.

top?: string | number

A distância do elemento em relação ao topo.

topInset?: boolean

Quando ativo controla o espaçamento no topo para permitir que o conteúdo não fique por baixo do status bar no celular.

visibility?: "hidden" | "visible" | "collapse"

A visibilidade do elemento.

visualState?: "success" | "danger" | "warning"

Determina o estado visual do componente e seus filhos.

width?: string | number

A largura do elemento.

zIndex?: number

O valor de zIndex do elemento.