# Sistema de design React Native Elements ## React Native Elements Prévia da interface do sistema de design Edite a tarefa, a duração e a opção de pausa; confira a validação, a aparência e a redefinição. ## Referência de design do sistema de design React Native Elements Valores padrão fixos da fonte RNEUI, APIs públicas de componentes e escolhas da aplicação identificadas explicitamente. ### Cores do tema claro | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | lightColors.primary | #2089dc | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | lightColors.secondary | #ad1457 | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | lightColors.background | #ffffff | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | lightColors.black | #242424 | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | lightColors.white | #ffffff | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | lightColors.grey1 | #43484d | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | lightColors.grey2 | #5e6977 | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | lightColors.grey5 | #e1e8ee | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | lightColors.success | #52c41a | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | lightColors.error | #ff190c | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | lightColors.warning | #faad14 | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | ### Cores do tema escuro | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | darkColors.primary | #439ce0 | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | darkColors.secondary | #aa49eb | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | darkColors.background | #080808 | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | darkColors.black | #f2f2f2 | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | darkColors.white | #080808 | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | darkColors.grey1 | #bdc6cf | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | darkColors.grey2 | #86939e | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | darkColors.grey5 | #393e42 | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | darkColors.success | #439946 | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | darkColors.error | #bf2c24 | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | | darkColors.warning | #cfbe27 | Valor real do tema RNEUI. Funções como preto/branco invertem seu significado visual no modo escuro; use o tema ativo em vez de cores literais definidas diretamente no código. | ### Espaçamento padrão e escolhas explícitas da aplicação | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | spacing.xs | 2 | Entrada de espaçamento padrão publicada; esses nomes compõem um objeto de tema, não tokens de variável CSS. | | spacing.sm | 4 | Entrada de espaçamento padrão publicada; esses nomes compõem um objeto de tema, não tokens de variável CSS. | | spacing.md | 8 | Entrada de espaçamento padrão publicada; esses nomes compõem um objeto de tema, não tokens de variável CSS. | | spacing.lg | 12 | Entrada de espaçamento padrão publicada; esses nomes compõem um objeto de tema, não tokens de variável CSS. | | spacing.xl | 24 | Entrada de espaçamento padrão publicada; esses nomes compõem um objeto de tema, não tokens de variável CSS. | | Sample heading | 32px / weight 700 | Escolha original do exemplo, configurada explicitamente na fonte fornecida, e não representada como um tipo ou token de raio global oficial. | | Sample body | 15px / 23px line height | Escolha original do exemplo, configurada explicitamente na fonte fornecida, e não representada como um tipo ou token de raio global oficial. | | Sample cards | 24px padding / 8px radius | Escolha original do exemplo, configurada explicitamente na fonte fornecida, e não representada como um tipo ou token de raio global oficial. | | Button component default | radius: 6 | Escolha original do exemplo, configurada explicitamente na fonte fornecida, e não representada como um tipo ou token de raio global oficial. | ### Contratos de componentes e provedores | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | createTheme | mode, components, lightColors, darkColors | ThemeProvider recebe o objeto construído; os valores padrão continuam disponíveis quando apenas os componentes são alterados. | | useTheme | theme, updateTheme | A ação de aparência altera o modo sem redefinir o estado da aplicação. | | Input | value, onChangeText, errorMessage, ref | O erro de tarefa vazia fica visível e o foco retorna ao campo de entrada correspondente. | | ButtonGroup | buttons, selectedIndex, onPress | O índice controlado seleciona 15, 25 ou 45 minutos; ele não representa a duração em si. | | Switch | value, onValueChange | O booleano controlado altera a descrição da pausa. | | Card | Card.Title, Card.Divider | Superfícies estruturadas herdam o tema selecionado. | | Button | title, onPress, type | A ação de salvar valida o estado local; a redefinição restaura os valores padrão. | | SafeAreaProvider | Outer application provider | Contexto de integração obrigatório; o sucesso na web não comprova o comportamento da área segura em dispositivos nativos. | ## Guia completo do sistema de design React Native Elements Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## React Native Elements Ambiente de execução e escopo web do sistema de design ### Execute os componentes reais com tema > Este exemplo usa @rneui/themed e @rneui/base na versão 5.0.0, React 19.2.0 e React Native Web 0.21.3. A compilação para navegador associa react-native a react-native-web e seleciona módulos .web.js antes dos módulos genéricos de JavaScript. São componentes reais da biblioteca renderizados na web, não caixas HTML que imitam uma captura de tela de celular. O arquivo de compilação fornecido inclui essa opção de resolução para que o código independente reproduza a prévia. ### Mantenha separadas as evidências da web e do ambiente nativo A composição é um editor de plano de foco, não um cronômetro em funcionamento nem um gerenciador de notificações. SafeAreaProvider envolve a aplicação conforme exigido pela integração, mas este teste no navegador não valida as margens internas do iOS ou Android, o comportamento do teclado nativo nem as permissões de notificação do dispositivo. Além destes exemplos de componentes compartilhados, um projeto nativo precisa de compilação para a plataforma e testes no dispositivo. - A renderização web usa React Native Web. - O plano é mantido apenas no estado local de React. - Nenhum cronômetro, notificação do sistema ou salvamento no back-end é iniciado. ## React Native Elements Objetos de tema e cores do sistema de design ### Use as funções do tema ativo createTheme combina as cores claras e escuras integradas com quaisquer substituições explícitas. O exemplo altera apenas os valores padrão dos componentes e o modo. useTheme fornece as cores resolvidas aos elementos View e Text ao redor, para que o título, as descrições e os painéis acompanhem a aparência selecionada. No modo escuro, preto corresponde à função de primeiro plano claro e branco, à função de superfície escura; tratar esses nomes como valores literais de cor comprometeria o tema. ### Não invente uma escala tipográfica universal RNEUI oferece padrões de componentes e opções de personalização, em vez do mesmo modelo de tokens de um sistema de design CSS. Por isso, a referência distingue as entradas reais de defaultSpacing do título de 32px, do texto corrido de 15px e do raio de cartão de 8px do exemplo. Essas dimensões são configurações originais da composição, visíveis no código. Não devem ser descritas como regras obrigatórias da marca React Native Elements. ## React Native Elements Validação de entrada e foco do sistema de design ### Controle explicitamente o texto da tarefa Input recebe um valor e um retorno de chamada onChangeText. A ação de manter remove os espaços em branco do valor antes de verificar se ele está vazio. Se estiver vazio, errorMessage exibe uma solicitação específica e a referência do componente devolve o foco ao campo de entrada. Ao alterar o texto, o erro anterior é limpo e a confirmação local é invalidada, evitando que uma mensagem de salvamento obsoleta descreva um plano que já foi editado. ### Use o rótulo junto com o erro O rótulo visível Tarefa de foco e accessibilityLabel identificam o mesmo controle. O texto de exemplo sugere conteúdo, mas não substitui o rótulo. A validação é acionada pela ação explícita de manter, e não a cada tecla pressionada. A pessoa usuária mantém o rascunho após um erro, e nenhuma animação de salvamento assíncrona sugere uma solicitação ao servidor que nunca ocorre. ## React Native Elements Seleção controlada do sistema de design ### Separe o índice selecionado da duração ButtonGroup recebe três rótulos, selectedIndex e onPress. O índice retornado seleciona um valor da lista original de minutos [15, 25, 45]; usar esse índice diretamente como quantidade de minutos seria um erro na aplicação. O resumo numérico em destaque da prévia é derivado do mesmo índice selecionado, para que o controle segmentado e o plano legível não apresentem informações divergentes. ### Use um booleano real para a opção de pausa Switch recebe value e onValueChange, com um nome acessível que descreve a configuração. O resumo alterna entre uma pausa breve e a ausência de lembrete de pausa. Trata-se apenas de uma preferência do plano: a interface não registra um lembrete do sistema nem agenda uma notificação. O texto de confirmação ao manter reforça esse escopo local. ## React Native Elements Preservação e redefinição de estado do sistema de design ### Mantenha o tema independente do plano Alterar a aparência chama updateTheme com o modo oposto. A tarefa, a duração selecionada, a configuração de pausa e a confirmação local permanecem no estado da aplicação, fora dessa atualização. Os componentes nativos recebem o novo tema sem reconstruir o plano. O teste no navegador altera a aparência depois que uma tarefa personalizada é inserida, para verificar se o modo visual não fica acidentalmente associado à redefinição dos dados. ### Use uma única ação explícita de recuperação Redefinir o plano restaura a tarefa de exemplo, a duração de 25 minutos e a pausa ativada, além de limpar o erro de validação e remover a confirmação. A aparência selecionada é preservada. Assim, a redefinição do conteúdo fica separada da preferência de tema, sem causar um recarregamento inesperado da página inteira. O exemplo não inclui uma camada de persistência; portanto, ao reabrir o documento, a tarefa de exemplo inicial será exibida. ## React Native Elements Composição responsiva do sistema de design ### Adapte o layout com dois cartões O conteúdo usa useWindowDimensions para escolher uma linha acima de 700px e uma coluna em larguras menores. Cada Card não tem margem externa, para que o espaçamento de 24px da composição controle o alinhamento. Em larguras abaixo de 500px, o espaçamento externo diminui para 16px. Os dois cartões apresentam um plano editável e um resumo derivado, em vez de repetir elementos decorativos de preenchimento. ### Confira os padrões dos componentes nos dois temas Os componentes internos do RNEUI podem usar seus próprios estilos padrão além das cores globais. Por exemplo, neste exemplo, os segmentos não selecionados de ButtonGroup mantêm o tratamento de superfície nativo. Um produto que exija outro contraste ou densidade visual pode definir buttonStyle e selectedButtonStyle explicitamente, mas essa decisão deve ser testada, e não atribuída ao tema global automático. ## React Native Elements Configuração completa para navegador do sistema de design ### Inclua a resolução web e os carregadores de recursos O build.mjs fornecido usa esbuild com análise de JSX para dependências de JavaScript, alias de react-native-web, prioridade para .web.js e carregadores de dados para recursos PNG e TTF empacotados. O ponto de entrada do pacote inclui exports que fazem referência a esses recursos, mesmo quando a composição visível não contém ícones. Portanto, não é possível substituir esse processo por uma importação simples, no navegador, do código-fonte sem processamento. ### Teste toda a interação local Salve o código-fonte fornecido como rne.jsx e o HTML como index.html, instale os pacotes fixados, execute o build e disponibilize o diretório. Teste uma tarefa vazia, uma tarefa personalizada, uma duração diferente, o controle de pausa, a aparência e a redefinição. Isso comprova a composição fornecida; não valida automaticamente todos os componentes RNEUI exportados nem todas as plataformas nativas. 1. Mantenha os três arquivos fornecidos no mesmo diretório. 2. Instale as dependências fixadas e execute node build.mjs. 3. Disponibilize o pacote gerado com index.html. 4. Teste os estados vazio, editado, com tema e redefinido. ## Exemplos de componentes do sistema de design React Native Elements ### rne.jsx Provider completo, componentes nativos e estado da aplicação. ``` 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 REACT NATIVE ELEMENTS · WEB STUDYMake room for one thing