Componentes Fundamentales

React Native tiene componentes equivalentes a los elementos HTML pero diseñados para mobile. View es como div: el contenedor principal. Text es como p o span: todo texto debe estar dentro de Text. Image muestra imágenes locales o remotas. TextInput es como input de formulario. ScrollView permite hacer scroll en contenido que supera la pantalla.

FlatList es para listas largas con virtualización (solo renderiza lo visible). Ningún CSS web funciona aquí: los estilos se aplican con StyleSheet.create().

Los estilos en React Native son objetos JavaScript, no CSS. La sintaxis es similar pero hay diferencias: no existe em, rem, vw o vh (se usan números absolutos o Dimensions para porcentajes). Los nombres son camelCase: backgroundColor en lugar de background-color, borderRadius en lugar de border-radius.

Solo se puede aplicar un objeto de estilo a la vez (aunque puedes combinarlos con arrays). El sistema de estilos funciona bien pero requiere acostumbrarse si vienes del web.

import {
  View, Text, Image, TextInput, ScrollView,
  TouchableOpacity, Switch, ActivityIndicator,
  StyleSheet
} from "react-native";
import { useState } from "react";

export default function Componentes() {
  const [texto, setTexto] = useState("");
  const [activo, setActivo] = useState(false);
  const [cargando, setCargando] = useState(false);
  
  return (
    <ScrollView style={styles.scroll}>
      {/* Text con estilos anidados */}
      <Text style={styles.texto}>
        Texto <Text style={styles.negrita}>en negrita</Text> y normal
      </Text>
      
      {/* Image */}
      <Image
        source={{ uri: "https://reactnative.dev/img/logo-og.png" }}
        style={{ width: 200, height: 100 }}
        resizeMode="contain"
      />
      
      {/* TextInput */}
      <TextInput
        style={styles.input}
        placeholder="Escribe algo..."
        placeholderTextColor="#888"
        value={texto}
        onChangeText={setTexto}
        keyboardType="default"
        secureTextEntry={false}
      />
      <Text>Escribiste: {texto}</Text>
      
      {/* Switch */}
      <Switch
        value={activo}
        onValueChange={setActivo}
        trackColor={{ false: "#333", true: "#00E5A0" }}
      />
      
      {/* ActivityIndicator */}
      {cargando && <ActivityIndicator size="large" color="#00E5A0" />}
    </ScrollView>
  );
}