How to setup a React native with EXPO
Are you eager to dive into mobile app development with React Native and Expo but not sure where to start? Look no further! In this guide, we’ll walk you through the process step by step, making it accessible to beginners.
Setting Up Your Project
First things first, let’s set up your project. Open your terminal (if you’re using Windows, don’t worry, we’ll guide you through), and use the following command:
npx create-expo-app <project-name>Replace <project-name> with the name you want for your project. This command will scaffold a new Expo project for you.
Expo offers various templates to kickstart your project. Instead of running the above code, I recommend using,
npx create-expo-app --templateWith this command, you'll be prompted to choose a template. Here are your options:
- Blank: A clean slate, perfect for starting from scratch.
- Blank (TypeScript): Similar to the blank template but with TypeScript enabled for type-safe code.
- Navigation (TypeScript): Includes file-based routing and TypeScript for easier navigation setup.
- Blank (Bare): Provides a blank template with access to native code, ideal for advanced users.
Use the arrow keys to navigate and hit enter to select your preferred template.
Installing Dependencies
Once you’ve selected a template and named your project, Expo will handle the rest. It will download the necessary files and install dependencies for you. Sit back and relax while the Expo does its magic.
Running Your Project
Now that your project is set up, it’s time to run it. Navigate to your project directory in the terminal:
cd <project-name>Then, depending on your target platform, you can use the following commands:
- For Android:
npm run android - For iOS:
npm run ios(Note: You need a macOS to build the iOS project) - For Web:
npm run web
Alternatively, you can run your app in development mode on your mobile device by running:
npm startKeep in mind, that to utilize this method, you’ll need to have the Expo Go app installed on your mobile device.
Exploring Your Project
Once your project is running, open the project folder in your favourite text editor (such as VS Code) to start exploring and editing the code. Feel free to experiment and make changes as you learn.
Leveraging Expo SDK
Expo SDK provides a wealth of features and APIs to simplify mobile app development. For example, if you need to access user contacts, you can simply install the expo-contacts package and import it into your project. No need to worry about calling APIs or handling permissions; Expo takes care of it for you.
Contacts API Documentation: https://docs.expo.dev/versions/latest/sdk/contacts/
Their documentation is comprehensive and well-structured, covering every aspect of the development process with professionalism and clarity.
With these steps, you’re well on your way to building your first React Native app with Expo. Happy coding!
Documentation,