feat: add several more NativeWind features to tester app

Author: borisyankov

apps/tester-app/global.css

@@ -5,3 +5,22 @@
 .custom-style-test {
   color: mediumpurple;
 }
+
+.calc-element {
+  width: calc(var(--my-variable) - (20px + 2rem));
+}
+
+:root {
+  --H: 200;
+  --S: 50%;
+  --L: 40%;
+  --color-values: purple;
+}
+
+.color-element {
+  background-color: hsl(
+    calc(var(--H) + 20),
+    calc(var(--S) - 10%),
+    calc(var(--L) + 30%)
+  );
+}

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

@@ -0,0 +1,16 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function Basic() {
+  return (
+    <View className="bg-blue-100 p-5 rounded-full" style={styles.container}>
+      <Text className="custom-style-test">Colored through CSS!</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+});

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

@@ -0,0 +1,10 @@
+import { Button } from 'react-native';
+
+import { useColorScheme } from 'nativewind';
+
+export default function DarkMode() {
+  const { setColorScheme } = useColorScheme();
+  return (
+    <Button onPress={() => setColorScheme('dark')} title="Toggle dark mode" />
+  );
+}

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

@@ -0,0 +1,15 @@
+import { vars } from 'nativewind';
+import { Text, View } from 'react-native';
+
+export default function FuncsDirs() {
+  return (
+    <>
+      <View style={vars({ '--my-custom-color': 'green' })}>
+        <Text className="text-custom">Custom color</Text>
+      </View>
+      <View className="p-2 calc-element color-element">
+        <Text>Calculated size</Text>
+      </View>
+    </>
+  );
+}

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

@@ -1,27 +1,22 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { View } from 'react-native';
+import Basic from './Basic.tsx';
 import ComponentWithVariants from './ComponentWithVariants.tsx';
 import CustomComponent from './CustomComponent.tsx';
+import DarkMode from './DarkMode.tsx';
+import FuncsDirs from './FuncsDirs.tsx';
+import Responsive from './Responsive.tsx';
 import Reusables from './Reusables.tsx';
 
 export function NativeWindView() {
   return (
     <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>
+      <Basic />
+      <Responsive />
       <CustomComponent className="bg-green-600" />
       <ComponentWithVariants variant="primary" className="bg-yellow-500" />
       <Reusables />
+      <DarkMode />
+      <FuncsDirs />
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-  },
-});

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

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

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

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+
+export default function Responsive() {
+  return (
+    <View className="p-2 bg-orange-500 sm:bg-green-500 md:bg-red-500">
+      <Text className="text-white">Responsive style based on width!</Text>
+    </View>
+  );
+}

apps/tester-app/tailwind.config.js

@@ -2,7 +2,23 @@
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   presets: [require('nativewind/preset')],
-  theme: { extend: {} },
+  theme: {
+    extend: {
+      color: {
+        custom: 'var(--my-custom-color)',
+        primary: 'rgb(var(--color-values) / <alpha-value>)',
+      },
+    },
+  },
+  plugins: [
+    // Set a default value on the `:root` element
+    ({ addBase }) =>
+      addBase({
+        ':root': {
+          '--color-values': '255 0 0',
+          '--color-rgb': 'rgb(255 0 0)',
+        },
+      }),
+  ],
   darkMode: 'class',
-  plugins: [],
 };