what can we do to make preact works for react native?

[seenyea]

what can we do to make preact works for react native?

[developit]

Hi @seenyea! The short answer is: use a native wrapper that exposes DOM.

The long answer is that there are woefully few options for this. Some time ago, I had begun building a DOM interface to React Native, but I have no experience with React Native whatsoever and I'm likely not the best person to do that implementation.

I do know that folks have used Preact with NativeScript and had some success: NativeScript doesn't expose a Web-compatible DOM, but its UI primitives are still quite easily mapped to DOM primitives:

• https://github.com/staydecent/nativescript-preact
• https://github.com/NathanaelA/nativescript-dom/blob/master/src/dom.js

It would also be relatively easy to implement a nativescript-preact using the source of nativescript-vue, which implements a simple DOM on top of NativeScript's UI components that Vue then renders to:
https://github.com/nativescript-vue/nativescript-vue/tree/master/platform/nativescript

[seenyea]

I'll try

[redbar0n]

https://docs.expo.dev/guides/using-preact/ ?

[rschristian]

So if Preact with react-native-web only uses preact on the web, and then switches to using React Native on native

I don't think there's any switching here. More like if you have a codebase of existing React Native components, you can use them in a web app, and you can also alias to Preact to get a considerable perf and bundle size bonus if you wish. You don't switch between react-native-web and react-native as far as I know, though I've rarely touched React Native, perhaps I'm misunderstanding something about it.

people would still be interested in being able to use Preact without feeling they’d lose the ability to go native.

react-native-web is a way to go from React Native to web, not the other way around. You wouldn't end up losing anything due to the fact that it'll take probably just as much effort to convert a React DOM app to React Native as it would a Preact app to React Native. React Native is fairly different, and will require some edits of your components.

Take the following component:

const Foo = () => <h1>Hello World</h1>;

This is how you'd write it both React DOM and Preact. You don't "lose the ability to go native" as React Native will always require you to convert this to the following:

import { Text } from 'react-native';

const Foo = () => <Text>Hello World</Text>;

Same amount of work whether you're using Preact or not.

Preact Native could then just be made as a thin wrapper on top of React Native. So it still looks and feels like the Preact API’s people are used to.

Would this work?

Yes, I don't see why not, but it would be a fair bit of work and likely be of dubious value IMO. While Preact does have a few features and differences to React in places, they're quite limited; "The Preact APIs people are used to" is more or less just React. I don't know that there's enough differences that are highly enough used to justify the workload of writing a custom wrapper in order to continue to utilize them in the same way.

If this is something you're thinking of doing don't let me get in the way of course, it's certainly interesting, but I can't imagine that it's cost (effort) effective.

[redbar0n]

I don't think there's any switching here.

