Is this an ideal solution to use className in React Native Components, using twrnc and babel?

[makaronma]

What we may concern

I think people prefer to use className="some-tw-style" which is a more handy way instead of styles={tw`twsome-tw-style`}.

Also, putting styles outside of the components should be able to optimize performance of the render process.

Solution

So, I experimentally created a babel plugin to transform "className" attributes to the twrnc styles, which may enhance the DX when using twrnc.

Can somebody try out my package and leave some comment?

https://github.com/makaronma/babel-plugin-twrnc-extract

Below is how it works.

In

const YourComponent = () => {
  return (
    <View className="bg-black flex-1">
      <Text className="text-white">Hello World!</Text>
    </View>
  );
}

Out

import tw from "./lib/tw";

const YourComponent = () => {
  return (
    <View style={twStyles._attr_str}>
      <Text style={twStyles._attr2_str}>Hello World!</Text>
    </View>
  );
};

const twStyles = {
  _attr_str: tw`bg-black flex-1`,
  _attr2_str: tw`text-white`
};

[thingasd]

Seems cool

[jaredh159]

i understand the desire for that type of api, and some folks might really like that. looks cool. you might want to check out NativeWind, i think they're already doing a lot of that, (i believe using twrnc under the hood).

this isn't something i ever have plans on integrating into the core library, mostly because of personal preference, which i describe here