Build Your First Mobile App Using React Native and Expo

React Native is an open source framework used to make applications for mobile, specifically Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP.

Expo is a framework for React Native that helps us create the skeleton of our application and view our application’s progress.

To get our React Native application started, we need to create a project with Expo!

Setup our React Native App Using Expo

• To setup expo, we would run
  • npm install --global expo-cli to install expo globally
  • we would then run npm init project-name to create our React Native project within the current directory (similar to create-react-app)
  • the previous init command will prompt us, in the terminal, to choose the type of template workflow we’d prefer (folks typically go with blank on their first app if building from scratch)

Now that we have our project directory created, we can start our frontend server so we can view our application as we code.

Start our Client Server

• to start our client side server, we would cd into our project’s directory and run npm start
• this start command will automatically open up the devtools in our browser and start Expo’s Metro Bundler on a local port. To open a preview of our application, we can either:
  • open the Expo Go application on our mobile device by scanning the QR code that appears in the browser
  • OR we can run our preferred simulator (using i for ios or a for android). If we’d like to view a preview of our frontend application within a simulator, we would need to install XCode first.

Here’s where the fun begins! Now we get to code in React Native!

Code in React Native

React Native provides core components, which are pre-built components with mobile optimization. Below are a few starter core components and APIs, which may be useful for when building our first React Native application and getting a feel for this framework if we’ve never used it before.

Helpful Starter Core Components

View the view component is the most fundamental React Native component that acts as a container with flexbox, style, some touch handling, and accessibility controls. The View in React Native is the mobile equivalent to <div> in JSX or HTML.

Text the text component in React Native is for displaying text. It is equivalent to JSX or HTML relative text tags, such as <small>, or header tags, such as <h1>, <h2>, <h3>, or paragraph tags, such as <p>.

Image is a component that displays different types of images. This component is similar to the <img> tag in JSX or HTML.

ImageBackground is a component that acts similarly to the Image component and it allows any children components to be layered on top of it self. This component is the React Native equivalent to using a background-image or backgroundImage property within the styling of a custom JSX component.

TextInput is a component that allows users to input text into the application via a keyboard, which (when using on a mobile application) usually slides on screen. The TextInput props allow for configurability of auto-correction, capitalization, placeholder text, and different keyboard types. To read and create a call back function based on a user’s input, we would use the onChangeText event.

Additionally, there are other types of TextInput events as well, such as onSubmitEditing (which elicits a callback function when the submit button is pressed) and onFocus (which blurs texts, such as when inputting a password). TextInput and its event handler props are similar JSX forms, which usually use the <form>, <input>, and <label> tags along with the onSubmit event.

ScrollView or FlatList are components that enable viewing children components via screen scrolling capabilities with a touch locking ‘responder’ system. ScrollView loads all of its children components on first render, so if we have a bunch of child components that need to load at once we would see a performance downside. FlatList improves this performance downside by loading its children components ‘lazily’, when the children are about to appear on the screen as the user is scrolling.

Button or Pressable are components that enable event handlers via user interactivity. Button is a simple component that acts as a button and supports minimal levels of customization. The Pressable component allows for more complex customization as well as more complex user interactions with itself and its children components.

React Native also offers other types of interactive pre-built components depending on what we need for our app. Some notable mentions are TouchableOpacity, which dims the opacity of its wrapped View on press down, and TouchableWithoutFeedback, which allows for pressing anywhere within its singular View child. Although there are warnings in the documentation to avoid using TouchableWithoutFeedback unless we have a good reason, this component is cool because it can be used for user presses anywhere on screen (useful for games).

These touchable components are similar to using the <button> tag or the<input> tag with a submit type in JSX or HTML.

Some Useful APIs

StyleSheet is an abstraction that is similar to CSS StyleSheets, almost like ReactJS styled components and inline styling mixed together. This component is pretty cool because it supports reusability in allowing for pre-defined variables within its style values.

Dimensions is an API that allows us to get the height and width of the currently used window. For developing in mobile, this API is extremely useful if we want to develop dynamically-styled components that render well on sorts of different of mobile devices and screen sizes.

Additional Components

These components mentioned are just some of the most fundamental and most used components, but React Native offers a plethora of pre-built core components and APIs. In addition, the community also offers a bunch of custom pre-built React Native components for whatever use case we may need!

Resources

• React Native Core Components documentation
• Expo documentation