Build Your First Mobile App Using React Native and Expo
Tags: reactnative, react, expo, beginners
Published: 2022-04-21 20:05:05

**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](https://reactnative.dev/docs/components-and-apis). In addition, the community also offers a bunch of [custom pre-built React Native components](https://js.coach/?collection=React+Native) for whatever use case we may need!

#### Resources

- [React Native Core Components documentation](https://reactnative.dev/docs/components-and-apis)
- [Expo documentation](https://docs.expo.dev/)