FitTrack Pro — @expo/ui Migration

import { Host, Column, Row, List, ListItem, Text, Switch } from '@expo/ui'; import SegmentedControl from '@expo/ui/community/segmented-control'; import { useState } from 'react'; import { Activity } from '../types'; const Dashboard = ({ activities }: { activities: Activity[] }) => { const [period, setPeriod] = useState(0); return ( {/* Host es OBLIGATORIO como raíz de todo árbol @expo/ui */} <Host style={{ flex: 1 }}> <Column> {/* Filtro de periodo — drop-in replacement, mismo API que el paquete original */} <SegmentedControl values={['Hoy', 'Semana', 'Mes', 'Año']} selectedIndex={period} onChange={(e) => setPeriod(e.nativeEvent.selectedSegmentIndex)} /> {/* Métricas */} <Row> <MetricCard icon="👟" value="8.342" label="Pasos" /> <MetricCard icon="🔥" value="487" label="kcal" /> <MetricCard icon="📍" value="5,8km" label="Dist." /> </Row> {/* Lista de actividades — OK para < ~50 items */} <List> {activities.map((act) => ( <ListItem key={act.id} title={act.name} subtitle={`${act.duration} min · ${act.location}`} trailing={() => <Switch value={act.completed} onValueChange={(v) => toggleActivity(act.id, v)} /> } /> ))} </List> </Column> </Host> ); };

// ANTES — librerías comunitarias: // import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet'; // import DateTimePicker from '@react-native-community/datetimepicker'; // AHORA — @expo/ui drop-in replacements (mismo API): import BottomSheet, { BottomSheetView } from '@expo/ui/community/bottom-sheet'; import DateTimePicker from '@expo/ui/community/datetime-picker'; import { Host, Column, Row, Text, Button, Slider } from '@expo/ui'; import { useRef, useState } from 'react'; export const NewActivitySheet = ({ onSave }) => { const sheetRef = useRef(null); const [date, setDate] = useState(new Date()); const [duration, setDuration] = useState(30); return ( {/* BottomSheet — API idéntico a @gorhom/bottom-sheet */} <BottomSheet ref={sheetRef} snapPoints={['50%', '80%']}> <BottomSheetView> {/* Árbol universal @expo/ui dentro del sheet */} <Host matchContents> <Column> <Text>Nueva actividad</Text> {/* Slider de duración (universal) */} <Slider value={duration} minimumValue={5} maximumValue={180} step={5} onValueChange={setDuration} /> <Text>{duration} minutos</Text> </Column> </Host> {/* DateTimePicker — API idéntico a @react-native-community/datetimepicker */} <DateTimePicker value={date} mode="date" onChange={(_e, d) => d && setDate(d)} /> </BottomSheetView> </BottomSheet> ); };

import { Host, TextInput, useNativeState } from '@expo/ui'; // react-native-worklets requerido para sincronía en el UI thread import { useCallback } from 'react'; export const ActivityNameInput = ({ onName }) => { // ObservableState: se actualiza en el UI thread sin React re-render const nameState = useNativeState(''); const handleChange = useCallback((raw: string) => { 'worklet'; // corre en el UI thread — sin flicker // Capitaliza primera letra de cada palabra (title case) const formatted = raw .split(' ') .map((w) => w.charAt(0).toUpperCase() + w.slice(1)) .join(' '); nameState.value = formatted; // escribe directo — sin re-render onName(formatted); }, [nameState]); return ( <Host matchContents> <TextInput value={nameState} {/* ObservableState, no string */} onChangeText={handleChange} placeholder="Nombre de la actividad" /> </Host> ); }; // Android fallback → components/ActivityNameInput.android.tsx // usa TextInput estándar de React Native (sin worklet necesario)

import { Host, LazyColumn, Text, Row } from '@expo/ui/jetpack-compose'; import { paddingAll, fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers'; import { Activity } from '../types'; export const ActivityHistory = ({ activities }: { activities: Activity[] }) => ( {/* flex: 1 OBLIGATORIO cuando LazyColumn es hijo directo de Host */} <Host style={{ flex: 1 }}> <LazyColumn verticalArrangement={{ spacedBy: 8 }} modifiers={[paddingAll(16)]} > {activities.map((act) => ( <Row key={act.id} modifiers={[fillMaxWidth(), paddingAll(12)]} horizontalArrangement={{ spacedBy: 12 }} > <Text style={{ typography: 'titleMedium' }}>{act.name}</Text> <Text style={{ typography: 'bodySmall' }}> {act.duration} min · {act.date} </Text> </Row> ))} </LazyColumn> </Host> );