Getting Started with React Native in 2020: Build Your First App

In recent years, hybrid frameworks have evolved from using web views to use native APIs. The cross-platform approach for developing a mobile application comes with its own opportunities and obstacles. One great option that falls under the canopy of cross-platform development is React Native. It was developed and used by Facebook, and many big names now use it, including Tesla, Walmart, Uber Eats, Instagram, Discord, Wix and more. React Native is based on Facebook’s web library ReactJS.

If you are new to mobile development, the easiest way to get started is with Expo CLI. Expo is a set of tools built around React Native. Its most relevant feature is that it can get you writing a React Native app within minutes. If you are already familiar with mobile development, you may want to use React Native CLI. It requires XCode or Android Studio to get started. React Native uses RCTBridgeModule to make a connection between native code and JavaScript code. In simple words, React Native brings the React to mobile app development. Its goal isn’t to write the code once and run it on any platform. The main goal here is to learn once and write-anywhere. An important distinction to make.

To dive deeply in React Native’s ecosystem, you need to install a Node.js and Watchman.  Node.js, is a JavaScript runtime, to build your JavaScript code, and a watchman is a tool developed by Facebook for watching file changes. Lastly, irrespective of the OS you are using, you need to install the Java SE Development Kit (JDK).  macOS developers can install XCodewhileAndroid users can install Android Studio for setting up its development environment. To generate a new app, enter the command to install the command-line tool provided by Expo.

Get started by creating a project directory using the CLI tool just installed. Open your terminal and run it with the name you want. Once the process is done, traverse inside the project directory. The demo you’re going to build requires the use of a navigation pattern between two screens. The first screen is going to display a list of items, and through the second screen, you can add an item to the list. This is a typical stack navigation pattern and using the react-navigation library, you can add this to your React Native app.

The third library you’re going to install is called react-native-paper, which will provide a collection of custom UI components based on Material Design that you can integrate directly. The file in the generated app structure is what initializes the Expo app. In other words, it’s the entry point of the development process. By default, it displays a text message and uses a functional component for that. Components are the visual elements that you see on the screen in a React Native app.

To see the default app in action, start the development server from the terminal window with expo start, either using a simulator or a real device. Expo CLI allows you to run your React Native app on a physical device without setting up a development environment. Once you've set these up, you can launch your app on an Android Virtual Device by running npm run android, or on the iOS Simulator by running npm run iOS (macOS only).