Support for React Native/Native

[deebov]

❔ Question

I watched the talk from @devongovett for ReactEurope. He talked a lot about cross-platform'ability. So my question is: how does react-aria support other platforms such as React Native/Electron? if it supports, how can we use it (properly) on other platforms?

[devongovett]

The architecture is designed to support using the lowest layer, react-stately, cross platform. react-aria specifically is web only since it relies heavily on browser APIs. Electron should work since it's essentially just Chrome. We don't have anything around React Native yet, but we'd be interested in working with the community on building out the higher layers on top of react-stately.

[miguelocarvajal]

Congrats on these awesome libraries!

Great to hear that React Native is being considered.

Has any thought been given on how this might be implemented when creating an universal app? Meaning creating 1 codebase for Native and web using react-native-web?

Is there any roadmap or task list where I might start contributing?

[devongovett]

We haven't thought too much about it so far, and I don't believe anyone on the team has much experience with react native. Would love to hear some suggestions from anyone about how it should work.

I think in general we were thinking that several versions of a component could be implemented for different platforms using the same API. We have the @react-types packages, which define the TypeScript API definitions for each component which should ensure compatibility. And of course the stately layer could be shared as well. Would be cool to see something like @react-aria as a middle layer for React Native as well, using react native props for accessibility and behavior instead of DOM props. Then multiple design systems could be built on top of that similar to the way we can on the web.

If you have thoughts about this or how to go about implementing it please let us know!

[miguelocarvajal]

I've been putting some thought into this.

It seems that really, we just need to implement a react-native version of the @react-spectrum package. This since @react-stately should work natively, @react-aria is browser specific and I don't think we need to implement anything specific for native (I could be wrong on this one) and simply pass on the ARIA props to RN.

At first glance, implementing this react-spectrum for react-native would require redoing the CSS in a CSS-in-JS library or RN's StyleSheet. Not a problem but would prefer a way to share code between web and native.

This is my initial brain dump.

I am thinking of creating a test project to see how I can implement at least 1 component, to get ideas of possible problems. Possibly implement Button.native.tsx which would use implement react-typed.

Should I be able to carve out the time for this, I'll post my findings back here.

Any thoughts?

[yatsyk]

There are few react component libraries that work on native and web platforms, for example: https://github.com/callstack/react-native-paper https://github.com/react-native-elements/react-native-elements

Most straightforward way to develop application that can be compiled to web and native is to use https://github.com/expo/expo , but you can also use lerna and/or yarn workspaces to share npm modules with native or web project.

[razvanip]

@devongovett since stately can be reused between web and native, to have spectrum support native maybe we can:

• create some atomic components for web and native (View/Text) that would render div on web and View on native and span on web and Text on native and we can reuse them in the spectrum components, (Maybe we might need to normalize some api's between web and native, so extrapolating composition from those atomic components we can compose into bigger components that will work both web and native.
• move platform specific styling outside of the component
• unified web/native theming solution would be required, i guess moving postcss vars to javascript to share with native, and just parsing the css @ build time to replace with the variables from js in css would be a solution, or go with some other opensource theming solution that works both web and native, i guess (styled-components and emotion both work cross platform ?)

i guess a basic example checking progress-bar component if we replace all divs and span with View and Text and move styling outside we could share a lot of the code between web and native.

[intergalacticspacehighway]

@razvanip Sharing some of my findings.

I tried using react-aria with react-native-web as View/Text gets rendered to divs on react-native-web.

Issue I faced using react-aria with react-native-web.
Spreading props from react-aria hooks doesn't always work on View/Pressable/Touchable components.
Reasons:

1. View doesn't pass role and tabIndex to the rendered div element. https://github.com/necolas/react-native-web/blob/6739ab95cfdfc1bcb6ffc6989a1afb6ab373521e/packages/react-native-web/src/exports/View/index.js#L26
2. Pressable/Touchable don't pass keyDown handler to the rendered div. Support for onKeyDown in Pressable. necolas/react-native-web#1862

Regarding your suggestion, yes, we can create some atomic components, which is what I did using https://necolas.github.io/react-native-web/docs/?path=/docs/guides-unstable-uses--page
But as you can see from the name, it uses an internal API.

You can take a look at some of the implementations below.
https://github.com/GeekyAnts/react-native-aria/tree/experimental-overal/example/src/components

We're still experimenting as we're planning to add support for windows/macOS components but that would require writing Native components instead of using hooks. We are still finalizing an approach. I'll share it here once we do.

[intergalacticspacehighway]

I've put some documentation and snacks here. It's still in-progress 😅
https://geekyants.github.io/react-native-aria/docs/challenges
Changed the approach after a suggestion from necolas on necolas/react-native-web#1862.

This looks much cleaner IMO and doesn't depend upon rn-web's unstable recipe APIs.
The main branch has the updated code - https://github.com/GeekyAnts/react-native-aria

• Menu/useOverlayPosition won't work in snack as it has a dependency on rn-web v14 and expo sdk 40 is on v13.

[snowystinger]

Please use https://github.com/gluestack/gluestack-ui/tree/main/packages/react-native-aria