React Native support

[ai]

Do you want to request a feature or report a bug?

feature

What is the expected behavior?

One of the biggest reason to use styled-components is RN support.

It definitely, should be some CSS→RN loader for webpack. We need only show some example in the docs.

[satya164]

For RN, a Babel plugin should be enough. I can work on it soon.

[ai]

Here is a useful thing https://github.com/styled-components/css-to-react-native

[satya164]

thank you!

[ferrannp]

@satya164 was going to open an issue but ok I can just comment here. Let's make this first class cross-platform library :) (without styled components).

[deadcoder0904]

is it done already? also, any plans of supporting react-native-web after that?

[chrisdrackett]

@deadcoder0904 if react-native is supported react-native-web should "just work" :)

[deadcoder0904]

that would need some config at least that's what I think.

react-native-elements did it like this, although I'm not sure if it's required here since that's a UI kit & this is different.

[hemedani]

any news about this feature

[jayu]

I was thinking about possible implementations and I got stuck. Taking the effort to ship react-native support would make sense for me if we could write cross-platform styles for the components. However, I don't see any good way of providing this kind of support.

Assuming that linaria currently supports CSS syntax and set of selectors, we cannot map every web selector to react-native. We could support some basic cases, but we cannot make our CSS styles works in 100% in react-native. So resuing existing linaria styles in react-native would rather not work in most of the projects. We could create new components with a limited set of CSS rules that would work in both environments. But we will lose the flexibility of web styling. A way of doing that would be to make styled from linaria/react work in react-native by returning a component with styles that are created in runtime. I'm not sure if using babel, in this case, gives us any benefit since we could only extract some part of styles to stylesheet (which itself does not give any noticeable performance improvement). Support for dynamic styles would have to be done in runtime anyway.

Another approach would use react-native styling props and support web via react-native-web. But with this approach, we lose the main feature of linaria which is exporting static CSS files. So it looks like there is no place for linaria in this approach, It would be easier to contribute to react-native-web and add support for CSS extraction there.

If we could agree on restrictions from the first approach, it is a way of moving forward.

[jayu]

We want to support react-native but first, we have to decide if

• we allow sharing the same code between react and react-native (polymorphic linaria/react
• decide what subset of syntax we want to support for react-native
• look for paths for other improvements of linaria that would make react-native integration more useful
  • eg. better styles of composition
  • eg. support for class modifiers that would allow to somehow support &.class syntax
• decide if we want to implement it as an additional babel plugin or just runtime component

[upendra-web]

Hi team, any update on this? Or did anyone find a workaround for this?

[drizzlesconsin]

any update?

[hyochan]

Waiting for the update here too 🙂

[17Amir17]

2023 bump!

[Rag0n]

Another bump :)

[Anber]

While the road to implementing React Native is clear, I personally lack experience in this area. However, if someone is interested in creating and supporting a processor for React Native, I would be more than happy to provide guidance on how to do it :)