expo-ui-jetpack-compose

As instruções nesta skill se aplicam apenas ao SDK 55. Para outras versões do SDK, consulte a documentação do Expo UI Jetpack Compose para essa versão para obter as informações mais precisas.

Quando Usar

• Você precisa criar UI nativa do Android no Expo usando @expo/ui/jetpack-compose.
• A tarefa envolve a escolha de views ou modificadores do Compose, incorporando-os em Host, ou traduzindo padrões do Jetpack Compose para código Expo UI.
• Você está trabalhando especificamente contra o comportamento do Expo SDK 55 para integração com Jetpack Compose.

Instalação

npx expo install @expo/ui

Uma reconstrução nativa é necessária após a instalação (npx expo run:android).

Instruções

• A API do Expo UI espelha a API do Jetpack Compose. Use o conhecimento de Jetpack Compose e Material Design 3 para decidir quais componentes ou modificadores usar.
• Componentes são importados de @expo/ui/jetpack-compose, modificadores de @expo/ui/jetpack-compose/modifiers.
• Ao usar um componente, acesse a documentação dele para confirmar a API - https://docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose/{component-name}/index.md
• Ao ter dúvidas sobre a API de um modificador, consulte a documentação - https://docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose/modifiers/index.md
• Toda árvore Jetpack Compose deve ser envolvida em Host. Use <Host matchContents> para dimensionamento intrínseco, ou <Host style={{ flex: 1 }}> quando precisar de um tamanho explícito (por exemplo, como pai de LazyColumn). Exemplo:

import { Host, Column, Button, Text } from "@expo/ui/jetpack-compose";
import { fillMaxWidth, paddingAll } from "@expo/ui/jetpack-compose/modifiers";

<Host matchContents>
  <Column verticalArrangement={{ spacedBy: 8 }} modifiers={[fillMaxWidth(), paddingAll(16)]}>
    <Text style={{ typography: "titleLarge" }}>Hello</Text>
    <Button onPress={() => alert("Pressed!")}>Press me</Button>
  </Column>
</Host>;

Componentes Chave

• LazyColumn — Use para uma lista nativa do Compose quando o design específico da plataforma exigir; não substitua listas React Native universalmente. Envolva em <Host style={{ flex: 1 }}>.
• Icon — Use <Icon source={require('./icon.xml')} size={24} /> com drawables vetoriais XML do Android de Material Symbols.

Limitações

• As APIs visam o SDK 55; verifique a documentação real do Expo para essa versão e o pacote instalado antes de editar. Exemplos Android/iOS são específicos da plataforma, não intercambiáveis ou prova de comportamento em dispositivo real. O framework existente e os requisitos do usuário têm precedência.
• Reconstruções nativas instalam/executam dependências e alteram o projeto; revise o alvo de desenvolvimento pretendido primeiro. icon.xml e o código do aplicativo são ativos da aplicação, não arquivos empacotados.
• Não trate a saída como substituta para validação específica do ambiente, testes ou revisão especializada.
• Pare e peça esclarecimentos se os inputs necessários, permissões, limites de segurança ou critérios de sucesso estiverem ausentes.