Theme-ui: Can I use it in React Native?

[nicolazj]

After some hacks,( getting rid of document ), I managed to get theme-ui work in React Native.
But just wondering is it a good idea to use theme-ui in React Native?
Did I miss anything?
I haven't tested the responsive part.

[jxnblk]

"Responsive" won't work with RN since Android and iOS don't use media queries. There is a related RN issue in the Styled System library (which is pure js with no frameworks or css-in-js libraries), and you should be able to leverage the Styled System CSS package directly in RN if you want a similar API

[flybayer]

Fyi, here's how I'm getting the sx experience in react-native & react-native-web

[nandorojo]

@flybayer Any shot you could elaborate a little bit on this? Do you just set the theme ui provider, make those components, and that’s it?

[nandorojo]

"Responsive" won't work with RN since Android and iOS don't use media queries.

Expo now polyfills the match media api: https://github.com/expo/match-media/blob/master/README.md

Could that add responsive features?

[nandorojo]

Sorry to keep harping on this, but @flybayer would you happen to have example code of your implementation? If not, just let me know. I tried to use your suggestion but get many TS errors.

[flybayer]

@nandorojo my last comment has all the code (sorry it's an image instead of text). TS types were working fine then. Maybe something has changed that needs updated? I've moved on from that project, so can't provide anything else unfortunately.

[hasparus]

Hey @nandorojo 👋 Paste me your TS errors, I'll try to help.

We should probably keep this out of Theme UI issues, however, since it's styled-components/native and styled-system.

[nandorojo]

Sounds good, where should I put the issue?

I made a repo that seems to have gotten this to work. I can drop a link to the repo or just paste the code. In order to implement responsive behavior, I’m using React Native Dimensions and conditionally-rendering styles based on that.

[hasparus]

We can talk in your repo, if you drop me a link here or move to Twitter or Discord.

[cmaycumber]

@nandorojo Were you able to get media queries working with expo/theme-ui? This would be really sweet for rnw.

[nandorojo]

@cmaycumber Yes, I ended up moving it to another repo called dripsy. yarn add dripsy

Docs: https://github.com/nandorojo/dripsy

[rafaelrinaldi]

So it seems like the current state for interop between React and React Native with Theme UI is still not quite possible out of the box, correct?

Given the suggestions on this post, seems like the way to go would be to both isolate all the primitives in some sort of adapter and then perhaps use @nandorojo's solution for responsiveness on the React Native side?

Anyone else willing to shed some light on this?

[nandorojo]

@rafaelrinaldi Yup. dripsy is still actively getting worked on. It will have the same / very similar primitives as Theme UI, and basically the same API for styling. You're welcome to try it out now, I'll be adding full docs soon, with the help of @cmaycumber

[rafaelrinaldi]

My good friend @estevaolucas just shared this library with me: theme-ui-native. Seems to be a really good alternative to solve this specific use case. Has anyone ever used it?

[nandorojo]

@rafaelrinaldi that looks really cool. Unfortunately it doesn't have responsive styles. But I could definitely see how I could integrate a lot of the ideas there into dripsy. A goal I have is to support Expo/Vanilla RN + RN Web + Server Side Rendering (Next.js).

[cmaycumber]

@rafaelrinaldi I've used it in the past just to experiment with it. I liked how it had jsx pragma and basically the same API as theme-ui. The main reason I started to help @nandorojo with dripsy was the responsiveness that allows for building web apps or websites easily with react native as well as mobile apps.

[rafaelrinaldi]

Thanks for the input @nandorojo @cmaycumber. Do you guys plan on making the theme specification compliant to Theme UI's?

[nandorojo]

Under the hood, dripsy uses the ThemeProvider from theme-ui, as well as the same css function, with some additions for React Native-combatible responsive styles. So once we make the primitives, theming should basically be the same as theme-ui.

I can't confirm that every detail will always be identical, since it's tailored to React Native/React Native Web, which may have some of its own quirks down the road. But I love the theming in theme-ui, and I made dripsy to be able to use the same theming in my native apps.

I'm also happy to accept help / input on the library from people who want a great theming experience for their native apps.

[rafaelrinaldi]

@nandorojo Have you thought about using something like react-primitives for dripsy? In theory it would allow you to isolate the runtime for both the browser and native environments.

[nandorojo]

@rafaelrinaldi that's interesting. I haven't. React Native Web seems like the most practical application at the moment, so for now I'm sticking to targeting the platforms that are well-supported by React Native.

You could open an issue on Dripsy if you use the primitives and think it's an important use case.