Sistema de diseño React Native Elements.

Alcance de ejecución y web del sistema de diseño React Native Elements

Ejecuta los componentes con el tema aplicado

Este ejemplo usa @rneui/themed y @rneui/base en la versión 5.0.0, React 19.2.0 y React Native Web 0.21.3. La compilación para navegador asigna react-native a react-native-web y selecciona los módulos .web.js antes que los módulos genéricos de JavaScript. Estos son componentes reales de la biblioteca renderizados para la web, no cuadros de HTML que imitan una captura de pantalla móvil. El archivo de compilación proporcionado incluye esa opción de resolución para que el código independiente reproduzca la vista previa.

Mantén separadas las pruebas de la web y las de dispositivos nativos

La composición es un editor de planes de concentración, no un temporizador en marcha ni un gestor de notificaciones. SafeAreaProvider envuelve la aplicación, tal como requiere la integración, pero esta prueba en el navegador no valida los márgenes seguros de iOS o Android, el comportamiento del teclado nativo ni los permisos de notificación del dispositivo. Además de estos ejemplos de componentes compartidos, un proyecto nativo necesita una compilación para su plataforma y pruebas en el dispositivo.

• La renderización web usa React Native Web.
• El plan se mantiene únicamente en el estado local de React.
• No se inicia ningún temporizador, notificación del sistema ni guardado en el servidor.

Objetos de tema y colores del sistema de diseño React Native Elements

Usa los roles del tema activo

createTheme combina los colores claros y oscuros integrados con las sobrescrituras explícitas que se indiquen. El ejemplo solo cambia los valores predeterminados de los componentes y el modo. useTheme proporciona los colores resueltos a los elementos View y Text circundantes, de modo que el título grande, las descripciones y los paneles se adapten a la apariencia seleccionada. En el modo oscuro, black corresponde al rol de primer plano claro y white, al rol de superficie oscura; tratar esos nombres como valores literales de color rompería el tema.

No inventes una escala tipográfica universal

RNEUI ofrece valores predeterminados y opciones de personalización para los componentes, no el mismo modelo de tokens que un sistema de diseño CSS. Por eso, la referencia distingue las entradas reales de defaultSpacing de los ajustes originales de la muestra: un encabezado de 32px, texto del cuerpo de 15px y un radio de tarjeta de 8px. Esas dimensiones son decisiones de composición originales que se ven en el código. No deben describirse como reglas de marca obligatorias de React Native Elements.

Validación de entrada y foco del sistema de diseño React Native Elements

Controla explícitamente el texto de la tarea

Input recibe un valor y una función de retorno onChangeText. La acción de guardar elimina los espacios sobrantes del valor antes de determinar si está vacío. Si lo está, errorMessage muestra una solicitud concreta y la referencia del componente devuelve el foco al campo de entrada. Al cambiar el texto, se borra el error anterior y se invalida la confirmación local para evitar que un mensaje de guardado obsoleto describa un plan ya editado.

Usa juntos la etiqueta y el error

La etiqueta visible «Tarea de concentración» y accessibilityLabel identifican el mismo control. El texto del marcador de posición sugiere contenido, pero no sustituye a la etiqueta. La validación se activa con la acción explícita de guardar, no con cada pulsación. El usuario conserva el borrador si se produce un error, y no se muestra ninguna animación de guardado asíncrono que dé a entender que se ha enviado una solicitud al servidor cuando no es así.

Selección controlada del sistema de diseño React Native Elements

Separa el índice seleccionado de la duración

ButtonGroup recibe tres etiquetas, selectedIndex y onPress. El índice que devuelve determina la selección en la lista original de minutos [15, 25, 45]; usar directamente ese índice como cantidad de minutos sería un error de la aplicación. El resumen numérico destacado de la vista previa se calcula a partir del mismo índice seleccionado para que el control segmentado y el plan legible siempre coincidan.

Haz que la opción de descanso sea un valor booleano real

Conservación y restablecimiento del estado del sistema de diseño React Native Elements

Mantén el tema independiente del plan

