feat(cli): initialize react native project with NativeWind preconfigured

[Hardik-Kumar0005]

feat: Add 'create-react-native' command for React Native + NativeWind scaffolding

TL;DR - adds a new command to initialize a react native (expo) project with NativeWind preconfigured and ready to go🚀

---

Description

This pull request introduces a new command, create-react-native, to the CLI. This feature addresses the request for a streamlined way to set up a React Native project with modern tooling i.e. NativeWind. It allows users to scaffold a new project using Expo, pre-configured with NativeWind, enabling the use of Tailwind CSS classes directly in their React Native components.

The entire setup process is automated, from project initialization to dependency installation and configuration file generation.

Steps to run:

1. Run the new command to create a test project:
   devcli create-react-native MyTestApp

2. Navigate into the new project directory:
   cd MyTestApp

3. Start the Expo development server:
   npx expo start

4. Open the app in an emulator or on a physical device using the ExpoGo app. The app should build and run without any errors, and the default screen should display content styled with Tailwind CSS classes.
   Expo docs

Related Issue(s)

Resolves #27

---

Changes Made.

• [ x ] Added a new feature
• Fixed a bug
• [ x ] Refactored existing code
• Updated documentation
• Other (explain):

List and describe the main changes here:

Detailed Changes

1. New Command: create-react-native <projectName>

   • A new command is registered to handle the scaffolding process. It can be invoked via create-react-native MyTestApp.

2. New File: initReactNative.js

   • This file contains the core logic for the new command. The workflow is as follows:
     • Initializes a new Expo project using npx create-expo-app.
     • Resets the expo project for a minimal configuration.
     • Installs necessary dependencies for NativeWind, including nativewind, react-native-reanimated, and react-native-safe-area-context.
     • Installs required dev dependencies like tailwindcss.
     • Runs npx tailwindcss init to generate a base config file.
     • Overwrites and creates several configuration files with project-specific templates to correctly set up NativeWind.
     • Initializes the project as a git repository with git init command.

3. New File: config.js

   • To maintain clean and readable command logic, all configuration file templates have been centralized in this new utility file. This includes the content for:
     • tailwind.config.js (basic tailwind config).
     • global.css (adds the tailwind imports).
     • babel.config.js (includes the nativewind/babel plugin).
     • metro.config.js (wrapped with withNativeWind).
     • _layout.tsx (import the global styles so tailwind classes can be used anywhere in the project) .
     • index.tsx (write a custom Devcli welcome page).
     • app.json (adds required metro web bundler setting).

4. Modified File: index.js

   • The main entry point of the CLI has been updated to import and register the new initReactNative command, making it available to the user.

---

Checklist

Please ensure the following have been completed:
If yes, do [x].

• [ x ] Code compiles without errors
• [ x ] Tests are written and passing (if applicable)
• Documentation is updated (in code or README as needed)
• [ x ] Code adheres to style guidelines (Prettier, ESLint)

Dependencies

NIL

Additional Notes

Readme needs to be updated with the new command!