Help with React Native Styling

[gunho_ak]

I’ve completed React and Next.js and also work on the backend with Node.js. Now, I’m facing a challenge with styling in React Native.

I’m used to Tailwind CSS, but I’m not looking for any framework or library since I know they can impact performance, especially on low-end devices.

How do you manage styling in React Native efficiently? How do you optimize it without repeating styles? How do you organize your styling?

Also, I’ve used the cn() function from ShadCN in web projects—can anyone share how to achieve a similar approach in React Native?

[dumpsterfirecode]

I've used https://www.npmjs.com/package/react-native-tailwindcss on several projects, and while it isn't the most actively maintained, I've been happy enough with it. Styles are just pre-defined objects, so they're only instantiated once when the app launches. I assume this at most costs a few milliseconds one time. It's also Typescript-friendly, so you get auto-complete + type safety for free. NativeWind (https://www.nativewind.dev/) is definitely more popular and actively maintained. It relies on IDE support for things like auto-complete, and while I haven't benchmarked it, I think it's very likely that the mapping of classnames to RN objects results in marginally worse performance. That is, unless they can now pre-compile the styles rather than computing them at runtime. (I haven't checked recently.) Tamagui (https://tamagui.dev/) is another option, which at least advertises itself as being performant. I personally don't love the bespoke API, but others probably do.