Does it work with nativewind or support react-native?

[ammarfaris]

Hi there, nice work on tw-classed! Just wondering if it work with nativewind https://github.com/marklawlor/nativewind (to make it work with react-native) or will you support react-native in the future?

Thanks!

[sannajammeh]

V3 preview of Nativewind has support and this library wont be needed then, but it has some Expo EAS issues.

We run Nativewind V2 + tw-classed in production without any issues.

Simple example:

import { Text as RNText } from "react-native";
import { styled } from "nativewind";
import { classed, deriveClassed } from "@tw-classed/react";

const StyledText = styled(RNText);

export const Text = classed(StyledText, {
  variants: {
    color: {
      blue: "text-blue-500",
      green: "text-green-500",
    }
  }
});

// In app
() => <Text color="blue" />

Complex example:

This is a more complex version button because React Native dont support style inheritance so we must define a base for the button and also a text component for its text. Then merge it together using deriveClassed to get full TS support.
See: https://tw-classed.vercel.app/docs/derived-components

import { styled } from "nativewind";
import { classed, deriveClassed } from "@tw-classed/react";

const StyledTouchableOpacity = styled(TouchableOpacity);

export const ButtonBase = classed(StyledTouchableOpacity, {
  variants: {
    color: {
      primary: "bg-primary",
      secondary: "bg-secondary",
      slate: "bg-slate-300",
    },
    size: {
      sm: "px-2 py-2",
      md: "px-4 py-3",
      lg: "px-6 py-4",
    },
    rounded: {
      sm: "rounded-sm",
      md: "rounded-md",
      lg: "rounded-lg",
      xl: "rounded-xl",
      "2xl": "rounded-2xl",
      full: "rounded-full",
    },
  },

  defaultVariants: {
    color: "primary",
    size: "md",
    rounded: "2xl",
  },
});

const StyledText = styled(Text);

export const ButtonText = classed(StyledText, {
  variants: {
    color: {
      primary: "text-white",
      secondary: "text-white",
      slate: "text-slate-800",
    },
  },

  defaultVariants: {
    color: "primary",
  },
});

// Final UI Button
// color is the shared prop between the two so we deconstruct and add to both
export const Button = deriveClassed<typeof ButtonBase>(
  ({ children, loading, color, ...props }, ref) => {
    return (
      <ButtonBase
        color={color}
        ref={ref}
        {...props}
      >
       <ButtonText
              color={color}
              className="text-center"
            >
              {children}
            </ButtonText>
      </ButtonBase>
    );
  }
);

[sannajammeh]

Since nativewind will have support for this in V3 natively, I will add some docs for doing it manually with tw-classed for now. Leaving issue open until docs are complete

[ammarfaris]

thanks for your time and explanation ; and for the (future) docs, appreciate it!

[sannajammeh]

Docs are now up in the Guides section

[gvNN7]

I currently using tw-classed with nativewind@v2, and doesn't encounter any problems at all, it's perfect. But i'm little bit worried, since nativewind is dropping styled in @v4, how tw-classed can achieve the same result or similar in the "lastest" version?

Release note: https://www.nativewind.dev/v4/announcement#removal-of-styled

[sannajammeh]

I currently using tw-classed with nativewind@v2, and doens't encounter any problems at all, it's perfect. But i'm little bit worried, since nativewind is dropping styled in @v4, how tw-classed can achieve the same result or similar in the "lastest" version?

Release note: https://www.nativewind.dev/v4/announcement#removal-of-styled

According to the library author, it should work directly, but lets leave this open just in case :)

[PrajTS]

Hey @sannajammeh , this does not seem to work with v4. No styles seems to get applied.

Eg:
export const XStack = classes(View, 'flex-row')

seem to have no affect. It still renders a default View with flex-col

[sannajammeh]

Hey @sannajammeh , this does not seem to work with v4. No styles seems to get applied.

Eg:

export const XStack = classes(View, 'flex-row')

seem to have no affect. It still renders a default View with flex-col

Could you provide a Repro?

[PrajTS]

@sannajammeh Repro - https://github.com/PrajTS/nativewind-tw-classed

[visualcookie]

I'm facing the same issue now too, but other than the View, it does not work for me on React Native's text component. I've created the following classed:

export const Text = classed(RNText, {
  variants: {
    hierarchy: {
      [Hierarchy.Primary]: 'text-white',
      [Hierarchy.Secondary]: 'text-primary',
      [Hierarchy.Link]: 'text-petrol',
    },
  },
});

But the library does not render any of these classes. From what I've seen in the React Native React Devtools is, that there is not CssInterop being set for the Text classed, while for my container, which is a Pressable there is, hence why the background switching per hierarchy for my buttons work, but the switching to a different text color doesn't. I also have another problem: the disabled state is also not working, even tho it is defined as per the docs.

From the looks at it, your library may still need an update for Nativewind v4.

[sannajammeh]

I'm facing the same issue now too, but other than the View, it does not work for me on React Native's text component. I've created the following classed:

export const Text = classed(RNText, {
  variants: {
    hierarchy: {
      [Hierarchy.Primary]: 'text-white',
      [Hierarchy.Secondary]: 'text-primary',
      [Hierarchy.Link]: 'text-petrol',
    },
  },
});

But the library does not render any of these classes. From what I've seen in the React Native React Devtools is, that there is not CssInterop being set for the Text classed, while for my container, which is a Pressable there is, hence why the background switching per hierarchy for my buttons work, but the switching to a different text color doesn't. I also have another problem: the disabled state is also not working, even tho it is defined as per the docs.

From the looks at it, your library may still need an update for Nativewind v4.

I'm on it! Quite busy with project releases with the coming weeks, but we should have this done very soon :)

[PrajTS]

Hey, any update on this?