Cursor disappear when using TextInput

[jcubic]

When using a TextInput element the cursor disappears when inside color Text.

The cursor only appears when it's at the end of the line.

this is my code:

const Editor = ({ initValue, style, onChange = () => {} }: EditorProps) => {
  const [value, setValue] = useState<string>(initValue);

  const changeHandler = (text: string) => {
    setValue(text);
    onChange(text);
  };
  const ast = parse(value);

  const headers: HeaderNode[] = ast.filter(isHeaderNode);

  console.log(JSON.stringify(ast, null, 4));

  return (
    <TextInput
      style={[styles.editor, style]}
      multiline
      autoComplete="off"
      autoCorrect={false}
      autoFocus={true}
      onChangeText={changeHandler}>
      <Text>
        {ast.map((node, index) => {
          const style = styles[node.type];
          if (node.type !== 'link') {
            const { content } = node;
            const key = `${index}-${content}`;
            if (node.type === 'code') {
               const { language } = node;
               if (!language) {
                 return (
                   <Text key={key} style={style}>
                     ```{ content }{'\n'}```
                   </Text>
                 );
               } else {
                 return (
                   <Fragment key={key}>
                     <Text>```{language}</Text>
                     <SyntaxHighlighter
                       language={language}
                       style={atomOneLight}
                       fontSize={fontSize}
                       PreTag={Text}
                       CodeTag={Text}
                       highlighter={'hljs'}
                     >
                       { content }
                     </SyntaxHighlighter>
                     <Text>```</Text>
                   </Fragment>
                 );
               }
            }
            return (
              <Text key={key} style={style}>{ content }</Text>
            );
          }
        })}
      </Text>
    </TextInput>
  );
};

[jcubic]

I've found a workaround, it seems that this is caused by background on Text created for Code or Pre tags.

Adding this Dummy Text component as Pre and Code solves the issue:

import { type FC, type ReactNode } from 'react';
import { Text } from 'react-native';

const DummyText: FC<{children: ReactNode}> = ({ children }) => {
  return <Text>{children}</Text>;
};

const Component = () => {
  return (
    <SyntaxHighlighter
      language={language}
      style={atomOneLight}
      fontSize={fontSize}
      PreTag={DummyText}
      CodeTag={DummyText}
      highlighter={'hljs'}
    >
      { content }
    </SyntaxHighlighter>
  );
}