From what I understand then with react-native-web you will use a React Native API, in a single codebase, sharing code across native and web, but it will switch/translate to either React Native or React (react-dom), depending on the environment. (Maybe it's just configs/bindings). It's like a higher level (cross-platform) API which mirrors React Native's API, so that you can directly use components written towards the React Native API.

You wouldn't end up losing anything due to the fact that it'll take probably just as much effort to convert a React DOM app to React Native as it would a Preact app to React Native.

Yeah, that's what I attempted to address by saying:

feeling they’d lose the ability to go native. They wouldn’t actually lose it, because you could use React Native and Preact on web side by side (if you’re having separate apps).

My point here, when we're presuming not using react-native-web, is that React + React Native is deemed as a conceptual whole. Whereas it is not obvious that using Preact + React Native would go so well together. From a conceptual and branding standpoint. At least it wasn't obvious to me that I wouldn't get stuck in quirks and minor differences (fear of unknown unknowns) when using Preact + React Native side by side, as opposed to React + React Native.

I don't know that there's enough differences that are highly enough used to justify the workload of writing a custom wrapper in order to continue to utilize them in the same way.

Probably not, since you say so. That's what I hoped. Maybe it would suffice with a "Preact + React Native" article outlining the small differences, so that native compatibility concerns are eased?

Maybe @seenyea could pitch in here with sharing his original motivation for having Preact working for React Native. Maybe it is the same as mine, or maybe it was different? I personally can't see the use-case for a DOM interface to React Native, at least.

[rschristian]

you will use a React Native API, in a single codebase, sharing code across native and web, but it will switch/translate to either React Native or React (react-dom), depending on the environment.

I don't believe so, no. Looks to just be a compat package for reusing React Native stuff on the web instead. Separate code bases, or a mono-repo style setup seems necessary, but I digress. Not a user myself though, and it's probably not important.

My point here, when we're presuming not using react-native-web, is that React + React Native is deemed as a conceptual whole. Whereas it is not obvious that using Preact + React Native would go so well together.

Ah! Gotcha, makes sense. Apologies, misunderstood. And to be fair, they don't go well together, so that might potentially be a good thing.

At least it wasn't obvious to me that I wouldn't get stuck in quirks and minor differences (fear of unknown unknowns) when using Preact + React Native side by side, as opposed to React + React Native.

Quirks and minor differences aren't what are holding anyone back though, it's the lack of a DOM. You cannot use Preact directly with React Native, and no one (as far as I know) has re-implemented the Preact API as a wrapper. So there's no real need to worry about quirks and minor differences in the implementation, as you cannot get to that point to begin with.

Maybe it would suffice with a "Preact + React Native" article outlining the small differences, so that native compatibility concerns are eased?

If you had a Preact app that you wanted to copy or recreate in React Native, besides all the standard conversion work you'd have to do (React DOM -> React Native), there's very few differences you actually run into, especially if already using compat. Maybe you're using Preact's useErrorBoundary() hook, or using the third parameter to Preact's render(), but these aren't often ran into (from what I've seen. Entirely anecdotal, take with a huge grain of salt). The Differences to React section of the site goes over most of these, and there's not a ton.

It'd more or less just be differences between Preact and React/React DOM, and then you compare/contrast React DOM and React Native.

[redbar0n]

it's the lack of a DOM.

Is it even desirable to implement the DOM on native, in any case?
When the DOM is already so disliked on the web for being slow and cumbersome to deal with... (to the point it even lead React to invent the VDOM).

You cannot use Preact directly with React Native, and no one (as far as I know) has re-implemented the Preact API as a wrapper. So there's no real need to worry about quirks and minor differences in the implementation, as you cannot get to that point to begin with.

Here, I was thinking of using them side-by-side, as separate apps; written separately (separate code-bases), but also attempting to closely mirror each other (UI and feature wise). Using Preact for web (mobile-first), and React Native for native (mobile). The potential quirks and minor differences would be of concern when learning and using two ever so slightly different APIs.

there's very few differences you actually run into, especially if already using compat.

Ok, that's great. I looked into the differences section a bit more, and it seems that with preact-compat they can be reduced to 0%. So the concern in the previous point is eliminated.

[rschristian]

Side note: preact-compat and preact/compat are two different packages. preact-compat is very much legacy at this point, and only works for Preact 8.x and prior.

[redbar0n]

React Native's Gesture Responder System is different than the browser's native DOM event system that Preact uses:
To resolve this fundamental incompatibility, it seems that Preact with Expo for Web uses the preact-responder-event-plugin which README says:

This library implement the react native's Gesture Responder System which is required by react-native-web.
It brings the preact and react-native-web together like what react-dom does for react and react-native-web. Now you can build a react native app into web app by using preact.

This is used by Preact with Expo for Web to use React Native on web with Preact. Maybe it could be used as inspiration if going the other way: to get Preact on Native.

If this is really desirable at all? Since Preact uses the browser's native DOM API's, you'd have to reimplement the DOM directly on native, or a DOM interface to React Native. (Which I don't see why anyone would like to do...) Preact doesn't seem to have the intention to do it, from what I can tell:

It's very unlikely that we'll add support for such a system and won't support react-native ... any time soon. We're mainly focused on supporting the web directly without intermediate abstractions 🙂

#1830 (comment)

[redbar0n]

In any case, I think the OP's original question is best understood as "What can we do to make Preact work with React Native?".
Where the answer is simply:

• If you're using react-native-web, then use this config: Preact with Expo for Web
• If you're having a separate web app and React Native app, then use Preact with preact-compat and use it just as you would use React with React Native. You could have 0% difference, and not really need to learn anything new. As long as you are mindful to stay clear of some subtle differences to React for some edge-cases, and don't use the extra Preact only convenience features listed there (if you don't want to learn anything besides React).