iamacup / react-native-markdown-display

React Native 100% compatible CommonMark renderer
MIT License
607 stars 173 forks source link

Passing `ref={ref}` to a `markdownRule` component causes app to become unresponsive #223

Open jdatcharacter opened 3 months ago

jdatcharacter commented 3 months ago

Simulating on iPhone 15

"react-native": "0.72.12",
"react-native-markdown-display": "7.0.0-alpha.2",
// custom render method
const renderText = (textRef, node, ...args) => {
  return <Text ref={textRef}>{node.content}</Text>
}
const MyComponent = () => {
  const textRef = React.useRef(null)

  const markdownRules = {
    text: (...args) => renderText(textRef, ...args);
  }

  return (<Markdown rules={markdownRules} style={markdownTheme}>
      {message.raw_content}
    </Markdown>)
}

Has this been reported before? Seems like refs may not be passed correctly or something funky is going on.

jdatcharacter commented 3 months ago

After digging a little deeper into the react native Text docs, it may be because nested text nodes are resolved into a single text node - making a ref to a nested text impossible.

Trying to add a custom style to a text node using a view wrapper - doesn't seem to be possible if any parent nodes are Text nodes. Any thoughts welcome.