Chakra-ui: React Native support

[zaguiini]

First of all I'm sorry if this is not the correct place to do this.

So I'm seeing this UI library and it's astonishing. I didn't see such beauty in a while and I'm wondering if we could extend this exact lib to React Native.

I know it's a huge step and I don't expect it to be fast, but in my point of view it would be amazing since I don't know many libraries that has this kind of support.

What do you think? We can create a RFC or an umbrella issue/PR adding that possibility. I think it would be awesome to replicate the exact same styles to the mobile platform, since they are amazing.

Thanks in advance!

[segunadebayo]

This sounds interesting @zaguiini. It's not in the pipeline at the moment but it's something worth considering. Feel free to start some work on it if you're interested, maybe pick a few components to implement in React Native.

I don't know React Native at the moment but I'd be happy to look through the code once you have a PR.

[willianhf]

Would be nice use this library in React Native!
@zaguiini started implementing something? I'd be like to help.

[zaguiini]

No, I didn't. I'm not having much time lately, sorry. But if you start something, I'll help as much as I can.

[zaguiini]

Messing around with it. Some progress at least!

Here* is what I did. Excited??? 😄

* Of course this is not how I'm going to implement the p property for example... I just made it work for validation purposes. Maybe we'll make something more elaborated there. 😉

@willianhf we could chat. How could I reach you? Slack? Skype?

@segunadebayo could you please pin this again? It looks like it's doable.

[coodoo]

Making chakra cross platform is indeed a very intriguing idea, has anyone considered to build it on top of react-native-web so that it supports both web and mobile devices out of the box?

https://github.com/necolas/react-native-web

[willianhf]

@zaguiini can it be by discord? I usually use it, that's my tag jet#5723

[zaguiini]

Making chakra cross platform is indeed a very intriguing idea, has anyone considered to build it on top of react-native-web so that it supports both web and mobile devices out of the box?

https://github.com/necolas/react-native-web

The problem with it is that we would need to rewrite the whole codebase again? Or is it incremental?

[steida]

RNW has own css-in-js, so yes, whole lib would have to be rewrittten.

[segunadebayo]

In the TypeScript implementation, I'm extracting most of the component logic into hooks so it can be consumed in React Native Web and React (Web). Perhaps, it might help.

[steida]

@segunadebayo It definitely helps, but as I said, the point of RNW is its API, both components and CSS.

[zaguiini]

As we have a monorepo, the approach I was thinking was to have that package to the component logic; maybe rename @chakra-ui/core to @chakra-ui/web and create a package called native which will use the logic from the sibling package and will have the styles created using emotion and styled-system, built with TypeScript from ground up (we might use TSDX for that).

Thoughts @segunadebayo ? I think that renaming from core to web might look tough but IMO that's a better option than having core and native since it becomes ambiguous... But if you don't like it, we'll leave it as it is. However I suggest this because you're already refactoring it if I'm not wrong and you plan to release a new major version, which might include breaking changes, so I guess if you're open to change it, the time is now.

cc @willianhf @steida

[willianhf]

Sounds nice to me, but rename package could be a hindrance.

[zaguiini]

Just FYI: I'm already doing something along the lines of Chakra for RN, working on it. But... I'm not using emotion as it doesn't have typings for TS. I'm using styled-components, but the result is similar:

[steida]

I really don't understand why people use styled-components abstraction over perfect and typed React Native Web. OK, I know why. They believe untyped strings soup is better than typed JSON because it's sooooo familiar. Styled components - ripped glamor, RNW just for familiar strings.

[ProsperDevelopment]

This is something my team also would be interested in - we have mobile apps coming later in the pipe, at it would be a-some to be able to use Chakra UI there as well.

[rahsheen]

Any updates on this?

[rynpatk]

I'd be willing to help with this, and plan to do so in my spare time anyways. I use styled-system on every RN project I'm on these days and would love to leverage chakra as a consistent out-of-the-box setup.

[segunadebayo]

@zaguiini. Do you have any updates?

[matepapp]

@rynatk is styled-system compatible with React Native 😮?

