TX004

<Box> aninhado dentro de <Text>

Console

Text.js error TX004: <Box> cannot be nested inside <Text>.

Por que isso acontece

<Text> organiza um trecho de texto em linha; ele não pode conter um contêiner Flexbox. Um <Box> (ou um componente que renderiza um, como <Spacer> ou <Divider>) foi renderizado dentro de um <Text>.

Como corrigir

Mova o <Box> para fora e coloque os elementos de texto irmãos lado a lado em uma linha:

// Before<Text>  Status: <Box><Text color="green">ok</Text></Box></Text>// After<Box flexDirection="row">  <Text>Status: </Text>  <Text color="green">ok</Text></Box>

Um <Text> aninhado é válido; ele é renderizado como um span em linha.