Al cambiar la apariencia, se llama a updateTheme con el modo opuesto. La tarea, la duración seleccionada, el ajuste de descanso y la confirmación local siguen siendo estado de la aplicación, fuera de esa actualización. Los componentes nativos reciben el nuevo tema sin reconstruir el plan. La comprobación en el navegador cambia la apariencia después de introducir una tarea personalizada para verificar que el modo visual no esté vinculado accidentalmente al restablecimiento de datos.

Usa una única acción de recuperación explícita

Restablecer el plan recupera la tarea de ejemplo, la duración de 25 minutos y el descanso activado; también borra el error de validación y elimina la confirmación. La apariencia seleccionada se conserva. Así, el restablecimiento del contenido queda separado de la preferencia de tema y se evita una recarga inesperada de toda la página. El ejemplo no incluye una capa de persistencia, por lo que, al volver a abrir el documento, se muestra la tarea de ejemplo inicial.

Composición adaptable del sistema de diseño React Native Elements

Adapta la disposición de las dos tarjetas

El contenido usa useWindowDimensions para elegir una fila cuando el ancho supera los 700 px y una columna en anchos menores. Cada Card tiene un margen exterior de cero, de modo que el espacio de 24 px de la composición controla la alineación. Por debajo de los 500 px de ancho, el relleno exterior se reduce a 16 px. Las dos tarjetas presentan un plan editable y un resumen derivado, en lugar de marcadores de posición decorativos repetidos.

Inspecciona los valores predeterminados de los componentes en ambos temas

Los componentes internos de RNEUI pueden aplicar sus propios estilos predeterminados además de los colores globales. Por ejemplo, los segmentos sin seleccionar de ButtonGroup conservan su tratamiento de superficie nativo en este ejemplo. Si un producto requiere un contraste o una densidad visual diferentes, puede especificar buttonStyle y selectedButtonStyle explícitamente, pero esa decisión debe probarse y no atribuirse al tema global automático.

Configuración completa del navegador para el sistema de diseño React Native Elements

Incluye la resolución para la web y los cargadores de recursos

El archivo build.mjs proporcionado usa esbuild con análisis de JSX para las dependencias de JavaScript, alias de react-native-web, prioridad para .web.js y cargadores de datos para los recursos PNG y TTF incluidos en los paquetes. La entrada del paquete incluye exportaciones que hacen referencia a esos recursos incluso cuando la composición visible no contiene iconos. Por eso, no se puede sustituir la compilación por una importación directa del código fuente sin procesar en el navegador.

Prueba toda la interacción local

Guarda el código fuente proporcionado como rne.jsx y HTML como index.html, instala las versiones fijadas de los paquetes, ejecuta la compilación y sirve el directorio. Prueba una tarea vacía, una tarea personalizada, otra duración, el interruptor de descanso, la apariencia y el restablecimiento. Así se comprueba la composición proporcionada; no se validan automáticamente todos los componentes exportados de RNEUI ni todas las plataformas nativas.

1. Mantén los tres archivos proporcionados en un mismo directorio.
2. Instala las dependencias con versiones fijadas y ejecuta node build.mjs.
3. Sirve el paquete generado con index.html.
4. Prueba los estados vacío, editado, con tema y restablecido.

Ejemplos de componentes del sistema de diseño React Native Elements

