feat: add a demo using NativeWind with RN Reusables

Author: borisyankov

apps/tester-app/package.json

@@ -18,13 +18,17 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.23.1",
+    "@rn-primitives/slot": "^1.1.0",
+    "@rn-primitives/types": "^1.1.0",
+    "class-variance-authority": "^0.7.1",
     "nativewind": "^4.1.23",
     "react": "18.3.1",
     "react-native": "0.76.3",
     "react-native-css-interop": "0.1.22",
     "react-native-reanimated": "^3.16.3",
     "react-native-safe-area-context": "^4.14.0",
-    "react-native-svg": "15.8.0"
+    "react-native-svg": "15.8.0",
+    "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

apps/tester-app/src/nativewind/Input.tsx

@@ -1,7 +1,7 @@
 import { StyleSheet, Text, View } from 'react-native';
 import ComponentWithVariants from './ComponentWithVariants.tsx';
 import CustomComponent from './CustomComponent.tsx';
-import { Input } from './Input.tsx';
+import Reusables from './Reusables.tsx';
 
 export function NativeWindView() {
   return (
@@ -14,7 +14,7 @@ export function NativeWindView() {
       </View>
       <CustomComponent className="bg-green-600" />
       <ComponentWithVariants variant="primary" className="bg-yellow-500" />
-      <Input />
+      <Reusables />
     </View>
   );
 }

apps/tester-app/src/nativewind/NativeWindView.tsx

@@ -8,8 +8,8 @@ This component demonstrates compatibility with different NativeWind features:
 * general styling with className and Tailwind classes
 * custom components styled with className
 * components using the variants pattern
+* using component libraries (React Native Reusables)
 * TODO: themes https://www.nativewind.dev/guides/themes
-* using component libraries (NativeWindUI)
 * responsive design
 * dark mode
 * functions & directives

apps/tester-app/src/nativewind/README.md

@@ -0,0 +1,10 @@
+import { Button } from './ui/Button';
+import { Text } from './ui/Text';
+
+export default function Reusables() {
+  return (
+    <Button variant="primary" className="bg-purple-700">
+      <Text className="text-white">I am a button from RN Reusables</Text>
+    </Button>
+  );
+}

apps/tester-app/src/nativewind/Reusables.tsx

@@ -0,0 +1,92 @@
+import { type VariantProps, cva } from 'class-variance-authority';
+import * as React from 'react';
+import { Pressable } from 'react-native';
+import { TextClassContext } from './Text';
+import { cn } from './utils';
+
+const buttonVariants = cva(
+  'group flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary web:hover:opacity-90 active:opacity-90',
+        destructive: 'bg-destructive web:hover:opacity-90 active:opacity-90',
+        outline:
+          'border border-input bg-background web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent',
+        secondary: 'bg-secondary web:hover:opacity-80 active:opacity-80',
+        ghost:
+          'web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent',
+        link: 'web:underline-offset-4 web:hover:underline web:focus:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2 native:h-12 native:px-5 native:py-3',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8 native:h-14',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const buttonTextVariants = cva(
+  'web:whitespace-nowrap text-sm native:text-base font-medium text-foreground web:transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'text-primary-foreground',
+        destructive: 'text-destructive-foreground',
+        outline: 'group-active:text-accent-foreground',
+        secondary:
+          'text-secondary-foreground group-active:text-secondary-foreground',
+        ghost: 'group-active:text-accent-foreground',
+        link: 'text-primary group-active:underline',
+      },
+      size: {
+        default: '',
+        sm: '',
+        lg: 'native:text-lg',
+        icon: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+type ButtonProps = React.ComponentPropsWithoutRef<typeof Pressable> &
+  VariantProps<typeof buttonVariants>;
+
+const Button = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ButtonProps
+>(({ className, variant, size, ...props }, ref) => {
+  return (
+    <TextClassContext.Provider
+      value={buttonTextVariants({
+        variant,
+        size,
+        className: 'web:pointer-events-none',
+      })}
+    >
+      <Pressable
+        className={cn(
+          props.disabled && 'opacity-50 web:pointer-events-none',
+          buttonVariants({ variant, size, className })
+        )}
+        ref={ref}
+        role="button"
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+});
+Button.displayName = 'Button';
+
+export { Button, buttonTextVariants, buttonVariants };
+export type { ButtonProps };

apps/tester-app/src/nativewind/ui/Button.tsx

@@ -0,0 +1,28 @@
+import * as Slot from '@rn-primitives/slot';
+import type { SlottableTextProps, TextRef } from '@rn-primitives/types';
+import * as React from 'react';
+import { Text as RNText } from 'react-native';
+import { cn } from './utils';
+
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+const Text = React.forwardRef<TextRef, SlottableTextProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const textClass = React.useContext(TextClassContext);
+    const Component = asChild ? Slot.Text : RNText;
+    return (
+      <Component
+        className={cn(
+          'text-base text-foreground web:select-text',
+          textClass,
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Text.displayName = 'Text';
+
+export { Text, TextClassContext };

apps/tester-app/src/nativewind/ui/Text.tsx

@@ -0,0 +1,14 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function fixImports(rawfile: string) {
+  return rawfile
+    .replace('./typography', '~/components/ui/typography')
+    .replace('./text', '~/components/ui/text')
+    .replaceAll('../../components', '~/components')
+    .replaceAll('../../lib', '~/lib');
+}