React Native Lab

GITHUB

NPM

react-native-lab is a cli tool to set up a React Native project with some pre-defined configurations. This tool helps you quickly set up a React Native development environment, including installing necessary dependencies like JDK, Android Studio.

This project is inspired by the simplicity and effectiveness of create-next-app.

Table of Contents

• 🚀 Features
• 📸 Screenshots
• ⚙️ Prerequisites
• 🏁 Getting Started
• 🛠️ Common Issues
• 🆘 Getting Help
• 🤝 Contributing
• 📜 License

🚀 Features

1. Installs JDK (OpenJDK): Automatically installs the necessary JDK for Android development.

2. Installs Android Studio: Sets up Android Studio, including the necessary SDKs and tools.

3. Sets Environment Variables: Configures system environment variables such as ANDROID_HOME, ANDROID_SDK_ROOT, and JAVA_HOME.

4. Pre-built Templates: Choose from a variety of pre-built templates to kickstart your React Native project.

   • Blank
   • Bottom Navigation
   • Drawer Navigation
   • Stack Navigation

5. Project Structure: Creates an src folder for you want.

6. Cross-Platform Support: Works on Windows, macOS, and Linux.

7. Environment Setup:

   • Sets up a .env file for managing environment variables.
   • Offers choice between react-native-config and react-native-dotenv for handling environment variables.

8. Alias Configuration: Configures path aliases for cleaner and more manageable imports.

9. NativeWind Integration: Install and configure NativeWind for styling.

10. React Native Version Selection: Allows you to set up the project with your preferred React Native version.

11. Console Remover: Automatically removes console logs in production builds, enhancing security and slightly reducing app size.

12. Custom Hooks: Option to include a set of useful custom hooks:

    • useDebounce: Delays invoking a function until after a wait period.
    • useThrottle: Limits the rate at which a function can fire.
    • usePrevious: Accesses the previous value of a state or prop.
    • useOrientation: Detects and responds to device orientation changes.
    • useResponsiveLayout: Provides responsive layout information based on screen size.

📸 Screenshots

Here are the available templates you can use with react-native-lab:

Blank Template

Navigation Template

⚙️ Prerequisites

• Node.js (v18 or higher)
• npm (v6 or higher)

🏁 Getting Started

To get started with react-native-lab, follow these steps:

1. Ensure you have all the prerequisites installed on your system.
2. You can use npx to run the tool without installing it:

   npx react-native-lab@latest

🛠️ Common Issues

• Installation Errors: Ensure you have the correct versions of Node.js and npm installed. Try clearing the npm cache:

  npm cache clean --force

• Permission Errors: Run the command with elevated privileges (e.g., using sudo on macOS/Linux or running the terminal as an administrator on Windows).

🆘 Getting Help

If you need further assistance, you can:

• Check the GitHub Issues for similar problems.
• Open a new issue with detailed information about your problem.
• Reach out to the community for support.

By following these steps, you should be able to resolve most issues and get your React Native project up and running smoothly.

🤝 Contributing

Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request.

To contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature).
3. Make your changes.
4. Commit your changes (git commit -m 'Add some feature').
5. Push to the branch (git push origin feature).
6. Open a pull request.

Please make sure to follow the project's coding guidelines and standards.

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.

📜 Changelog

For a detailed list of changes and updates, please refer to the Changelog.