Recently, I started working on a project to develop a mobile application using React Native and Expo. Since I already have some experience with these technologies, I preferred them over Flutter and Dart.
In this guide, I'll walk you through the setup process, the tools required, and some common errors I encountered along the way.
Prerequisites: Before getting started, ensure you have the following installed:
- Node.js & NVM (Node Version Manager)
Download and install Node.js from the official website. To manage multiple Node.js versions, install NVM (useful for switching versions). Verify the installations: shell node -v # Check Node.js version nvm -v # Check NVM version 2. Git (Optional, but Recommended)
Install Git for version control and collaboration. Useful for pushing code to platforms like GitHub or GitLab.
Setup process
Step 1: Create a New Expo Project To create a new Expo project, run the following command:
npx create-expo-app MyReactNativeApp
This command will generate the project directory structure and essential files like App.js.
Step 2: Install Expo CLI Tools Navigate to your project directory and install Expo:
npm install expo
Verify the installation:
expo -v # Check Expo version
Step 3: Start the Project and Run It To start your project, use:
expo start
or
npx expo start
This will launch Expo’s development server, allowing you to test your app on a physical device (via the Expo Go app) or an emulator.
Understanding difference with npm npx, nvm, node, etc.
| Term | Definition |
| Node.js | It's not a new programming language or framework—it’s simply the runtime environment that lets you run JavaScript on any machine, whether it’s a server, desktop, or even an embedded system. |
| NPM (Node Package Manager) | This is your go-to tool bundled with Node.js for installing and managing JavaScript packages, making it one of the largest software repositories available. |
| NPX | Similar to NPM, NPX comes bundled with it, but instead of just installing packages, it lets you execute them directly without needing a global install. |
| NVM (Node Version Manager) | A handy tool that allows you to switch between different versions of Node.js easily, helping you manage compatibility without any hassle. |
Errors I Encountered:
NVM Setup: I experienced issues during the NVM setup due to a conflict with another version manager called Volta. If you run into similar problems, check whether Volta is interfering with your NVM installation. Alternatively, if you prefer, you can opt to use Volta instead.
Node.js Installation Issues: I also encountered problems installing Node.js, which were linked to an incorrect NVM configuration. Make sure that NVM is properly set up in your environment variables—for example, ensure that your PATH includes the correct NVM directories. This setup is crucial for a smooth Node.js installation.
I hope this guide helps you kickstart your React Native journey. Follow for more tips, tutorials, and updates on mobile app development!