feat: add examples for NativeWind functionality

Author: borisyankov

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

@@ -0,0 +1,29 @@
+import { Text } from 'react-native';
+
+const variantStyles = {
+  default: 'rounded',
+  primary: 'bg-blue-500 text-white',
+  secondary: 'bg-white-500 text-black',
+};
+
+type Props = {
+  variant: keyof typeof variantStyles;
+  className?: string;
+} & React.ComponentProps<typeof Text>;
+
+export default function ComponentWithVariants({
+  variant,
+  className,
+  ...props
+}: Props) {
+  return (
+    <Text
+      className={`
+        ${variantStyles.default}
+        ${variantStyles[variant]}
+        ${className}
+      `}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,10 @@
+import { Text } from 'react-native';
+
+export default function CustomComponent({ className }: { className: string }) {
+  const defaultStyles = 'p-2 text-black dark:text-white';
+  return (
+    <Text className={`${defaultStyles} ${className}`}>
+      I am a custom component
+    </Text>
+  );
+}

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { TextInput, type TextInputProps } from 'react-native';
+
+const cn = (...args: (string | boolean | undefined)[]) =>
+  args.filter(Boolean).join(' ');
+
+const Input = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  TextInputProps
+>(({ className, placeholderClassName, ...props }, ref) => {
+  return (
+    <TextInput
+      ref={ref}
+      className={cn(
+        'web:flex h-10 native:h-12 web:w-full rounded-md border border-input bg-background px-3 web:py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground placeholder:text-muted-foreground web:ring-offset-background file:border-0 file:bg-transparent file:font-medium web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+        props.editable === false && 'opacity-50 web:cursor-not-allowed',
+        className
+      )}
+      placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
+      {...props}
+    />
+  );
+});
+
+Input.displayName = 'Input';
+
+export { Input };

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

@@ -1,9 +1,20 @@
 import { StyleSheet, Text, View } from 'react-native';
+import ComponentWithVariants from './ComponentWithVariants.tsx';
+import CustomComponent from './CustomComponent.tsx';
+import { Input } from './Input.tsx';
 
 export function NativeWindView() {
   return (
-    <View className="bg-blue-100 p-5" style={styles.container}>
-      <Text className="custom-style-test">Colored through CSS!</Text>
+    <View className="gap-4 p-2">
+      <View
+        className="bg-blue-100 p-5 rounded-full sm:bg-red-500"
+        style={styles.container}
+      >
+        <Text className="custom-style-test">Colored through CSS!</Text>
+      </View>
+      <CustomComponent className="bg-green-600" />
+      <ComponentWithVariants variant="primary" className="bg-yellow-500" />
+      <Input />
     </View>
   );
 }
@@ -12,6 +23,5 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
-    marginVertical: 16,
   },
 });

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

@@ -0,0 +1,15 @@
+# NativeWind + Re.Pack Demo
+
+> [!NOTE]
+> Do not use `verifyInstallation()`
+
+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
+* TODO: themes https://www.nativewind.dev/guides/themes
+* using component libraries (NativeWindUI)
+* responsive design
+* dark mode
+* functions & directives

apps/tester-app/tailwind.config.js

@@ -3,5 +3,6 @@ module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   presets: [require('nativewind/preset')],
   theme: { extend: {} },
+  darkMode: 'class',
   plugins: [],
 };