Is it possible to import a React Native UI component into a native (Android/iOS) project?

Question

The goal: develop a cross-platform design system to import it in any platform (React, React Native, Android, iOS).

What we got working: a project, developed in React Native, where some core UI components were develop, to ensure the visuals are consistent among all other projects. This project is imported as a dependency in another React Native app that uses these components successfully. So far so good.

Where we got stuck: we wanted to import the same project in native projects (Android and iOS), and use it as custom widgets to build the native UI.

Knowledge acquired from googling:

• This article shows that it is possible to build native components in Java/Swift and use them in a React Native Project. We would like to do the other way around .

• There is a SDK called Diez that works as a transpiler, from Typescript to virtually any language. It is in early access and we wouldn't like to depends on a SDK.

tl;dr ; Is it possible to build a React Native project that serves as a UI component library (ie design system) and import it in native Android/iOS projects?

Answer 1

No native project that isn't actively working on going to RN is going to include a react native view- you're adding tons of memory to load a javascript interpreter and seconds of startup time to start react native for that one view. And passing data to RN from native is painful (calling native from RN is not, but the reverse path more or less doesn't exist). If you're going to try to embed RN (and I don't suggest it, pick either pure native or pure RN), it needs to be an isolated piece that doesn't need interaction from the native code.