React Native research

[corysimmons]

I started tinkering around with Radix support in RN. I'm not sure I have the time to get this all working, but it's definitely possible. I figured I'd drop my findings here for anyone interested in adding RN support to look at.

Everything stems from @radix-ui/primitive. It refers to DOM nodes like div, etc. This would need to be replaced by RNW components like <View> and <Text>. Then just start stepping through the 800+ errors in TS to make those web-specific types and APIs RN-compatible.

• getBoundingClientRect() is used in several components. This would need to be replaced by an RN equivalent.
• onMouseDown is used in several components. It would need to be replaced by onPressIn.
• onClick is used a lot. It would need to be replaced with onPress.
• useSize is used in a few spots. It measures width and height of an element. This would need to be replaced by onLayout + .measure() in RN.
• useLayoutEffect I'm not sure if this works in RN or if it needs to be replaced by some raf helper.
• tabIndex stuff isn't going to 1:1 to native, but we can probably write an adapter for each platform. In iOS, an a11y feature called Switch Control will automatically cycle through areas. It's called Switch Access in Android. I'm not sure how important it is right now but would make a nice feature in the future. Keyboard events go along with this. Just isolate them to the web for now.
• There are some style props scattered around. Each would have to be checked to ensure their CSS worked cross-platform.
• @floating-ui/react-native instead of @floating-ui/react-dom
• data- attributes are used throughout. They might need to be replaced with dataSet prop in RNW.
• Tons of types are HTML-specific.
• resize-observer-browser type isn't found. Probably needs to be an RN equivalent.
• All tests need to be rewritten for RN.
• Libs that might be web specific:
  • react-remove-scroll
  • aria-hidden
• SVGs need to be converted from <Primitive.svg> to an RN SVG library (probably react-native-svg).
• Things like new window.Image() will need to be replaced with something RN-specific.

https://github.com/nandorojo/zeego is an interesting project. It is essentially using the Radix API to create entrypoint components that try to use native APIs on native platforms, and Radix UI on the web. It's essentially the best of both worlds, where you can use the same API on all platforms, but get native iOS & Android UIs on mobile devices. It doesn't have a lot of components yet, but it's a good starting point.

That said, proper Radix support for RN would be amazing since it could serve as a fallback where native APIs are missing (something really common in the RN universe).

Since RN was created, the RN community has been dying for a headless UI kit.

NativeWind + Radix <Avatar> component working in both web and RN

[cseelus]

Thanks @corysimmons for this comprehensive analysis. Tinkered a bit with React Native (Expo) + Radix myself last week, but was put off but the hundreds of warnings. There are some decent universal (web + native) UI systems available, like https://tamagui.dev, so its definitely doable.

[corysimmons]

Tamagui isn't headless. I might take a stab at this again pretty soon.

[mrzachnugent]

I made most primitives work on RN https://github.com/mrzachnugent/react-native-reusables/tree/main/packages.

The reusables folder is a RN ui/shadcn and the other packages are radix-ui/primitives on the web and its native equivalent for iOS and Android.

[corysimmons]

This solution doesn't use the native components (e.g. for modals, web has divs, Android Compose has dialogs, SwiftUI has alerts/dialogs), but it's gorgeous and amazing anyway.

Implementing the native components is pretty complicated and probably error prone. I'm 100% going to try out your lib and if you set up sponsor stuff on GitHub I'll sponsor your work on this!

Great job!

[mrzachnugent]

Thank you and great points.

I might give it another shot with https://github.com/facebook/react-strict-dom when it is more stable and have more components.In their issues they plan to add a bunch of things.

[corysimmons]

That's exactly how I felt when I started digging into it. It's definitely possible, but the entire RN ecosystem seems like it's being turned on its head right now, so I'm kind of just waiting. Your current lib looks absolutely amazing though (tbh I think I like it better than native-native components 😄) and I'm definitely going to use the snot out of it so don't abandon it just yet! 😨

[mrzachnugent]

Haha awesome!

No worries, definitely not giving up. It's still in a super early phase. There's a lot more to do!

For things like real modals, there are components in the deprecated-ui folder that use React-Native's modal but I found the UX was not the greatest. I also added a lot of accessibility features to try to make up for not using each platform's native components. One of the huge pluses is that all components work with Expo Go.

Thanks for your support, much appreciated 🥇
You can always reach me on 𝕏 https://twitter.com/mrzachnugent