Day 4

Hours worked/Total: 2.5/8.5

Day Recap

Outcome: After deciding to give React Native another chance, I ran into multiple issues with NativeWind and had to pivot to a different approach for styling. Additionally, I faced problems with integrating file system access using React Native FS.

What I Did

• Styling
  • Decided to give React Native another chance and cleaned up the boilerplate starter project to start fresh.
  • Tried to install NativeWind v4, created a CSS file, and added Tailwind directives, but it didn’t work.
  • Fixed Metro Bundler config to merge with NativeWind, but it still didn’t work—ended up using the Tailwind CLI guide instead.
  • Realized that the color attributes and some classes (e.g., text-4xl) didn’t work. Spent way too much time trying to make it functional.
  • Did research on Reddit and found that most UI libraries for React Native are slow, outdated, or abandoned. Most recommend just styling components manually.
  • Decided to uninstall everything and reinstall the project clean, avoiding the hacky NativeWind setup.
  • Created a sidebar component using the StyleSheet approach. It works okay, but:
    • Flexbox is tricky.
    • The View component is confusing, and nothing looks the same as it does in regular web development.
• File System Integration
  • Tried to render folders dynamically based on a string path variable.
  • Installed react-native-fs
  • Attempted to use an absolute path in RNFS.readdir, but got a TypeError: RNFSManager is undefined.
  • Realized it’s probably not linked, but npx react-native link react-native-fs doesn't work since linking is no longer needed in newer versions of React Native.
  • Checked node_modules and saw some files, so manual linking shouldn’t be necessary... or so I thought.
  • Still got the same error.
  • Found React Native Windows documentation mentioning the need for autolinking:
    bash

    Copy code

    npx react-native autolink-windows

Remarks

Trying to make NativeWind work in React Native is more trouble than it’s worth.

If you find yourself wrestling with config files more than building actual features, it’s time to reassess your approach. Spending hours on this yielded little return.

As for UI styling, manually creating components with StyleSheet seems to be the better approach in React Native. It’s not as smooth as web dev (yet), but at least it works.

Integrating file system features (like folder rendering) should be straightforward, but React Native’s module linking can be a real pain.

Next Goals

• Give up on React Native