Slate For React Native

[realbisoye]

Do you want to request a feature or report a bug?

Feature

What's the current behavior?

React Native Version for Slate

Scenario

We are currently working on some improvements to our platform at my company and one of the feature we are rebuilding is our data creation page (a rich text editor). We have decided to use slate for this after considering other alternatives and found slate to be the best for our use case and most importantly, Slate's structured data is very similar to how we want our data to look.

Considering the fact that a good percentage of our users uses our mobile apps (android and iOS, both built with React Native), we have need to make the editor work on React Native to enable our users load and edit information on their mobile devices. I guess a number of slate users who may have similar needs as us or has existing or planning to build react-native apps will love to have a react-native slate version.

Internally, we have been looking into how we can build a slate-react-native and after trying a number of ideas, we were able to make it work by using webview.

The webview implementation is not optimal and is just currently being used as a stop-gap solution and my team members ( @vshia and @UrosZivaljevic) and I, with the support of the SlateJs community would love to create a proper react-native version, hence the reason for creating this issue. Ideally, interested contributor can indicate interest here and we can brainstorm on the best way to do this.

[realbisoye]

For Context, we have tried the following ideas;

• Build a slate-react-native off the existing slate-react.

  We basically forked slate-react and tried to rewrite it for react-native, the major challenge here was the react-native TextInput component is not built for handling complex editing, hence the result was a very slow editor.

• Build a react native editor over one of the existing native editor libraries.

  We considered build a react-native wrapper for iOS-rich-text-editor for iOS and Knife for Android, the challenge was that it seems iOS-Rich-Text-Editor is no longer maintained (its the only non webview based iOS editor we can find), others like ZSS Editor are built on webivew) and for Knife, we couldn't get its change/update events to work with slate.

• Wrap the existing slate-react in a react-native Webview.

  This works and is currently our stop gap solution but its also not optimal and we will also like to explore other options with everyone.

Also mentioned in the original issue, kindly lets discuss how we can solve this, it can be based on any of the ideas we have tried (we are probably doing one or two things wrong) or a fresh method.

[Nantris]

@andela-batolagbe Thanks for what you're doing. I think this is awesome and important.

Instinctively Webview doesn't seem like a great solution due to it's hacky nature, but factually speaking, what significant problems are you having with this solution?

[Nantris]

Anyone have an update on this? Has any more work been done on this either officially or by the community? Can anyone give me some feedback on how the Webview solution works in the field?

[vshia]

@Slapbox We put a hold on this for now since it seemed like too much work to get working and we were able to get a webview working in our mobile app for iOS. For iOS, we used WKWebView to load Slate (as opposed to UIWebView) and used ideas from https://blog.bigbinary.com/2016/05/25/send-receive-data-between-react-native-and-webview.html to pass data between React Native and our Slate webview.

[juangl]

I'd say that one of the downsides of the webView approach is the deprecated native webView component on iOS. the React Native WebView relies on UIWebView, which is deprecated and brings lots of pitfalls, such as the click delay. I'd suggest implementing it on a WKWebView.

You have to bundle React in your webView asset as well (and other libraries you may use) and this increases your app size. You can't use the same library on React Native and WebView (you may want to use Preact instead).

But there are also lots of advantage. I believe that this is a solid approach.

[oyeanuj]

@vshia @realbisoye Is there an example implementation or gist of your setup today?

[Nantris]

@vshia and @juangl thank you very much for reports. They are tremendously helpful.

@juangl can you clarify this for me? I'm a bit confused by it.

You can't use the same library on React Native and WebView (you may want to use Preact instead).

If anyone has any implementation code they'd be willing to share, I would be extremely appreciative. I've loved Slate so far, but I'm worried about getting it working on React-Native.

[realbisoye]

@oyeanuj, @Slapbox, There is a simple demo/test of idea app here. Although its slightly different from our actual implementation as this uses React Native UI Webview (our current app uses WK Webview), the basic idea is the same with what we have (A mini react/slate app running in a webview).

In case you want to try it out, there is WKWebview component for react native you can consider.

[juangl]

@Slapbox Sorry for the confusion. I mean, you would have two bundles, one for your app and one for the WebView. Each containing the React library separately.

[Nantris]

@realbisoye thank you so much for making that code public! I'm sure that will be a huge help to myself and many others. Have you had any issues with performance? Has there been a substantial difference between the speed of the React Native Webview and the WKWebview?

@juangl I see what you mean now. Thanks very much for taking the time to clarify.

[vshia]

@Slapbox I'm pretty sure that RN Webview library is a wrapper for WKWebView so there wouldn't be a difference in speed.

[Nantris]

@realbisoye is your company using Slate on mobile at this point?

[vshia]

@Slapbox , @realbisoye, Nathan (@nathanfu88) and I were working on this and ended up using Slate in a webview on an Android/iOS app. On iOS, Slate in a webview worked as-expected. On Android, we ran into the known issues and our findings are posted here which was posted in https://github.com/ianstormtaylor/slate/issues/725#issuecomment-398152295.

[Nantris]

@mattkrick is working on some improvements to his already outstanding work seen in this PR: https://github.com/ianstormtaylor/slate/pull/1935

I'm very excited!

Edit: Holy crap those are some lengthy and formal findings!

[Francesco-Lanciana]

Out of interest (I know next to nothing about native apps and react-native), what does using Slate for this get you over using a plain UITextView that's editable in something like Swift for iOS (I'm guessing react-native has a component to create something like this)?

[DaniAkash]

Hi, I created React Native Draftjs using a create react app project that runs inside a webview of react native. So far it has been working great. If anyone's interested you can follow the pattern in my project to implement a react native version of slate.js

[devanflores]

how does this work? I'm struggling to inject the slate react component into the webview component in react native. How do you put the slate component within the webview react native? Pinging @DaniAkash @realbisoye because you seem to know how to get slate working inside the source of the webview

[linuxhackr]

@devanflores did you find solution? I'm facing same issue.

[davevilela]

Any Followups on this ?

[CanRau]

Still in early development but Lexical looks great and might bring RN support at some point

https://github.com/facebook/lexical/discussions/2410

[Nantris]

They're only planning an iOS native version currently, as far as I'm aware.