Add React Native support

[UpperCod]

Through the strategy already used in atomico/ssr it is possible to support React Native.

[efoken]

I'm curious how this will look, because we are using React Native (Web) and currently have 2 different packages, one for React Native and one for WebComponents. We already share a lot of code, but when we can develop React Native components directly with Atomico, this would be amazing 😃

[UpperCod]

Excellent!, from atomico@1.59 we can replace the virtualDOM render according to the environment, this allows us:

1. serialize the virtualDOM, strategy already used for SSR/SSG.
2. replace tags with a dictionary of React native's own tags

replace tags with a dictionary of React native's own tags

I have pending work on 2 tasks:

1. investigate how to homologate html with react native.
2. investigate how to homologate Atomico's CSSStyleSheet to React native's styleSheet.

Since it's an exclusive integration for React, it should work like this:

import { wrapper } from "@atomico/react-native";

import { MyComponent } from "./my-component";

export const ReactNativeMyComponent = wrapper(MyComponent );

For now that's the goal 🤓

[efoken]

Okay! I really wanna help out with this, to make it possible.

1. Maybe we can start with a small set of HTML, like div -> View, span -> Text; and maybe button can be mapped to Pressable. But what about other components like TouchableOpacity, etc.? . What about special components like SafeAreaView, KeyboardAvoidingView and ScrollView?
   Also I think it's not enough to map HTML elements with some dictionary to React Native tag, because we also need to convert all attributes to React Native props. Like all aria-* attributes must be converted to accessibility* props. All event listeners like onclick have to be mapped somehow (for example onclick -> onPress, which is also not supported for a normal View)
   
   
2. For the StyleSheet we can at latest start with using css-to-react-native from styled-components to convert the basic CSS to React Native StyleSheet. But keep in mind that many stuff is not supported, like Media Queries, Pseudo classes, Pseudo elements, CSS variables, Transitions and stuff.
   And we need to find a way somehow to map all CSS classes to the components, because className is not supported, so we need to resolve CSS selectors and apply them to the style prop of the certain elements.
   To add Media Query support later, we can use css-mediaquery and the Dimensions API – I already did that for many projects.
   Interesting, but outdated project I wanted to share: https://github.com/jacobp100/cssta

Next question would be: What about Animations with the Animated API? 😄 And also other APIs, like Appearance (for Color Mode), AccessibilityInfo, etc. Maybe there could be a special set of hooks containing React Native APIs that are also working for Web.

I think all that is not so easy as it sounds, because I'm working with React Native since about 6 years now, and we also are using React Native Web for developing Design Systems here at IBM iX.

Of course it would be interesting then when we have React Native support, also add support for React Native Web to bring everything back to Web 🤯

EDIT: FYI, we use React Native styles (a package containing all React Native styles as simple objects) and convert them using stylis and then use them with Atomico

[UpperCod]

Amazing (Sorry for the delay in my response), I'm going to centralize this in a repo, so we can work on this together