React Native rendering support

[aleksivuorela]

We would like to use Puck in React Native project that uses react-native-web. Requirements were that editor works on web only, but rendering the JSON with <Render> should work cross-platform.

Issue is that internally Puck renders <div> elements that do not work on native platforms. This was solved by adding overrides to config for rendering div – similar to how you can already override parts of the editor UI.

Now divs can be replaced with <View> on native platforms by providing config like this to <Render>

import { View } from 'react-native';

const config = {
  components: { ... },
  overrides: {
    div: props => {
      return <View {...props} />;
    }
  }
}

Another issue that caused app to crash on native platforms when importing anything from @measured/puck was in bubble-pointer-events.ts which tried to use Event interface, but it's not defined in native environment. This interface was simply shimmed to prevent crash since I believe it's relevant for editor only.

These changes allowed us to use Puck in our React Native project successfully.

[vercel[bot]]

@aleksivuorela is attempting to deploy a commit to the Puck Team on Vercel.

A member of the Team first needs to authorize it.

[FedericoBonel]

Hello @aleksivuorela!

Thank you very much for your contribution 🙏

We usually prefer having a feature request or bug report before opening a PR. This helps us understand the use case and agree on the best approach before implementation. You'll also have the full context, and we’ll be better prepared to review your changes.

You can read more about our process in the Contributing Guide.

All this means, it might take us a bit longer to review and decide how to move forward with this PR, and we might have some review comments that are higher level before going through implemention details.

[aleksivuorela]

Edit: I've just opened #1418. I think your PR would work in congruence if you can rename the div override to slot.

@chrisvxd I've renamed the override to slot and rebased the branch with your latest changes.

Basically it allows overriding all the default divs via config at once, for example in React Native context where divs aren't available.