Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Slate For React Native

See original GitHub issue

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


What’s the current behavior?

React Native Version for Slate


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.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:88
  • Comments:18 (7 by maintainers)

github_iconTop GitHub Comments

vshiacommented, Jul 11, 2018

@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

realbisoyecommented, Nov 3, 2017

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Slate React
Slate React. This sub-library contains the React-specific logic for Slate. ... Find a native DOM selection point from a Slate point.
Read more >
React-native-webview and Slate -
In this blogpost we'll learn how to use slate.js inside a react-native-webview, to create a.
Read more >
slate-react - npm
Tools for building completely customizable richtext editors with React.. Latest version: 0.88.0, last published: 5 days ago.
Read more >
slate-react examples - CodeSandbox
Learn how to use slate-react by viewing and forking slate-react example apps ... how to build a collaborative block text editor with Liveblocks...
Read more >
How to use the slate-react.useSelected function in slate-react
ianstormtaylor / slate / site / examples / images.js · ImageElement = · <div {...attributes}> <div contentEditable={false}> ; ianstormtaylor / slate / site...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found