StyleSheet — qué es, creación de estilos en React Native

¿Qué es StyleSheet?

StyleSheet — una API integrada de React Native para definir estilos de componentes. A diferencia de CSS en el desarrollo web, RN utiliza objetos JavaScript para describir estilos. StyleSheet.create — el método clave — acepta un objeto de estilos y devuelve un objeto con identificadores numéricos.

StyleSheet es parte del núcleo de React Native y no requiere instalar paquetes adicionales. Según Meta (2026), el 95% de los proyectos de React Native usan StyleSheet.create para estilos estáticos. Alternativas: styled-components, Emotion, NativeWind (Tailwind para RN) — pero el StyleSheet integrado sigue siendo el estándar para el núcleo.

Historia y evolución

En las primeras versiones de React Native (2015), los estilos se definían exclusivamente como objetos inline. StyleSheet.create apareció en RN 0.4 como una optimización. El concepto está tomado de CSS: separar los estilos de la lógica para legibilidad y rendimiento. Con los años, la API se expandió: se añadieron absoluteFill, hairlineWidth, flatten.

StyleSheet.create vs estilos inline

La diferencia entre StyleSheet.create y los estilos inline es crítica para el rendimiento. Un estilo inline es un objeto JavaScript plano creado en cada renderizado del componente. StyleSheet.create — un objeto creado una vez durante la carga del módulo y convertido a un ID numérico.

Al pasar un estilo inline, React Native envía el objeto completo a través del puente JavaScript-Native cada vez. Para un componente con estilos complejos, esto significa docenas de propiedades transferidas en cada renderizado. StyleSheet.create pasa solo un identificador numérico, reduciendo la carga del puente.

// StyleSheet.create — enfoque optimizado
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Estilo inline — crea un nuevo objeto en cada renderizado
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

Cuándo usar inline: para estilos dinámicos que dependen del estado (pressed, selected, active). Para estilos estáticos, use siempre StyleSheet.create. Regla: estático → create, dinámico → función inline.

Diseño Flexbox con StyleSheet

Flexbox — el único mecanismo de diseño en React Native (CSS Grid no es compatible, float está ausente). StyleSheet.create se usa para describir contenedores flex y sus hijos. Propiedades clave: flex (coeficiente de llenado), flexDirection (row | column), justifyContent, alignItems.

Por defecto, flexDirection en React Native es column (en CSS — row). Esto es lo primero que hay que recordar al migrar del desarrollo web. Todos los componentes View son contenedores flex por defecto. Para centrar un elemento, use alignItems: 'center' + justifyContent: 'center'.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

Importante: en React Native, todos los tamaños se especifican sin unidades (solo un número). Los porcentajes funcionan, pero solo para width y height relativos al padre. margin y padding aceptan números. Para capacidad de respuesta, use flex en lugar de porcentajes — es más fiable en diferentes pantallas.

API StyleSheet: create, flatten, hairlineWidth, absoluteFill

StyleSheet API incluye varios métodos además de create. StyleSheet.flatten fusiona un array de estilos en un solo objeto — útil para composición y paso de estilos a componentes de terceros. StyleSheet.hairlineWidth devuelve el ancho de línea mínimo visible en el dispositivo.

StyleSheet.absoluteFill — un estilo predefinido { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Se usa para capas superpuestas, ventanas modales y posicionamiento absoluto en toda la pantalla. StyleSheet.absoluteFillObject — lo mismo pero como objeto para extensión.

// flatten — fusionar estilos
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — línea mínima
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth es útil para separadores y bordes — siempre se ve como 1 píxel físico independientemente de la densidad de pantalla. En pantallas Retina son 0.5 puntos lógicos, en normales — 1 punto. No use hairlineWidth para elementos que deben tener un tamaño estrictamente específico.

Diseño adaptable con Dimensions API

Dimensions API se usa junto con StyleSheet para diseño adaptable en diferentes tamaños de pantalla. Dimensions.get('window') devuelve el ancho y alto de la ventana. Para actualizaciones reactivas al girar la pantalla, use el hook useWindowDimensions de React Native.

Aunque StyleSheet.create no admite media queries como CSS, puede calcular valores basados en Dimensions dentro de create o usar estilos dinámicos mediante una función. Para breakpoints, cree estilos separados para diferentes rangos de ancho.

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions se actualiza automáticamente al girar la pantalla y cambiar el tamaño de la ventana en tablets con Split View. Para SSR (React Native Web), asegúrese de que Dimensions.get se llame después del montaje del componente para evitar discrepancias entre servidor y cliente.

Organización de estilos en un proyecto

La organización de StyleSheet en un proyecto afecta la mantenibilidad y la reutilización del código. Tres enfoques: estilos locales dentro del componente (styles.js junto al componente), estilos globales (theme.js con constantes de color, espaciado, tipografía) y estilos modulares mediante composición.

Estructura recomendada: theme.js con constantes de color, tamaño y tipografía; Component.styles.js junto a cada componente para sus estilos específicos; StyleSheet.flatten para combinar estilos base y específicos. Para proyectos grandes, use un Design System con generación de tema.

// theme.js — constantes globales
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

Beneficios de la organización modular: fuente única de verdad para colores y espaciados, refactorización simplificada (cambie primary — se actualizan todos los botones), reutilización de estilos mediante flatten, legibilidad y predecibilidad del código. Para proyectos TypeScript, añada tipos para el tema mediante declare module.