Renderização condicional de texto no React Native

Recentemente, me deparei com um erro bem estranho em um projeto Expo (ou seja, React Native). A mensagem dizia que havia uma string fora de um componente <Text>, mas, olhando o código, tudo parecia correto. Todos os textos estavam dentro de <Text>, e não havia nada fora do lugar.

Depois de o Github Copilot do VS Code não ajudar em nada e eu arrancar alguns cabelos, acabei chegando no Stack Overflow e descobri que o problema estava na forma como eu estava fazendo a renderização condicional de um texto. Eu estava usando um padrão até bastante no mundo React/React Native:

{condition && <Text>Algum texto</Text>}

Isso funciona em muitos casos, mas no Native pode causar problemas com o componente de texto.

Por que isso acontece

O problema é que o operador && retorna o segundo valor caso o primeiro seja "truthy", e retorna o próprio valor do primeiro operando se ele for "falsy" .

No React Native, isso é perigoso porque valores como '', 0, false, null ou undefined acabam sendo renderizados diretamente no JSX, o que não é permitido fora de um <Text>.

Por exemplo:

let condition = '';

{condition && <Text>Texto</Text>} 

Se condition for '' (string vazia), o resultado da expressão será '', e o expo (ou o react-native, se estiver usando o cli) irá tentar renderizar como um nó JSX fora de um <Text> — o que dispara a RedBox:

Esse erro pode ser difícil de rastrear, pois o código "parece correto", mas o problema está no valor avaliado.

Existe inclusive uma issue no GitHub do React Native sobre o tema: https://github.com/facebook/react-native/issues/29980

A forma mais adequada

A forma mais segura de fazer renderização condicional de texto é usando o operador ternário:

{condition ? <Text>Algum texto</Text> : null}

Dessa forma, você garante que a expressão sempre retorna um JSX válido ou null, sem risco de cair em comportamentos inesperados do React Native.

No React para web, strings e números podem ser renderizados diretamente como filhos de elementos como <div> ou <span>. Já no React Native, qualquer texto literal precisa estar dentro de um <Text>, o que torna a plataforma mais sensível a esse tipo de erro.

Conclusão

Se você estiver renderizando texto condicionalmente no React Native, sempre prefira o operador ternário. Evita erros difíceis de entender e te poupa tempo de debug. O padrão condition && <Text> funciona no React para web, mas no React Native ele pode quebrar seu app silenciosamente ou com mensagens confusas.