DEV Community

Jerricke
Jerricke

Posted on

Getting started with React-Native and Expo 2023

Embarking on Your Mobile Development Journey with React Native

Mobile app development is an exciting and valuable skill in today's tech-centric world. Whether you're just starting or a seasoned developer, choosing the right framework can significantly influence your development path. Enter React Native, a powerful and versatile mobile app development framework developed by Meta. It offers numerous advantages compared to alternatives like Flutter, Kotlin, or Swift, making it an appealing choice for developers.

Why Choose React Native:

  1. Cross-Platform Harmony: React Native allows you to build mobile apps that seamlessly run on both iOS and Android platforms using a single codebase. This means less hassle compared to building separate apps for Swift and Kotlin.

  2. Speedy Development: React Native comes with a fantastic feature called hot-reloading, which lets you instantly see the effects of your code changes. This significantly speeds up the debugging and development process.

  3. JavaScript Love: If you're already familiar with JavaScript, you're in luck! React Native uses JavaScript as its primary language, making it accessible to a wide developer audience.

  4. Thriving Ecosystem: The React Native ecosystem is thriving, with a plethora of open-source libraries, tools, and a supportive community. This means you'll have access to a wealth of resources to enhance your app development.

Getting Started with React Native:

  1. Node.js Installation: Before diving into React Native, ensure you have Node.js installed on your system. You can easily get it from the official Node.js website (https://nodejs.org/). Choose the LTS version that matches your operating system, download it, and follow the installation instructions.

  2. React Native CLI Setup: With the recent updates in Expo SDK 46, we no longer need to install the global expo CLI packages (npm install -g expo-cli) as we now have a new local CLI that is "installed in every project and stays versioned with the runtime code — meaning projects are easier to set up, stay working longer, and the tooling updates less often." (source and for more information: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421)

  3. Creating Your First Project: With the React Native CLI in place, let's create your very first React Native project. In your terminal, run this command:

   npx create-expo-app@latest --template tabs@49
Enter fullscreen mode Exit fullscreen mode

Upon running that line of code, your terminal prompt you to input the name of your project. Feel free to name it whatever you desire and hit enter. Let your computer do it's thing and as your terminal initializes a new React Native project within a directory bearing the same name. The template will create a minimal project with the expo router installed as well! For more information, checkout the following link: https://docs.expo.dev/routing/installation/

  1. Launch Your App: Change your working directory to the newly created project folder:
   cd Name-of-your-app
Enter fullscreen mode Exit fullscreen mode

Then to get your expo application running, run the following command:

   npx expo
Enter fullscreen mode Exit fullscreen mode

This command will boot-up your expo-cli project and a QR code following a list of options will appear. To view your application on your own personal devices, go to your respective application stores (app store or google play store, search up and download the Expo Go application). Once your application is downloaded, scan the QR code with your device and it will direct you to your Expo Go app and launch your application.

Bravo! You've successfully set up your React Native project and have your app running on either an Android or iOS simulator.

Additional to using your devices, there are ways to install and setup virtual simulations of your apple and android devices. A quick and simple way to setup an iOS virtual simulator is to download the XCode application from the app store (for Mac users only). Then head on over to your finder/application directory, right click the XCode application, select show package contents, navigate to Contents/Developer/Applications and then select Simulator. And another quick and simple way to setup an android virtual simulator is to download the Android studio software application. There are extensive guides and tutorials on the official web page as well, making sure the process is easy to follow! (https://developer.android.com/studio?gclid=Cj0KCQjwgNanBhDUARIsAAeIcAtNxlfTvQt-8PH4y1OYuM3UN8TC3y4mYCnDQ78rBh0aEy1r4lRf9tMaAmUQEALw_wcB&gclsrc=aw.ds)

In conclusion, React Native offers a convenient and efficient way to embark on your mobile app development journey. Its cross-platform compatibility, swift development cycle, and robust developer community make it an appealing choice. With Node.js and React Native CLI now at your disposal, you're well on your way to creating your very first mobile app with React Native. Enjoy the coding adventure!

Top comments (0)