Mejores Prácticas de Fundamentos de React Native
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.
Envuelve cadenas en Text: React Native no tiene nodos de texto en el DOM - colocar una cadena desnuda dentro de View lanza un redbox. Cada carácter visible debe vivir dentro de <Text>.
Conoce el valor predeterminado de flex: El flex predeterminado de React Native es column, lo opuesto a CSS web. Establece flexDirection: "row" explícitamente siempre que quieras layout horizontal.
Cachea estilos con StyleSheet.create: Definir objetos de estilo en línea crea nuevas referencias en cada renderizado. StyleSheet.create registra estilos una sola vez y permite que el lado nativo los cachee para mejor rendimiento.
Aplica el área segura una sola vez en la raíz de la pantalla: Anidar componentes SafeAreaView o combinarlos con paddingTop: insets.top manual duplica el inset. Elige un propietario por eje - usualmente el envoltorio de pantalla más externo.
Usa contentContainerStyle para padding de ScrollView: Padding en ScrollView mismo recorta indicadores de scroll de forma extraña en iOS. Coloca espaciado interior en contentContainerStyle, no en el contenedor de scroll.
Empareja sombras de iOS con elevation de Android: shadowColor y shadowOffset se ignoran en Android. Usa Platform.select para aplicar propiedades de sombra de iOS junto a elevation.
Anida Text dentro de Text para spans en línea: Envolver palabras individuales en View rompe el flujo de texto en línea y daña la accesibilidad. Usa nodos <Text> anidados para spans en línea negrita, coloreada o enlazada.
Trata props como solo lectura: Mutar un prop o objeto de estado en su lugar (todo.done = true; setTodos(todos)) puede omitir re-renderizados porque la referencia no cambia. Siempre retorna objetos y arrays nuevos de los actualizadores.
Deriva valores computables durante el renderizado: Almacenar listas filtradas u ordenadas en un useState separado duplica actualizaciones y riesgos de desviación. Usa useMemo para derivar de la única fuente de verdad.
Estabiliza callbacks en listas virtualizadas: Los inline onPress={() => toggle(id)} dentro de renderItem rompen memo en cada renderizado. Pasa manejadores estables de useCallback o deja que componentes de fila memoizados sean propietarios del manejador.
Memoiza objetos de valor de context: value={{ user, theme }} recreado en cada renderizado re-renderiza cada consumidor. Memoiza el objeto de valor o divide contexts por frecuencia de actualización.
Perfila antes de sobre-memoizar: useMemo y useCallback tienen su propio costo. Optimiza filas de lista y computaciones puras genuinamente costosas - no cada objeto en línea.
Prefiere Pressable sobre TouchableOpacity: Pressable expone estados pressed, hovered y focused, envía android_ripple e hitSlop de primera clase, y evita desvanecimiento de opacidad en un subárbol completo.
Alcanza objetivos táctiles mínimos de 44pt: Un icono de 20x20 sin padding falla en HIG y mínimos de Material. Añade hitSlop o envuelve con padding para que el área interactiva alcance aproximadamente 44x44 puntos.
Muestra estado deshabilitado visualmente y semánticamente: disabled silencia onPress pero el control aún puede parecer activo. Combina estilos deshabilitados, accessibilityState={{ disabled: true }}, y pointerEvents donde superponen capas.
Usa Platform.select para deltas pequeños: Dividir archivos .ios y .android para una diferencia de una línea de color añade sobrecarga de mantenimiento. Reserva archivos específicos de plataforma para UI materialmente diferente o importaciones nativas.
Importa el nombre de archivo base, no .ios: import X from "./Foo.ios" rompe bundles de Android. Importa ./Foo y deja que Metro resuelva el archivo de plataforma correcto.
Siempre incluye un default en Platform.select: Web y otros targets de Expo obtienen undefined sin una clave default. Cada llamada Platform.select en una app multi-plataforma necesita un fallback.
Establece dimensiones explícitas en imágenes remotas: Imágenes { uri } sin width, height o aspectRatio se renderan a 0x0 y aparecen invisibles. Siempre restringe layout para fuentes de red.
Mantén rutas require() estáticas: Metro analiza importaciones de assets en tiempo de construcción - require('./assets/' + name + '.png') falla. Usa un mapa de búsqueda constante de requires estáticos en su lugar.
Precarga assets antes de ocultar el splash: Ocultar el splash inmediatamente mientras las imágenes se decodifican muestra un flash en blanco. await Asset.loadAsync(...) luego llama a SplashScreen.hideAsync().
Suscríbete a cambios de dimensiones con un hook: Dimensions.get('window') es una instantánea - UI permanece en layout de retrato después de la rotación. Usa useWindowDimensions() o Dimensions.addEventListener.
Usa breakpoints de ancho para tablets entre plataformas: Platform.isPad solo cubre iOS. Un breakpoint de ancho lógico (por ejemplo, >= 768) funciona en tablets de Android y doblables también.
Asume New Architecture por defecto en RN 0.86: Expo SDK 57 envía con Fabric y TurboModules habilitados. Verifica compatibilidad de New Architecture en la librería antes de actualizar - el éxito de compilación no garantiza estabilidad en tiempo de ejecución.
Depura Hermes con React Native DevTools: La depuración remota de Chrome no se adjunta fielmente al bytecode de Hermes. Presiona j en Metro o usa el menú de desarrollo para abrir React Native DevTools para puntos de ruptura y perfilado en dispositivo.
react-native o módulos de Expo que envían con la plantilla predeterminada.expo-asset asumen un flujo de trabajo de Expo o prebuild, pero las reglas subyacentes se mantienen en RN puro también.<Text>, incluso palabras simples dentro de un View.memo y fuerzan cada fila visible a re-renderizar en cada tick del padre.useCallback y mantén componentes de fila memoizados.Platform.select dentro de un archivo compartido es más limpio.newArchEnabled en app.json / app.config.js (habilitado por defecto en plantillas recientes).npx expo-doctor e inspecciona registros de compilación nativos para inicialización de Fabric/TurboModule.Dimensions.get('window') en render de componentes con useWindowDimensions().@3x con miles de píxeles de ancho y mostrarlo en un avatar de 48x48.expo-image con modos de cambio de tamaño apropiados.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: 9 jul 2026