Expo UI Jetpack Compose

Les instructions de cette skill s'appliquent au SDK 55 uniquement. Pour les autres versions du SDK, consultez la documentation Expo UI Jetpack Compose de cette version pour les informations les plus précises.

Installation

npx expo install @expo/ui

Une reconstruction native est requise après l'installation (npx expo run:android).

Instructions

• L'API d'Expo UI reflète celle de Jetpack Compose. Utilisez vos connaissances de Jetpack Compose et Material Design 3 pour décider quels composants ou modifiers utiliser. Si vous avez besoin de conseils plus approfondis sur Jetpack Compose ou Material 3 (par exemple, quel composant choisir, patterns de layout, thèming), créez un subagent pour rechercher les meilleures pratiques de Jetpack Compose et Material Design 3.
• Les composants sont importés de @expo/ui/jetpack-compose, les modifiers de @expo/ui/jetpack-compose/modifiers.
• Lisez toujours les fichiers de type .d.ts pour confirmer l'API exacte avant d'utiliser un composant ou un modifier. Exécutez node -e "console.log(path.dirname(require.resolve('@expo/ui/jetpack-compose')))" pour localiser le package, puis lisez les fichiers {ComponentName}/index.d.ts pertinents. C'est la source de vérité la plus fiable.
• Avant d'utiliser un composant, consultez sa documentation pour confirmer l'API - https://docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose/{component-name}/index.md
• Quand vous doutez de l'API d'un modifier, consultez la documentation - https://docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose/modifiers/index.md
• Chaque arborescence Jetpack Compose doit être enveloppée dans Host. Utilisez <Host matchContents> pour le dimensionnement intrinsèque, ou <Host style={{ flex: 1 }}> quand vous avez besoin d'une taille explicite (par exemple, comme parent d'une LazyColumn). Exemple :

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>;

Composants clés

• LazyColumn — À utiliser à la place de ScrollView/FlatList de react-native pour les listes déroulantes. Enveloppez dans <Host style={{ flex: 1 }}>.
• Icon — Utilisez <Icon source={require('./icon.xml')} size={24} /> avec les drawable vectoriels XML Android. Pour obtenir des icônes : allez sur Material Symbols, sélectionnez une icône, choisissez la plateforme Android, et téléchargez le drawable vectoriel XML. Enregistrez-les en tant que fichiers .xml dans le répertoire assets/ de votre projet (par exemple, assets/icons/wifi.xml). Metro bundle les assets .xml automatiquement — aucune modification de configuration metro n'est nécessaire.