My React Native UI Starter Template

This repository serves as a lean and opinionated starter template for the UI and core logic of a React Native application. It focuses exclusively on the JavaScript/TypeScript application code, intentionally omitting the platform-specific native project configurations (e.g., android/ and ios/ folders) that are generated by the React Native CLI.

This template is designed for developers who wish to quickly integrate a clean, pre-configured UI codebase into a newly initialized React Native project, providing a consistent starting point for their application's visual and functional core.

Repository Contents

• src/ directory: Contains the main App.tsx component (your cleaned-up starter UI) and is intended for all your subsequent UI components, screens, utilities, and other JavaScript/TypeScript application logic.
• index.js: The entry point for the React Native application. It is configured to register the App component located within the src/ directory as the main application component.

Usage Instructions

To integrate this UI starter template into a new React Native project, follow these steps:

1. Initialize a New React Native Project: Begin by creating a fresh, full-featured React Native project using the React Native CLI. This step generates all necessary native project configurations for both Android and iOS platforms.

   npx react-native init MyNewAwesomeApp
   cd MyNewAwesomeApp

2. Remove Default Application Code: Delete the default App.tsx (or App.js) and index.js files generated in the root directory of your newly created project.

   # Ensure you are in your project root (e.g., MyNewAwesomeApp/)
   rm App.tsx # Or rm App.js, depending on your template
   rm index.js

3. Copy Template Code: Copy the src/ directory and index.js file from this GitHub repository into the root directory of your MyNewAwesomeApp project.

   • your-clean-template-repo/src/ ---> MyNewAwesomeApp/src/
   • your-clean-template-repo/index.js ---> MyNewAwesomeApp/index.js

   Note: Ensure the index.js file from this template is correctly configured to import your main App component from ./src/App. This template's index.js is set up for this purpose.

4. Install Dependencies and Clear Cache: To ensure all dependencies are correctly installed and to clear any cached build artifacts, execute the following commands. This is crucial for a clean build process.

   # Ensure you are in the root directory of your new project (MyNewAwesomeApp/)
   rm -rf node_modules yarn.lock package-lock.json # Cleans existing dependencies and lock files
   yarn install # Or npm install (reinstalls project dependencies)

   Optional (Recommended for troubleshooting): Clear Android and iOS build caches:

   rm -rf android/build android/.gradle android/app/build ios/build

   Optional: Clear Watchman cache:

   watchman watch-del-all

5. Run the Application: Start the Metro Bundler in one terminal window, and then launch the application on an emulator or a connected physical device in another terminal window.

   # Terminal 1: Start Metro Bundler
   yarn start --reset-cache # Starts the Metro Bundler with cache reset
   
   # Terminal 2: Run on Android (after Metro Bundler is running)
   yarn android --emulator "Pixel_6" # Replace "Pixel_6" with your emulator's name/ID
   # For iOS: yarn ios

By following these instructions, you can seamlessly integrate this clean UI template into your new React Native development workflow.