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: {
    slot: 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]

@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.

[chrisvxd]

@aleksivuorela thanks for this great contribution! This is smart, but I'm not sure it's quite the right API.

We've been discussing this over here: #965

Instead of using a single override for all slots (you're calling this div), we're exploring slot-specific render overrides, refs, and other options.

I don't think we're quite ready to merge this until the conversation has matured on that side.

---

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

[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.

[chrisvxd]

Apologies for the delay but this looks good to me!

Could you add to the docs here and here?

Edit: Please also rebase and resolve conflicts

[chrisvxd]

This change doesn't seem necessary

[aleksivuorela]

It is necessary – render overrides is provided via the config object. That way both <Puck> and <Render> use the same overrides as they share the config. I suppose the correct place for documentation would be here.

Perhaps the prop should be renamed e.g. renderOverrides so it's not confused with editor overrides.