#Rich text content rendering on React Native (@payloadcms/richtext-lexical)

14 messages · Page 1 of 1 (latest)

royal cedar
#

Hey!

So, in the richtext-lexical package, I see a RichText component to render serialized lexical content into JSX so it can be displayed in a react app. My question is: are there plans to add support for react-native? If not, is it because nobody asked, or is it because of some issue or payloadcms guideline I'm not aware of.

I'm asking because I was in need of it, and was thinking of adding react-native support in the package. But I wanted to look around before hand, if anyone has pointers or feedback before I start.

Thanks!

bright valveBOT
royal cedar
#

Rich text content rendering on React Native (@payloadcms/richtext-lexical)

haughty robin
#

Hey @royal cedar this is more of a Lexical thing than a Payload thing.

Lexical's editor is DOM-dependent — it relies on APIs that don't exist in React Native. Meta themselves have not shipped a React Native version of Lexical.

I ran into this with a personal app of mine and ended up going with a WebView approach as that was much simpler, and what many other teams use

royal cedar
#

I see. In your experience, would you see a Renderer-only implementation feasible/worthwhile? In my mind, it kind of looks "obvious" that there would be a huge demand for it, but maybe I'm getting tunnel-visionned again.

#

Even if a renderer-only implementation was made, it would probably be barebone?

haughty robin
#

It is probably much more work than it is worth IMO

#

many many big apps just use WebView, and for now it's the best "solution"

royal cedar
#

Yeah. That's what I've seen in many cases. I thought that most went for the WebView solution because there were no other alternatives tbf.

#

I'll work on my renderer implementation (I have some time to kill, and I was hoping to use the opportunity to get some hands-on experience to look around the codebase). Maybe when I get further, I could present it to the community to see if it's worth integrating? Or maybe better off as a separate package.

#

In any case, thank you for the input 🙏 Much appreciated.

haughty robin
#

I would definitely put it into a separate package, but good luck either way!! You're welcome!

bright valveBOT
modest glen
#

@haughty robin @royal cedar unless you really need to support a lot of Lexical features like font colors and such (even though those would definitely also be possible with this method) why not implement a native rich-text rendered? I've done so for a lot of apps using RTEs and it's usually quite simple, because it's just a recursive component that has a mapping of nodes based on the node type that renders different subcomponents e.g. text becomes p on the web, and this is also how I would do it if trying to render Lexical in Vue, Angular, RN, etc.