[zaguiini]

@segunadebayo sorry, I'm having little to no time to work on this one :/ Life has been busy lately...

The first step would be to create .native.js files to deal with Metro's resolution

[segunadebayo]

No worries @zaguiini. Take your time, I believe someone here might be able to pick up from where you stopped. It might be good to leave the link to your repo here to show your progress so far.

Thank you man

[ri7nz]

@matepapp Yes, styled-system it's work on react-native, but need some adjustment for breakpoints. I current work in my company with react-native and styled-system, I start from September 2019.

@zaguiini What can I help :smiley: ?

[jsartisan]

Hi all, If anyone looking for a react native port of chakra-ui, do consider - https://magnus-ui.com/ :)
It is heavily inspired by chakra-ui 👍
I am working on the docs heavily nowadays. Looking forward to feedbacks,

@ri7nz @segunadebayo @zaguiini @rahsheen

[jsartisan]

Here is an example - https://snack.expo.io/@pawankumar2901/dribble-login-page

[c-moss-talk]

We have a cross-platform component library at Talkspace. One path I could see would be to:

1. Replace all tag usages of styled with React Primitives , which establish an interface between platforms. That change would look like this

  const Box = styled("div", {...

  // becomes

  const Box = styled(View)({...

and import View from React Native Web.

1. Create a proxy for the emotion library where

• emotion.ts maps to emotion
• emotion.native.ts maps to glamorous-native (same api as emotion and we use this in production)

1. Resolve issues once 1 and 2 have been accomplished. I'm not too familiar with Chakra, but I'd imagine the accessibility and shorthand style props could lead to a few issues on the native side but perhaps RNW resolves them already.

However... on the web side, RNW View might come with some default behaviors that could lead to unexpected bugs which might introduce too many changes. So an alternative to using RNW, which we don't use ourselves is proxy View to div on web and View on native just like the emotion proxy, View.tsx and View.native.tsx. But not having RNW would mean a lot more work to resolve differences between platforms, not sure if React Primitives would work on their own ... so its no easy add for RN support, but I hope this helps 😄 !

[segunadebayo]

Thanks guys, for your input on this.

We'll refer to this thread once the team is ready to add RN support. Closing this, for now, considering there's been no much progress.

[vonwao]

Hi all, If anyone looking for a react native port of chakra-ui, do consider - https://magnus-ui.com/ :)
It is heavily inspired by chakra-ui 👍
I am working on the docs heavily nowadays. Looking forward to feedbacks,

@jsartisan How does magnus-ui compare to react-native-elements? Maybe if you post a comparison it would help people make a better choice.

I know it's totally unrelated to this issue and web, but I was thinking of using react-native-web with react-native-elements, so I was also wondering about that. Seems like there is starting to be some crossover betwen web and native, which is exciting (learn once, use everywhere).

[jsartisan]

@vonwao That's a good question. The main difference comes in terms of Utilities ( Spacing, Typography, Border Radius, etc). You can use easily customize the component using the utility props ( Check out this example - https://magnus-ui.com/docs/button/#example-5 ).

[coodoo]

At first glance I really like magnus-ui's approach, which looks a lot like chakra-ui, any plan to support react-native-web as well?

[jsartisan]

@coodoo I can add the support. Let me see how much work is required.

[nandorojo]

@jsartisan If magnus-ui uses packages supported by @expo / @expo web, React Native Web support should work out of the box. Love the work done there! Would love to use it if you add Expo support.

[yareyaredesuyo]

Another library that supports Styled System.

https://github.com/Shopify/restyle

[nandorojo]

You can also check out dripsy, a package I'm working on. It's like theme-ui for React Native/React Native Web. It has responsive styles & theme values, and I’m finishing up support for server side rendering (like Next.js).

https://github.com/nandorojo/dripsy

[wobsoriano]

Since Chakra's theme is inspired by Tailwind, maybe https://github.com/vadimdemedes/tailwind-rn will do for now

[hems]

Would love to see chakra-ui for React Native!

[jsartisan]

@hems Checkout https://magnus-ui.com/