Blockly with React Native

[Usaid Khan]

Hello, I am new to Blockly and I have a question that is it possible to integrate Blockly into a React Native app? 

[Eric]

Hello how are you?

Of course you can, see the following link, the "blockly-react" folder has an example implementation with react. link: https://github.com/google/blockly-samples/tree/master/examples

[Usaid Khan]

Thank you for the help, I have checked this "blockly-react" folder but it is built on react and I want to integrate blockly in React Native mobile app. When I use the the same approach in my react native app as in "blockly-react" it gives me the following error on executing this inject function

Blockly.inject(id, { toolbox: toolboxCategories });

ERROR ReferenceError: Property 'document' doesn't exist This error is located at: in App (created by withDevTools(App)) in withDevTools(App) in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in main(RootComponent), js engine: hermes ERROR ReferenceError: Property 'document' doesn't exist This error is located at: in App (created by withDevTools(App)) in withDevTools(App) in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in main(RootComponent), js engine: hermes

 
 

[Christopher Allen]

Hi Usaid,

I'm going to caveat the following with the note that I know little about React Native.

Thank you for the help, I have checked this "blockly-react" folder but it is built on react and I want to integrate blockly in React Native mobile app. When I use the the same approach in my react native app as in "blockly-react" it gives me the following error on executing this inject function

Blockly.inject(id, { toolbox: toolboxCategories });

The stack trace you provide doesn't mention where within Blockly the document reference is, but alas it probably doesn't matter: Blockly is a JS+DOM app and (except in headless mode) assumes the existence of the DOM and therefore of window.document, which as I understand it is not provided by React Native.

So the short answer is that there probably isn't any way to do what you want to do.

It might be possible to support React Native, but without more knowledge of it it's hard to say how difficult it would be.  In any case, however, I suspect it is unlikely  that the Blockly team would be able to devote resources to creating port of Blockly to be able to work without the DOM.  If an external developer with sufficient expertise were to send us a high-quality PR to add such support we would certainly consider it, but it would be quite challenging to do, since assumptions about the existence of the DOM and SVG exist throughout the Blockly codebase, and factoring them out while keeping things readable and maintainable would not be easy.

I note that there were in the past ports of Blockly to iOS and to Android, but they were maintained as almost entirely separate codebases, with the exception that the JSON block definition mechanism and the block extension API was provided so that they could share (most of the) block definitions.  It might be necessary to do something similar for React Native.

Best wishes,

Christopher