Create nx react native expo nativewind app

expo-nativewind-app/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

expo-nativewind-app/.gitignore

@@ -0,0 +1,62 @@
+# See https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# compiled output
+dist
+tmp
+out-tsc
+
+# dependencies
+node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+.nx/cache
+.nx/workspace-data
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md
+
+# Expo
+node_modules/
+.expo/
+.yarn/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+cache/
+
+
+test-output

expo-nativewind-app/.prettierignore

@@ -0,0 +1,5 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+/.nx/cache
+/.nx/workspace-data

expo-nativewind-app/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

expo-nativewind-app/.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "nrwl.angular-console",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "firsttris.vscode-jest-runner",
+    "ms-playwright.playwright"
+  ]
+}

expo-nativewind-app/README.md

@@ -0,0 +1,267 @@
+# React Native Expo App with NativeWind using Nx
+
+This project demonstrates how to create a React Native Expo application with NativeWind (Tailwind CSS for React Native) using Nx as the build system and workspace management tool.
+
+## 🚀 What's Included
+
+- **Nx Workspace**: Monorepo setup with powerful development tools
+- **Expo SDK**: Latest Expo framework for React Native development
+- **NativeWind**: Tailwind CSS for React Native styling
+- **TypeScript**: Full TypeScript support with proper type checking
+- **Testing**: Jest testing setup with React Native Testing Library
+- **Linting**: ESLint configuration for code quality
+- **Metro Bundler**: Configured to work with NativeWind CSS imports
+
+## 📁 Project Structure
+
+```
+expo-nativewind-app/
+├── apps/
+│   ├── expo-nativewind-app/          # Main Expo app
+│   │   ├── src/
+│   │   │   ├── app/
+│   │   │   │   ├── App.tsx           # Main app component with NativeWind examples
+│   │   │   │   └── App.spec.tsx      # App tests
+│   │   │   ├── global.css            # Tailwind CSS imports
+│   │   │   └── test-setup.ts         # Test configuration
+│   │   ├── assets/                   # App assets (images, fonts)
+│   │   ├── app.json                  # Expo configuration
+│   │   ├── metro.config.js           # Metro bundler config (CSS support)
+│   │   └── package.json              # App dependencies
+│   └── expo-nativewind-app-e2e/      # E2E tests with Playwright
+├── babel.config.json                 # Babel config with NativeWind plugin
+├── tailwind.config.js                # Tailwind CSS configuration
+├── nx.json                          # Nx workspace configuration
+└── package.json                     # Root dependencies
+```
+
+## 🛠️ Setup Instructions
+
+### Prerequisites
+
+- Node.js (v18 or later)
+- npm or yarn
+- Expo CLI (optional, included in the project)
+
+### Installation
+
+1. **Clone or use this workspace**:
+   ```bash
+   # If starting fresh, create the workspace:
+   npx create-nx-workspace@latest my-expo-app --preset=expo --packageManager=npm --nxCloud=skip
+   ```
+
+2. **Install NativeWind dependencies**:
+   ```bash
+   npm install nativewind tailwindcss@latest
+   ```
+
+3. **Configure Tailwind CSS**:
+   ```bash
+   # Create tailwind.config.js (already included in this project)
+   ```
+
+### Configuration Files
+
+#### 1. `tailwind.config.js`
+```javascript
+module.exports = {
+  content: ["./apps/**/*.{js,jsx,ts,tsx}"],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+#### 2. `babel.config.json`
+```json
+{
+  "babelrcRoots": ["*"],
+  "presets": ["babel-preset-expo"],
+  "plugins": ["nativewind/babel"]
+}
+```
+
+#### 3. `metro.config.js` (in app directory)
+```javascript
+// Add 'css' to sourceExts for CSS import support
+resolver: {
+  sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg', 'css'],
+}
+```
+
+#### 4. `src/global.css`
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+## 🎯 Available Commands
+
+### Development
+```bash
+# Start the development server
+nx start expo-nativewind-app
+
+# Start with web support
+nx serve expo-nativewind-app
+
+# Run on iOS simulator
+nx run-ios expo-nativewind-app
+
+# Run on Android emulator
+nx run-android expo-nativewind-app
+```
+
+### Testing & Quality
+```bash
+# Run tests
+nx test expo-nativewind-app
+
+# Run linting
+nx lint expo-nativewind-app
+
+# Run TypeScript checking
+nx typecheck expo-nativewind-app
+
+# Run all checks
+nx run-many -p expo-nativewind-app -t test lint typecheck
+```
+
+### Building
+```bash
+# Build for production
+nx build expo-nativewind-app
+
+# Export for web
+nx export expo-nativewind-app
+
+# Prebuild native code
+nx prebuild expo-nativewind-app
+```
+
+## 🎨 Using NativeWind
+
+### Basic Usage
+
+Import the global CSS file in your main App component:
+
+```tsx
+import '../global.css';
+```
+
+Then use Tailwind classes with the `className` prop:
+
+```tsx
+import { View, Text, TouchableOpacity } from 'react-native';
+
+export function MyComponent() {
+  return (
+    <View className="flex-1 bg-white p-6">
+      <Text className="text-2xl font-bold text-gray-900 mb-4">
+        Hello NativeWind!
+      </Text>
+      <TouchableOpacity className="bg-blue-500 py-3 px-6 rounded-lg">
+        <Text className="text-white font-medium text-center">
+          Press me
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+```
+
+### Advanced Features
+
+#### Responsive Design
+```tsx
+<View className="w-full md:w-1/2 lg:w-1/3">
+  <Text className="text-sm md:text-base lg:text-lg">
+    Responsive text
+  </Text>
+</View>
+```
+
+#### Dark Mode
+```tsx
+<View className="bg-white dark:bg-gray-900">
+  <Text className="text-black dark:text-white">
+    Theme-aware text
+  </Text>
+</View>
+```
+
+#### Custom Styles
+Extend your `tailwind.config.js`:
+
+```javascript
+module.exports = {
+  // ... other config
+  theme: {
+    extend: {
+      colors: {
+        primary: '#your-brand-color',
+      },
+      spacing: {
+        '18': '4.5rem',
+      }
+    },
+  },
+}
+```
+
+## 📱 Example Components
+
+The main App component (`src/app/App.tsx`) includes examples of:
+
+- ✅ Basic layout with Tailwind classes
+- ✅ Responsive design patterns
+- ✅ Button variants and styles
+- ✅ Card components
+- ✅ Color schemes and typography
+- ✅ Interactive elements
+
+## 🔧 Troubleshooting
+
+### Common Issues
+
+1. **CSS not loading**: Ensure `global.css` is imported in your main component
+2. **Classes not working**: Check that Metro config includes `'css'` in `sourceExts`
+3. **TypeScript errors**: Make sure `nativewind-env.d.ts` is included in your project
+4. **Build errors**: Verify Babel config includes the NativeWind plugin
+
+### Metro Cache Issues
+If styles aren't updating:
+```bash
+# Clear Metro cache
+nx start expo-nativewind-app --clear
+```
+
+### Dependency Issues
+If you encounter peer dependency warnings:
+```bash
+# Install with legacy peer deps
+npm install --legacy-peer-deps
+```
+
+## 📚 Resources
+
+- [Nx Documentation](https://nx.dev)
+- [Expo Documentation](https://docs.expo.dev)
+- [NativeWind Documentation](https://www.nativewind.dev)
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Run tests: `nx test expo-nativewind-app`
+5. Submit a pull request
+
+## 📄 License
+
+This project is licensed under the MIT License.

expo-nativewind-app/apps/expo-nativewind-app-e2e/eslint.config.mjs

@@ -0,0 +1,12 @@
+import playwright from 'eslint-plugin-playwright';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  playwright.configs['flat/recommended'],
+  ...baseConfig,
+  {
+    files: ['**/*.ts', '**/*.js'],
+    // Override or add rules here
+    rules: {},
+  },
+];

expo-nativewind-app/apps/expo-nativewind-app-e2e/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@expo-nativewind-app/expo-nativewind-app-e2e",
+  "version": "0.0.1",
+  "private": true,
+  "nx": {
+    "implicitDependencies": [
+      "@expo-nativewind-app/expo-nativewind-app"
+    ]
+  }
+}