React Native Support #2410
-
|
I know this is a big ask because it would require Native Bindings in Kotlin and Swift, but are there any plans to get React Native support for Lexical? It would be a game changer for many and to me would be a huge advantage in moving away from ProseMirror to Lexical. The use cases to me are obvious, being able to use one project across web and mobile operating systems |
Beta Was this translation helpful? Give feedback.
Replies: 11 comments 23 replies
-
|
Which would be the most important considerations for you in a hypothetical React Native version of Lexical?
|
Beta Was this translation helpful? Give feedback.
-
|
Hey @amyworrall. Thanks for the quick reply. I think it's a combination of 1,2, and 4. I'm not sure how we could use Lexical outside of a web view on RN, which is problematic. Ideally there would be a Lexcial framework that is as low level as Lexical, but allows for native bindings to iOS and Android. I'd have to dig into this more but it seems likely that the core engine, such as |
Beta Was this translation helpful? Give feedback.
-
|
Yes please 🥺 React Native support would be tremendous 🥳 Ideally all 4 points 😅😇 |
Beta Was this translation helpful? Give feedback.
-
|
As Dominic has hinted elsewhere, I’m leading a project to build native Lexical on iOS. I’m in the very early days of looking in to what a React Native wrapper around Lexical iOS would look like. The main sticking point is ensuring synchronous callbacks from JS to native, which requires bleeding edge RN features, but aside from that the issue will be the completely different layout engine for TextKit on iOS compared with DOM/CSS. So even if we enable building node subclasses in JS under RN, those node subclasses will have to use iOS semantics (providing string attributes rather than Dom nodes). That’s why I’m trying to find out what the most useful level of RN support would be, to ensure we focus on making that a good experience first. (I know I’ve not mentioned Android either. We have nothing to talk about there yet, alas.) |
Beta Was this translation helpful? Give feedback.
-
|
Closing and moving to a discussion as question above has been answered. |
Beta Was this translation helpful? Give feedback.
-
|
So, there is no intent to port lexical to ReactNative in a Webview? |
Beta Was this translation helpful? Give feedback.
-
|
Bumping this - would love an update on the progress if available! |
Beta Was this translation helpful? Give feedback.
-
|
@amyworrall I'd love to know if the iOS version is still happening. I actually do NOT require react native support. I'd be happy with an iOS version that could read the editorState from the web and render identical looking nodes. Any update on the project would be super helpful. Thank you all for a great project! |
Beta Was this translation helpful? Give feedback.
-
|
Hey @zurfyx, @acywatson, what is the current status of React Native support? Maybe you can answer these questions #2410 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
@acywatson is it still the plan to only experiment with iOS native support? Is there any plan to experiment with an Android native version as well? |
Beta Was this translation helpful? Give feedback.
-
|
We did end up open-sourcing Lexical iOS: https://github.com/facebook/lexical-ios and we also have an extremely basic android version, but I am still not confident about that or RN support being released into OSS in the near future, unfortunately. @amyworrall |
Beta Was this translation helpful? Give feedback.
-
|
Having the ios renderer out is promising enough! I imagine the RN layer would naturally come last anyway, after establishing platform compatibility. Thanks for the transparent update. |
Beta Was this translation helpful? Give feedback.
-
|
@acywatson Do you have any update to share on the RN support for cross IOS & Android support please? |
Beta Was this translation helpful? Give feedback.
-
|
@acywatson any progress of native android version? |
Beta Was this translation helpful? Give feedback.
-
|
Has anyone tried lexical in a webview with React Native? |
Beta Was this translation helpful? Give feedback.
-
|
Hey, I finally managed to finish the guide: https://strdr4605.com/how-to-set-up-lexical-editor-in-react-native |
Beta Was this translation helpful? Give feedback.
-
|
Amazing. @strdr4605, can we add the content to the docs site with a link back to your site? PR welcome if you want to do that, or we can later. |
Beta Was this translation helpful? Give feedback.
-
|
@acywatson let's do this a bit later, the article is still fresh so I might add something missing |
Beta Was this translation helpful? Give feedback.
-
|
@acywatson, do you want to add the whole guide to https://lexical.dev/ or just a section that describes the current state of React Native support, and add the link to my guide? |
Beta Was this translation helpful? Give feedback.
-
|
I was thinking add the content, and also a link - just so people could search the content on the site. I'm honestly good either way, though. |
Beta Was this translation helpful? Give feedback.
-
|
Hello, very nice work on the Lexical framework real life saver. Knowing this will help a great deal if i can choose to use the lexical framework in my project or not. Many Thanks. |
Beta Was this translation helpful? Give feedback.
-
|
You can parse the lexical state in React Native and render it using Text with styles. You can even create an adapter for a basic Input. In our project we created an adapter from/to lexical state with https://github.com/dabakovich/react-native-controlled-mentions But if you have a more complex state with custom nodes and plugins, for now you can use a webview (still not bulletproof, but it's working, we use it in production), check https://strdr4605.com/how-to-set-up-lexical-editor-in-react-native |
Beta Was this translation helpful? Give feedback.
-
|
@strdr4605 I've checked the repo, Very much appreciated. |
Beta Was this translation helpful? Give feedback.
-
|
hey @strdr4605 can you share how you converted react-native-controlled-mentions value to lexical state? |
Beta Was this translation helpful? Give feedback.
-
|
@davevilela, can't help you much here but you can check a fast description of the workflow: |
Beta Was this translation helpful? Give feedback.
As Dominic has hinted elsewhere, I’m leading a project to build native Lexical on iOS. I’m in the very early days of looking in to what a React Native wrapper around Lexical iOS would look like. The main sticking point is ensuring synchronous callbacks from JS to native, which requires bleeding edge RN features, but aside from that the issue will be the completely different layout engine for TextKit on iOS compared with DOM/CSS. So even if we enable building node subclasses in JS under RN, those node subclasses will have to use iOS semantics (providing string attributes rather than Dom nodes). That’s why I’m trying to find out what the most useful level of RN support would be, to ensure w…