Mejores prácticas de estilos
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
//
Busca en todas las páginas de la documentación
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
Cachea estilos estáticos con StyleSheet.create: Traslada reglas de layout, espaciado y color que no cambian por renderizado a una stylesheet - los literales de objetos inline se asignan en cada renderizado y anulan el caché nativo.
Compone con arrays de estilos: Agrupa base, estado y sobreescrituras como [styles.card, pressed && styles.cardPressed, props.style] - el orden importa; documenta si gana el llamador o el componente.
Recuerda el defecto de column: React Native flex por defecto es column - establece flexDirection: "row" explícitamente siempre que esperes un layout horizontal.
Llena pantallas con flex: 1, no height: "100%": La altura porcentual necesita un padre con altura definida; flex: 1 en la vista raíz (dentro de safe area) es el patrón fiable para llenar el viewport.
Usa gap para espaciado de hermanos: Prefiere gap en contenedores flex sobre hacks de margin en primer/último hijo - menos bugs de casos extremos cuando los elementos se montan y desmontan.
Envuelve la app en SafeAreaProvider una vez: Lee insets vía useSafeAreaInsets o SafeAreaView en la raíz de la pantalla - no anides padding de safe-area en cada hijo.
Elige bordes de safe-area deliberadamente: Las imágenes hero full-bleed necesitan edges={['bottom']} o solo inset inferior manual - aplicar todos los bordes en wrappers anidados duplica el padding.
Planifica para edge-to-edge Android (RN 0.86): Los insets de status bar y navigation bar cambian en Android moderno - prueba en dispositivos API 35+, no solo modelos clásicos de insets.
Aplica tema con tokens semánticos: Nombra colores surface, textPrimary, borderSubtle - mapea tokens a paletas claro/oscuro en lugar de esparcir #111 y #fff a través del código de features.
Sincroniza chrome con useColorScheme: Controla StatusBar, tab bars y encabezados de navegación desde el esquema activo - los iconos de status bar light hardcodeados desaparecen en fondos oscuros.
Breakpoint en ancho de ventana, no clase de dispositivo: useWindowDimensions().width >= 768 funciona para tablets Android y foldables - Platform.isPad solo es insuficiente.
Evita suposiciones de layout solo para web: Sin media queries ni vh - usa hooks, anchos porcentuales y flexWrap para layouts responsivos de teléfono/tablet.
Estabiliza estilos de wrapper de lista: contentContainerStyle={{ padding: 16 }} en FlatList recrea cada renderizado padre - hoistealo a StyleSheet.create o useMemo.
Memoiza componentes de fila, no solo estilos: memo(Row) falla cuando los padres pasan objetos style inline frescos - pasa referencias styles.row desde la stylesheet.
Anima transform y opacity, no layout: Impulsar height desde setState cada frame dispara el layout de Yoga cada tick - usa Reanimated para movimiento; reserva LayoutAnimation para toggles discretos.
Shadow en un wrapper, clip en la vista interna: overflow: "hidden" en la misma vista que lleva iOS shadow* props corta la sombra - divide outer shadow wrapper e inner content.
Siempre establece backgroundColor en superficies elevadas: Las sombras de iOS y elevation de Android necesitan un color de superficie opaco - las tarjetas transparentes producen profundidad invisible.
Empareja iOS shadow con Android elevation: shadowColor se ignora en Android - usa Platform.select en StyleSheet.create para tarjetas multiplataforma.
Usa StyleSheet.hairlineWidth para divisores: borderWidth: 1 se ve pesado en pantallas retina - hairline width rastrea la densidad de píxeles.
Carga fuentes antes del first meaningful paint: useFonts + SplashScreen.preventAutoHideAsync - retorna null en la raíz hasta que las fuentes carguen o fallen; nunca destelles fuente del sistema en pantallas de marca.
Registra cada peso de fuente explícitamente: fontWeight: "700" con una sola familia personalizada a menudo falla - carga Inter-Bold.ttf y establece fontFamily: "Inter-Bold" directamente.
Limita escala en UI densa: Aplica maxFontSizeMultiplier en toolbars y chips; permite dynamic type completo en body copy - accesibilidad sin romper el layout.
Define una escala de tipografía en tokens: Mapea display, title, body y label a pares fontSize + lineHeight - las pantallas hacen referencia a roles, no números crudos.
Perfila antes de adoptar una librería de estilos: NativeWind, Tamagui y Unistyles resuelven problemas de escala - un puñado de pantallas StyleSheet no necesitan el costo de bundle y configuración.
Audita estilos públicos en revisión de código: Nuevos estilos inline en hot paths de lista y colores hex únicos son regresiones - aplica tokens y uso de stylesheet en reglas de linting CI donde sea posible.
StyleSheet.create o a un módulo de tokens.StyleSheet + tokens permanecen legibles.shadow* solo de iOS - agrega elevation y un backgroundColor sólido.useWindowDimensions() - se re-renderiza en rotación y pantalla dividida, a diferencia de un Dimensions.get() de una sola vez.light, dark) y selecciona en tiempo de ejecución - o usa un pequeño hook useTheme() que retorna la paleta activa.StyleSheet.create duplicados por esquema a menos que el profiling pruebe que es necesario.Versiones de Stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0 y Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última actualización: 16 jul 2026