React Native Components Override styles "leaking"

Question

I'm trying to build my own component library specific to my React Native app using the Atomic Design Methodology, so I have small components like Paragraph, Title, Wrap, Button, Subtitle etc. in a single file called "Atoms". I can import them in my other components like so:

import { Paragraph, Title, Wrap, Button, Subtitle } from "../Atoms";

I'm building them using tailwind-react-native-classnames. It's a great package using Tailwind CSS with lots of useful features like platform prefixes and dark mode support.

Now, sometimes I need unique style changes on these components, so I have a style prop to mix the style Object to one, it works like this:

 <Subtitle style={tw`pt-20`}>Some Text</Subtitle>

And in the component:

 const Subtitle = ({ style, children }) => (
  <Text style={Object.assign(tw`text-xl mb-3 text-octonary dark:text-white`, style)}>
    {children}
  </Text>
);

This works well, any style can be overwritten, it's intuitive to work with and gives me lots of freedom. But here's the problem, the changes (inconsistently, and not every component) seems to effect the same components on other Screens. So in the above example the tw`pt-20` translates to paddingTop: 5rem and applies it to other places, other Screens, with the same component, that shouldn't even have this style applied to it.

Why is this happening? Is it cashed somehow? And how can I fix it?

Thanks in advance for any help/suggestions.

Have you tried the screens like `tablet` . For example `tablet:text-red-400` — MagnusEffect, May 13 '22 at 17:49
To clarify, when I talk about screens I mean `React Navigation` screens, so other views in the app. — Captain Green, May 13 '22 at 17:55
The thing that jumps out at me from the docs is this paragraph: `If you need some styling that is not supported in a utility class, or just want to do some custom run-time logic, you can pass raw RN style objects to tw.style(), and they get merged in with the styles generated from any other utility classes:...` and then a section above about how the styles are highly performant because they're only computed once. Your custom style is probably cached somewhere and reused. You could make a new component with the style you want as a workaround maybe. — Abe, May 14 '22 at 01:25

score 0 · Accepted Answer · answered May 16 '22 at 16:49

I found a solution, thanks to @Abe I experimented using tw.style(). So instead of this:

const Subtitle = ({ style, children }) => (
  <Text
    style={Object.assign(tw`text-xl mb-3 text-octonary dark:text-white`, style)}
  >
    {children}
  </Text>
);

I did this:

const Subtitle = ({ style, children }) => (
  <Text
    style={tw.style(
      "text-xl",
      "mb-3",
      "text-octonary",
      "dark:text-white",
      style
    )}
  >
    {children}
  </Text>
);

It's not as close to normal Tailwind CSS since every class needs separate quotes and also be separated by commas, but it works! But then I went even further and did this:

const Subtitle = ({ style, children }) => {
  const s = tw`text-xl mb-3 text-octonary dark:text-white`;
  return <Text style={tw.style(s, style)}>{children}</Text>;
};

It's more compact, I can code vanilla tailwind and no "leaking". So win-win-win!

React Native Components Override styles "leaking"

1 Answers1