Support react-native (view-only)

[Shaddix]

It'd be great to support react-native!

Use case: web-based react-native designer, render the results (view-only) in react-native.

View-only mode (<Editor enabled={false}>) doesn't actually depend on anything dom-related, so it seems easy to make it work under react-native.

I tried it as a proof-of-concept, and it seems that there are only 2 things that needs to be changed:

1. getRandomId should use nanoid/non-secure ('nanoid' doesn't work in react-native)
2. RenderIndicator should import react-dom conditionally. Something like

   
   const isReactNative =
   typeof window !== 'undefined' &&
   window.navigator &&
   window.navigator.product &&
   window.navigator.product === 'ReactNative';

const ReactDOM = !isReactNative ? require('react-dom') : null;

And that's it! After only these two changes it works on React-Native!

I could provide a PR if you are ok with the idea :)

[Shaddix]

seems like the 2nd point is not actually needed, if react-dom is shimmed in react-native project.

[Shaddix]

here's an example repo with react-native project: https://github.com/Shaddix/craft_js_native (though, it only works if node_modules/@craftjs/utils/dist folder is replaced with compiled version from PR branch (i.e. if it uses nanoid/non-secure)

[Shaddix]

aforementioned repo contains JSON 'markup': https://github.com/Shaddix/craft_js_native/blob/master/craft/content.json which is rendered via craftjs in react-native.

If you wish, I could come up with a better looking example and add it to examples folder of this repo

[ggunti]

Actually I started to build a web-based react-native designer based on craftjs. It includes a web app (the UI designer) + android & ios mobile app (view-only). It is at the beginning but you can add it as example if you want. https://github.com/ggunti/rnw-ui-builder

[Shaddix]

@ggunti that's quite interesting! Though, as I see you are using CraftJS on the Editor side, and then generate a regular react-native code to be added to a project.

My idea was a bit different, I wanted to actually use the same component within React-Native app, providing it with the same config that was generated on the web. E.g. to be able to use within react-native something like this (taken from Readme):

const App = () => {
  const jsonString = /* retrieve JSON from server */
  return (
    <Editor>
      <Frame json={jsonString}>
        ...
      </Frame>
    </Editor>
  )
}

My final goal is very similar to what you are doing - to provide a web UI for designing react-native screens. But at the same time I wanted to have an ability to change UI within Admin panel, and have apps update themselves automatically by re-downloading the changed configs (without the need for developers to recompile and publish the apps).

And actually usage of <Editor><Frame> within react-native is possible with a single change to the CraftJS library (i.e. using 'nanoid/non-secure' instead of 'nanoid' to generate ids).

While PR is not accepted, I plan to actually use a patch-package to apply this change and move on.

[ggunti]

@Shaddix I also allow to build the UI on web and use the same component withing React Native app. You can see what you built directly in the mobile apps, no recompilation needed. Generating code is just an additional feature in case that a developer wants to export the UI and include it into own app, which could speed up his development process.

Btw, I did not face the 'nanoid' problem, this is all what I did and craftjs preview worked also on react-native:

if (Platform.OS === 'android' || Platform.OS === 'ios') {
  // @ts-ignore
  document = {
    querySelector: () => {},
  };
}

[Shaddix]

nice, I haven't found this feature while quickly going through your website, probably missed it.

I'm gonna try again with latest version, maybe it's gonna work, thanks for the advice!

[franz-fletcher]

Highly recommend looking into react-native-web for your native preview needs. It's a pretty healthy renderer so it most likely has viable solutions to make the task more of an integration and less of a feature implementation task for craft.js support.

[aqos156]

Any info on this? We are trying to run this in expo on web for editing, didn't get yet to native side, because we are having trouble creating the editor ui within react native web. The drag and drop works, but indicator is missing, it is quite slow compared to the examples on web and we often get the following error

Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at de (index.js:1:1)
    at e.value (index.js:1:1)
    at index.js:1:1
    at HTMLDivElement.i (index.js:1:1)

any ideas? A working example repository? Thank you in advance!