Day 2

Hours worked/Total: 2/5

Day Recap

Outcome: I successfully set up Nativewind (Tailwind CSS for React Native) in my project and got it working with some initial styles.

What I Did

• Researched UI libraries for React Native Windows and found options like Tamagui, Nativewind, NativeBase, React Native Paper, and FluentUI
  • All looks amateurish and difficult to get started as React Native newbie. Also all projects are missing showcases meaning there are not many successful apps or web projects using these UI libraries.
• Decided to go with Nativewind since I'm already familiar with Tailwind CSS from web development
• Installed Nativewind and its dependencies

# Install Nativewind and its dependencies
npm install nativewind
npm install --save-dev [email protected]

# Initialize Tailwind config
npx tailwindcss init

• Ran into some vulnerability warnings during installation but resolved them by reverting to the latest stable versions
• Configured Nativewind by initializing it, modifying the config files, and setting up Babel plugins

// tailwind.config.js
module.exports = {
  content: [
    "./App.tsx",
    "./src/**/*.{js,jsx,ts,tsx}"
  ],
  // ...
}

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ["nativewind/babel"],
};

Remarks

The process wasn't entirely smooth, as I encountered some dependency issues and had to revert to stable versions. However, Nativewind seems promising for styling React Native Windows components using the familiar Tailwind CSS syntax.

Next Goals

• Explore Nativewind further and start applying styles to components
• Create layout designs using Nativewind's utilities