Cultiva Aprende
Guía UI Nativa con Expo Router

// app/_layout.tsx — root layout de Cultiva Aprende
import { NativeTabs, Icon, Label } from "expo-router/unstable-native-tabs";
import { Theme } from "@components/theme";

export default function Layout() {
  return (
    <Theme>
      <NativeTabs>
        {/* Tab 1: Skills destacadas */}
        <NativeTabs.Trigger name="(index)">
          <Icon sf="brain" />
          <Label>Skills</Label>
        </NativeTabs.Trigger>

        {/* Tab 2: Búsqueda con role search = barra búsqueda nativa iOS */}
        <NativeTabs.Trigger name="(search)" role="search" />

        {/* Tab 3: Favoritos */}
        <NativeTabs.Trigger name="(favorites)">
          <Icon sf="heart" />
          <Label>Favoritos</Label>
        </NativeTabs.Trigger>

        {/* Tab 4: Perfil */}
        <NativeTabs.Trigger name="(profile)">
          <Icon sf="person.circle" />
          <Label>Perfil</Label>
        </NativeTabs.Trigger>
      </NativeTabs>
    </Theme>
  );
}

import { Stack } from "expo-router/stack";
import { PlatformColor } from "react-native";

export default function Layout({ segment }: { segment: string }) {
  const screen = segment.match(/\((.*)\)/)?.[1]!;
  const titles: Record<string, string> = {
    index: "Skills",
    search: "Buscar",
  };

  return (
    <Stack
      screenOptions={{
        // Fondo transparente para que brille el liquid glass
        headerTransparent: true,
        headerShadowVisible: false,
        headerLargeTitleShadowVisible: false,
        headerLargeStyle: { backgroundColor: "transparent" },
        // Colores adaptados a dark/light mode automáticamente
        headerTitleStyle: { color: PlatformColor("label") },
        headerLargeTitle: true,
        headerBlurEffect: "none",
        headerBackButtonDisplayMode: "minimal",
      }}
    >
      {/* Pantalla principal del tab */}
      <Stack.Screen
        name={screen}
        options={{ title: titles[screen] }}
      />
      {/* Detalle de skill — compartido entre tabs */}
      <Stack.Screen
        name="i/[id]"
        options={{ headerLargeTitle: false }}
      />
    </Stack>
  );
}

import { View, Text, Pressable, PlatformColor } from "react-native";
import { Link } from "expo-router";
import { Image } from "expo-image";

export function SkillCard({ skill }: { skill: Skill }) {
  return (
    {/* Link con Zoom Transition hacia detalle */}
    <Link href={`/i/${skill.id}`}>
      <Link.Trigger>
        <Pressable>
          <View
            style={{
              backgroundColor: PlatformColor("secondarySystemBackground"),
              borderRadius: 14,
              padding: 14,
              gap: 10,
              /* CSS boxShadow — NUNCA elevation/shadowColor legacy */
              boxShadow: "0 2px 8px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.06)",
              borderCurve: "continuous", /* esquinas suaves Apple-style */
            }}
          >
            <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
              {/* SF Symbol con expo-image */}
              <Image
                source={`sf:${skill.sfSymbol}`}
                style={{ width: 28, height: 28 }}
                tintColor={PlatformColor("systemIndigo")}
              />
              <View style={{ flex: 1 }}>
                {/* selectable para que el usuario pueda copiar el nombre */}
                <Text selectable style={{ fontWeight: "700", fontSize: 15 }}>
                  {skill.nombre}
                </Text>
                <Text style={{ color: PlatformColor("secondaryLabel"), fontSize: 13 }}>
                  {skill.servicio} · {skill.nivel}
                </Text>
              </View>
              <Text style={{ fontVariant: ["tabular-nums"], color: "#10b981", fontWeight: "700" }}>
                5€
              </Text>
            </View>
          </View>
        </Pressable>
      </Link.Trigger>

      {/* Context menu de mantener presionado */}
      <Link.Menu>
        <Link.MenuAction
          title="Guardar en favoritos"
          icon="heart"
          onPress={() => addFavorite(skill.id)}
        />
        <Link.MenuAction
          title="Compartir"
          icon="square.and.arrow.up"
          onPress={() => shareSkill(skill)}
        />
        <Link.MenuAction
          title="Comprar"
          icon="cart"
          onPress={() => router.push("modal")}
        />
      </Link.Menu>
      <Link.Preview />  {/* preview en hover / 3D touch */}
    </Link>
  );
}

import Animated, { FadeInDown, FadeOut, LinearTransition } from "react-native-reanimated";
import * as Haptics from "expo-haptics";

export function SkillList({ skills }: { skills: Skill[] }) {
  return (
    <ScrollView
      {/* siempre contentInsetAdjustmentBehavior en el primer ScrollView de la ruta */}
      contentInsetAdjustmentBehavior="automatic"
      contentContainerStyle={{ padding: 16, gap: 12 }}
    >
      {skills.map((skill, i) => (
        <Animated.View
          key={skill.id}
          {/* Stagger de entrada — cada card entra 50ms después */}
          entering={FadeInDown.delay(i * 50).springify().damping(20)}
          exiting={FadeOut.duration(150)}
          layout={LinearTransition.springify()}
        >
          <SkillCard
            skill={skill}
            onPress={() => {
              /* Haptic feedback en iOS */
              if (process.env.EXPO_OS === "ios") {
                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
              }
            }}
          />
        </Animated.View>
      ))}
    </ScrollView>
  );
}

// Form Sheet con fondo transparente = liquid glass automático en iOS 26+
<Stack.Screen
  name="filter-sheet"
  options={{
    presentation: "formSheet",
    sheetGrabberVisible: true,
    sheetAllowedDetents: [0.4, 0.85],
    /* backgroundColor transparent activa liquid glass en iOS 26 */
    contentStyle: { backgroundColor: "transparent" },
    title: "Filtros",
  }}
/>

import { useState, useCallback } from "react";
import { Stack } from "expo-router";
import { FlatList } from "react-native";
import { SkillCard } from "@components/skill-card";
import { useSkills } from "@hooks/use-skills";

export default function SearchScreen() {
  const [query, setQuery] = useState("");
  const skills = useSkills(query);

  return (
    <>
      <Stack.Screen
        options={{
          title: "Buscar",
          /* Barra de búsqueda nativa iOS integrada en el large header */
          headerSearchBarOptions: {
            placeholder: "Buscar skills de IA...",
            onChangeText: (e) => setQuery(e.nativeEvent.text),
            onCancelButtonPress: () => setQuery(""),
            autoCapitalize: "none",
          },
        }}
      />
      <FlatList
        data={skills}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <SkillCard skill={item} />}
        contentInsetAdjustmentBehavior="automatic"
        contentContainerStyle={{ padding: 16, gap: 12 }}
      />
    
  );
}