import React,{useState,useRef} from 'react';
import {createRoot} from 'react-dom/client';
import {View,Text,useWindowDimensions} from 'react-native';
import {ThemeProvider,createTheme,Button,ButtonGroup,Input,Switch,Card,Divider,useTheme} from '@rneui/themed';
import {SafeAreaProvider} from 'react-native-safe-area-context';
const theme=createTheme({mode:'light',components:{Button:{radius:6},Input:{containerStyle:{paddingHorizontal:0}}}});
function App(){const {theme,updateTheme}=useTheme();const {width}=useWindowDimensions();const [title,setTitle]=useState('Read a chapter'),[duration,setDuration]=useState(1),[breaks,setBreaks]=useState(true),[error,setError]=useState(false),[saved,setSaved]=useState('');const input=useRef(null);let c=theme.colors;function changed(){setSaved('')}function save(){if(!title.trim()){setError(true);input.current?.focus();return;}setError(false);setSaved(`${title.trim()} · ${[15,25,45][duration]} minutes · ${breaks?'with a short break':'no break reminder'}. Kept in this preview only.`)}return <View style={{backgroundColor:c.background,padding:width<500?16:32,maxWidth:1000,width:'100%',alignSelf:'center'}}><View style={{flexDirection:'row',justifyContent:'space-between',gap:24,flexWrap:'wrap',marginBottom:24}}><View style={{flexShrink:1}}><Text style={{color:c.primary,fontSize:13,fontWeight:'700'}}>REACT NATIVE ELEMENTS · WEB STUDY</Text><Text accessibilityRole="header" style={{fontSize:32,fontWeight:'700',color:c.black,marginTop:12}}>Make room for one thing</Text></View><Button title={theme.mode==='light'?'Use dark theme':'Use light theme'} type="outline" onPress={()=>updateTheme({mode:theme.mode==='light'?'dark':'light'})}/></View><Text style={{color:c.grey1,fontSize:15,lineHeight:23}}>An original focus-plan composer using RNEUI 5.0.0 through React Native Web. No timer or system notification is started.</Text><View style={{flexDirection:width>700?'row':'column',gap:24,marginTop:24}}><Card containerStyle={{flex:1,margin:0,padding:24,borderRadius:8}}><Card.Title>Shape your focus block</Card.Title><Card.Divider/><Input ref={input} label="Focus task" accessibilityLabel="Focus task" value={title} onChangeText={v=>{setTitle(v);setError(false);changed()}} errorMessage={error?'Enter a task before keeping this plan.':''} placeholder="What deserves your attention?"/><Text style={{fontSize:16,fontWeight:'700',color:c.grey1,marginBottom:8}}>Duration</Text><ButtonGroup buttons={['15 min','25 min','45 min']} selectedIndex={duration} onPress={i=>{setDuration(i);changed()}} containerStyle={{marginHorizontal:0,height:48,marginBottom:24}}/><View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center',gap:16,marginBottom:24}}><Text style={{fontSize:16,color:c.black,flexShrink:1}}>Include a short break</Text><Switch value={breaks} onValueChange={v=>{setBreaks(v);changed()}} accessibilityLabel="Include a short break"/></View><Button title="Keep this plan" onPress={save}/></Card><Card containerStyle={{flex:1,margin:0,padding:24,borderRadius:8}}><Card.Title>Your local plan</Card.Title><Card.Divider/><Text style={{fontSize:48,fontWeight:'700',color:c.primary}}>{[15,25,45][duration]}</Text><Text style={{fontSize:16,color:c.grey1,marginBottom:24}}>minutes for {title.trim()||'your next task'}</Text><Divider/><Text style={{color:c.black,fontSize:16,lineHeight:25,marginVertical:24}}>{breaks?'Finish with a pause before choosing what comes next.':'Keep the end of this block open; no break reminder is included.'}</Text><Text style={{fontSize:13,lineHeight:21,color:c.grey2}}>The duration, task and break choice are original application state. Theme colors, Input, ButtonGroup, Switch, Card and Button come from the installed library.</Text></Card></View><Text accessibilityLiveRegion="polite" style={{color:c.black,fontSize:15,lineHeight:23,marginTop:24}}>{saved}</Text><Button title="Reset the plan" type="clear" onPress={()=>{setTitle('Read a chapter');setDuration(1);setBreaks(true);setError(false);setSaved('');}} containerStyle={{alignSelf:'flex-start',marginTop:8}}/></View>}
createRoot(document.getElementById('root')).render(<SafeAreaProvider><ThemeProvider theme={theme}><App/></ThemeProvider></SafeAreaProvider>);

import {build} from 'esbuild';
await build({entryPoints:['rne.jsx'],bundle:true,minify:true,outfile:'rne.bundle.js',alias:{'react-native':'react-native-web'},resolveExtensions:['.web.js','.js','.jsx','.json'],loader:{'.js':'jsx','.ttf':'dataurl','.png':'dataurl'},define:{'process.env.NODE_ENV':'"production"'}});

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Focus plan composer</title><style>body{margin:0;background:#f4f7fa}*{box-sizing:border-box}input:focus-visible,[role=button]:focus-visible{outline:2px solid #2089dc;outline-offset:3px}</style></head><body><div id="root"></div><script src="./rne.bundle.js"></script></body></html>