
I've been working pretty heavily with React Native for the past few years and have come to love the framework for the ease of development that it provides and the wonderful and active community that has rallied around it. I think that it's definitely worth looking into as an option for your next mobile app project.

## What we're going to build

I thought it would be a fun exercise to show how to build a stock photo browsing app with UI loosely based on the Unsplash app for iOS to highlight how one might go about building some non-trivial interactions with React Native. This series is going to focus on iOS-specific code since we drawing heavily on the Unsplash app UI.

Okay, let's dive in!

## Setting up your environment

In order to build an iOS application, you need to have access to an Apple computer. I've found that my Macbook Pro (which is a few years old at this point) still works quite well for building out React Native apps.

There are a couple of different ways to set up React Native projects these days, so I'm going to go over the steps I'm taking to get the project setup so you can follow along and we can all be on the same page.

To start, you should have [Node.js](https://nodejs.org/en/) 12 or higher installed on your machine. If you don't have any version of Node I would suggest that you install [NVM](https://github.com/nvm-sh/nvm) to your machine. NVM is a program that helps you manage multiple versions of Node.js on your machine. It makes it easy to install specific versions and to switch between those versions should one of your projects need a different version than others. To download NVM [follow the instructions on their Github page](https://github.com/nvm-sh/nvm#installing-and-updating). Once you've installed NVM run this command to make sure that it's all installed properly.

```bash
nvm --version
```

If you get a version number, you've got NVM all installed correctly! 🎉

Just installing NVM will not get you any versions of Node.js installed. To install Node.js v12 with NVM you can run this command in your terminal.

```bash
nvm install 12
```

This will install the latest stable version of Node.js 12.x.x (for me this was 12.6.1) and switch you to use that version of Node. Now when you run the following command you should get back something like 12.x.x.

```
node -v
```

Once you have Node.js properly installed you should install the `expo-cli`. This is the tool we will use to generate your React Native project. To install it run this command in your terminal.

```bash
npm install -g expo-cli
```

After the install is completed make sure that everything is good to go by running this in your terminal.

```bash
expo --version
```

If this reports back with a version number then you're all set! It's time to generate your project.

## Generating your project

Now we're getting closer to the exciting part where we get to make progress on the code for your app. With the `expo-cli` we just installed we'll be able to create a new React Native project with just a few commands in the terminal. To generate your project run this command in the...you guessed it, terminal.

```bash
expo init StockPhotoBrowser
```

Now when you run this command you will be prompted to select a type of workflow. If you don't know about Expo workflows there are two different types: managed and bare.

Expo managed workflows make it incredibly easy to get up and running with a React Native project in no time, but with that convenience, they lack some of the functionality that you may want as time goes on and your application's needs and features grow. For this project, we could probably use an Expo managed workflow, but my preference is the bare workflow.

Initializing an app to use the bare workflow gives you a lot more control over the app in regards to what dependencies you can use as well as the ability to write native code (Objective-C or Java).

So, back to initializing your project. Select the option that says `minimal (TypeScript)`. Oh yeah, did I mention we are doing this in TypeScript? Don't worry, it's not as scary as it sounds.

![Willy Wonka what a surprise meme](../images/surprise.jpg)

Now your project is being built out by the `expo-cli`, all the JavaScript dependencies are being installed, and before you know it the script has completed. At the end of the output for the last command, there are some directions for getting started. First, you will need to install the [cocoapods](https://cocoapods.org/) for the iOS project. If you do not have cocoapods installed on your machine yet, you can follow the [getting started guide](https://guides.cocoapods.org/using/getting-started.html) on their site.

```bash
cd StockPhotoBrowser/ios
```

```bash
pod install
```

Okay, that should be it for setup. Let's run this thing!

## Building and running your project

After the pods have installed, back up a directory so you're in the root directory of the project, and run the app with these commands.

```bash
cd ..
```

```bash
npm run ios
```

If all goes correctly, you should see the iOS simulator open and your app open inside of it. At the time of writing, it looked something like this.

![default React Native app screen](../images/ios-stock-photo-browser-getting-started-app.png)

You did it! Now, regardless of whether that was simple or complex for you, take some time to congratulate yourself. You deserve it. 😉

## What's next?

We have a long way to go to pull off a decent looking stock photo browsing app in React Native, but we have a good start. Getting a new React Native project started can be difficult if it's your first time, but if you keep with it, you will become comfortable with working with the framework. I hope that as we go through this series of articles you come to enjoy working with React Native as much as I do.

We're only just getting started! Follow along with the next article on [adding navigation to our new React Native application](https://jasonmerino.me/articles/how-to-make-an-app-with-react-native-setting-up-navigation).


This is the first in a series showing how to make an app with React Native. We'll go over getting your computer set up to build and run React Native apps written in TypeScript.

How to make an app with React Native | Getting Started

How to Make an App With React Native I: Getting Started


In the last article in this series, [Stock Photo Browser in React Native: Getting Started](https://jasonmerino.me/articles/how-to-make-an-app-with-react-native-getting-started), we initialized a React Native app with TypeScript. If you haven't followed through that article, I recommend taking some time to go through it to make sure your project is set up in the same manner as the one we'll be working on below.

# Adding navigation to your project

Now that we have a working app, let's add in a way to navigate around to different screens. If you've checked out the Unsplash app for iOS, which we are using for our UI inspiration for this app, you have most likely noticed that there are a few different screens that we are going to need to build. There's a great library called React Navigation that helps with navigating from screen to screen in React Native apps.

## Installing the navigation library and dependencies

To install the React Navigation library run this command in your terminal. Make sure that you're in your project root directory before doing this.

```bash
npm install @react-navigation/native
```

This will get you the main React Navigation module for React Native which orchestrates interactions between a few other modules. After this initial install, you need to also add the following modules to your project. Since we are using a bare React Native workflow with TypeScript we can run this command to install the extra dependencies.

```bash
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
```

![dependencies, dependencies everywhere meme](../images/dependencies-meme.png)

Since we are using a version of React Native greater than 0.60 we don't need to link native modules with `react-native link`. All we need to do to finish the installation is to change into our `ios` directory and run the pod install command.

```bash
cd ios
pod install
cd ..
```

## Adding the code to your project

After installing all project Pods afresh we need to make some changes to our application code. At this point, we need to import the `react-native-gesture-handler` module which helps with handling the default swipe-to-go-back-a-screen gesture that you will likely have had experience with on iOS. Also, we'll be adding a NavigationContainer component to the top level of our application which will give the app's screens the ability to use various navigators. We'll be making these changes in the App.tsx file located in the project's root directory.

```typescript
import "react-native-gesture-handler"
import React from "react"
import { StyleSheet, Text, View } from "react-native"
import { NavigationContainer } from "@react-navigation/native"

export default function App() {
  return (
    <NavigationContainer>
      <View style={styles.container}>
        <Text>Open up App.tsx to start working on your app!</Text>
      </View>
    </NavigationContainer>
  )
}

...
```

## Adding a stack navigator

For navigation in this project, all we'll need is the addition of a stack navigator. Different navigation features are packaged in different node modules when using React Navigation. The last module we'll need to install is the stack navigator module.

```bash
npm install @react-navigation/stack
```

To add a stack navigator to the app we'll need to move the home page UI out of the NavigationContainer component and place it in its own file, then import that home page UI into the App.tsx file and add it as the default screen in the stack navigator.

Let's dive in.

First, let's do a quick refactor and create a `screens` directory in the project root directory and inside that directory create a file called `home.screen.tsx`.

![VS Code file explorer showing the screens directory with home screen file](../images/react-navigation-screen-file-system.png)

After creating that new screen file, remove the home screen components from the `App.tsx` file and place it in the `home.screen.tsx` file. When you're finished it should look something like this.

```typescript
import React from "react";
import { View, Text, StyleSheet } from "react-native";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

export const Home = () => {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
};
```

And then back in the `App.tsx` file we need to add in the new stack navigator. We'll need to import `createStackNavigator` from the `@react-navigation/stack` module and then create a stack navigator called AppStack and use that stack navigator inside the NavigationContainer component. After all that, your `App.tsx` file will look something like this.

```typescript
import "react-native-gesture-handler";
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { Home } from "./screens/home.screen";

const AppStack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <AppStack.Navigator>
        <AppStack.Screen name="Home" component={Home} />
      </AppStack.Navigator>
    </NavigationContainer>
  );
}
```

Now run your app in the simulator to make sure that everything is installed correctly and running as expected. If everything went to plan you should see the same default text telling you to open the App.tsx file and make some edits but now with a navigation bar titled "Home" at the top of the screen like this.

![](../images/stock-photo-browser-home-screen-with-navigation-bar.png)

Run this command to build and run your app on the simulator.

```bash
npm run ios
```

Now that we know that the stack navigator is installed correctly let's disable that navigation bar since for this screen we're going to add a custom navigation bar. For now, just disable the navigation bar by adding an options prop to the AppStack.Screen component for the home screen and setting header to a function that returns null. It should look something like this.

```typescript
<AppStack.Screen
  options={{
    header: () => null,
  }}
  name="Home"
  component={Home}
/>
```

## That's a wrap

At this point, we have a new React Native app with the basics of screen-to-screen navigation implemented. Your app now looks the same as it did when we started this section, but it's set up so that we can easily navigate to any new screens we create.

To see the full example so far you can [check it out on Github](https://github.com/jasonmerino/StockPhotoBrowser/tree/02-navigation), or if you want to see changes between the last article and this one you can [view those differences here](https://github.com/jasonmerino/StockPhotoBrowser/compare/01-getting-started...02-navigation).

[Join us in section three of the making an app with React Native series](https://jasonmerino.me/articles/how-to-make-an-app-with-react-native-api-integration-and-mobx) where we hook up [API integration with Pixabay](https://pixabay.com/api/docs/) and data management with [Mobx](https://mobx.js.org/)


In the second installment of the How to Make an App With React Native series, we'll cover adding the react-navigation library to the app to allow users to navigate around the app.

How to Make an App With React Native | Setting up Navigation

How to Make an App With React Native II: Setting up Navigation


This is part three of a series on learning how to build a stock photo browsing app in React Native. If you haven't read the previous 2 articles in this series I suggest you go through those first. [Here's the post on getting started with React Native](https://jasonmerino.me/articles/how-to-make-an-app-with-react-native-getting-started).

So far we've been able to create a new React Native project and add navigation to the app. This article is where we dive into some features that are a little more interesting: API integration and data management with [Mobx](https://mobx.js.org/). Hopefully, through this series of articles, you can see how simple it is to create an app with React Native and are inspired to create your own.

Let's dive into what's next!

## Register as a Pixabay user

The first thing we're going to do is to register as a Pixabay user so that we can get an API key which will allow us to access the Pixabay API. If you aren't familiar with API security, there are many different ways to secure your API. An API key is probably the most simple measure an API creator can take to secure their API and is used for both rate-limiting (only allowing your API key to make a certain amount of requests in a set time) or revoking API access altogether. If you aren't familiar with APIs in general, you can get a basic overview by watching this [video explaining what an API is](https://www.youtube.com/watch?time_continue=191&v=s7wmiS2mSXY&feature=emb_logo).

To register as a Pixabay user visit the [Pixabay API documentation page](https://pixabay.com/api/docs/) and click on the Join link in the header. After going through the registration flow go back to the [API documentation page](https://pixabay.com/api/docs/), scroll down to the "Search Images" heading and you should see your API key populated on the page with a green background. That section of the documentation page should look something like this.

![pixabay API key sample screenshot](../images/pixabay-api-key-sample.png)

![oprah you get an API meme](../images/oprah-you-get-an-api-meme.png)

## Adding your API key to your app's config

Now that we have our API key we need to store it somewhere in our application. We could hard code it into our URL string when we make our request to the API but that's not a great practice. We shouldn't keep keys of any type in our application code because it makes handling different environments difficult and because once some code is stored in Git it's there for as long as the repo exists. For more information about this best practice [check out this article about keeping your configuration outside of your app's codebase](https://12factor.net/config).

### Installing the react-native-config module

To store your API key we'll be using the [react-native-config](https://www.npmjs.com/package/react-native-config) module. The installation steps are simple for this module. To install the module to your project run this command in your terminal.

```bash
$ npm install react-native-config
```

That will take care of adding the module to your project and updating your package.json file to include react-native-config every time you install Node modules. Next, to get it added to the Xcode project we need to install the cocoapods for this dependency. Run these commands in your terminal to take care of that step.

```bash
$ cd ios
$ pod install
$ cd ..
```

### Creating your configuration file

After you've successfully installed the react-native-config module you will need to rebuild the app for the simulator to pick up those changes. But first, let's create the file that holds your app's configuration.

In the root directory of your project create a file called `.env`. This hidden file (denoted by the . at the beginning of the file name) stores simple key-value pairs you will use in the app. In that `.env` file that you just created insert this text, making sure to replace `YOUR_API_KEY_HERE` with your actual API key.

```
PIXABAY_API_KEY=YOUR_API_KEY_HERE
```

The final step in adding this environment config file is to add it to your `.gitignore` file. Open up that file and add this entry on a new line at the end of the file.

```
.env
```

Doing this will ensure that your API key does not make it into source control and will not be available for anyone to deviously access if they gain access to your hosted git repo. That being said, this is not a perfect system. Your key will still ship with your release build of the app, but this is at least one less place attackers can steal your secrets. Here are some [words of wisdom from this article on Hackernoon about securing mobile APIs](https://hackernoon.com/mobile-api-security-techniques-682a5da4fe10).

"Regardless of your efforts, it is not a matter of if a secret will be stolen, but if the time and effort to steal it is worth the return. Make it as difficult as you can afford."

So basically...

![one does not simply secure API keys in a mobile app meme](../images/one-does-not-simply-secure-api-keys-in-a-mobile-app-meme.png)

Okay. Moving on!

## Storing data in your app

Great! Now we're ready to call the API and get some data about these stock photos, but where are we going to keep this information? We could request the data and store it in the local state of the requesting component but that does not scale because you will end up re-requesting that stock photo data from the API every time that component mounts and that data will be lost whenever that component unmounts.

This is where Mobx comes in. Mobx is described as "Simple, scalable state management" and it does that very well. Essentially, the concept of Mobx is that you will create a store for the app's data. Inside that store will be data that is marked as observable, which means that it can be consumed by reactive components. To react to changes in the data in the store you will need to mark your component as an observer of the observable data. With these few, simple steps, when your data in the store change your components will re-render a new UI backed by the new data.

### Installing Mobx in your project

To install Mobx in your project run this command in your terminal. We are going to need both the `mobx` module as well as the `mobx-react` module for React specific bindings. All you need to do to install these modules is to run this command in your terminal.

```bash
$ npm install mobx mobx-react
```

### Setting up the application to handle Mobx data

After this, we will want to set up the application component hierarchy to support using Mobx in a reactive way. To do this we'll want to import the batching module and the Provider component into our App.tsx. You can read more about [the importance of the batching module when using Mobx with React hooks](https://github.com/mobxjs/mobx-react-lite#observer-batching) here.

At the very top of your App.tsx file import the batching module like this.

```typescript
import "mobx-react-lite/batchingForReactNative";
```

Then import the Provider component from the `mobx-react` module and wrap the NavigationContainer component inside the Provider component. After doing this your code should look something like this.

```typescript
// App.tsx

import "mobx-react-lite/batchingForReactNative";
import "react-native-gesture-handler";
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { Home } from "./screens/home.screen";
import { Provider } from "mobx-react";

const AppStack = createStackNavigator();

export default function App() {
  return (
    <Provider>
      <NavigationContainer>
        <AppStack.Navigator>
          <AppStack.Screen
            options={{
              header: () => null,
            }}
            name="Home"
            component={Home}
          />
        </AppStack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}
```

### Creating a Mobx store

Now that we have the needed Mobx libraries installed and the React Native application set up to consume data from a Mobx store, the next step is to create the store itself so we can stash response data from the Pixabay API.

Creating a Mobx store is very simple. It is simply a TypeScript module with a couple of exported functions and observable data. Now, let's create the photo store by creating a new folder named `stores` in the project's root directory and creating a file called `photo.store.ts` inside it.

## Requesting data from the Pixabay API

In this file, we'll be creating a `photos` variable which will contain an object of all the searches for photos that we'll be doing as well as a function called `searchPhotos` which will execute the search for the photos data and store it in the `photos` variable. This is also the place where we'll finally be pulling our API key from the config we set up in the `.env` file earlier. Here's what the `photo.store.ts` file should look like.

```typescript
// stores/photo.store.ts

import { observable } from "mobx";
import Config from "react-native-config";
import { IPhoto } from "../types/photos.types";

const BASE_URL = "https://pixabay.com/api";

export const photos = observable<{ [keyword: string]: IPhoto[] }>({
  default: [],
});

export const searchPhotos = async (keyword?: string) => {
  const url = `${BASE_URL}/?key=${Config.PIXABAY_API_KEY}&safesearch=true${
    keyword ? `&q=${keyword}` : ""
  }`;

  const response = await fetch(url);

  const data = await response.json();

  photos[keyword || "default"] = data.hits;
};
```

You'll notice that at the top of the file we import observable and later on wrap the value for the `photos` variable with it. Using Mobx this way will allow components that are using the `photos` variable to update when the value of that variable changes.

Also, note that the `searchPhotos` function makes a request to the Pixabay API with an optional keyword. If that keyword is left out, which will be for our first call, the API will return a list of "all images" according to the documentation page. In this case, we will also store the photo data under a key of 'default' which will be used to render the default photos on the main screen.

Make sure that before running your app with this code you also create the `types/photos.types.ts` file in your project. It should look like this.

```typescript
// types/photos.types.ts

export interface IPhoto {
  id: number;
  pageURL: string;
  type: string;
  tags: string;
  previewURL: string;
  previewWidth: number;
  previewHeight: number;
  webformatURL: string;
  webformatWidth: number;
  webformatHeight: number;
  largeImageURL: string;
  imageWidth: number;
  imageHeight: number;
  imageSize: number;
  views: number;
  downloads: number;
  favorites: number;
  likes: number;
  comments: number;
  user_id: number;
  user: string;
  userImageURL: string;
}
```

## Rendering the photos to the app's home screen

Now we're at the exciting part! It's time to take that photo data that we're getting back from the API and render out some images to the home screen of your app.

![so excited, I can't wait meme](../images/so-excited-i-cant-wait-meme.png)

All we need to do now is to make some changes to our `screens/home.screen.tsx` file and add a separate Image component, which we'll do some further customizations to later on. For now, our `home.screen.tsx` file should look like this.

```typescript
// screens/home.screen.tsx

import React, { useEffect } from "react";
import { FlatList, StyleSheet } from "react-native";
import { photos, searchPhotos } from "../stores/photo.store";
import { Image } from "../components/image.component";
import { observer } from "mobx-react";
import { deviceWidth } from "../theme/space";
import { IPhoto } from "../types/photos.types";

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export const Home = observer(() => {
  useEffect(() => {
    searchPhotos();
  }, []);

  const renderPhoto = ({ item }: { item: IPhoto }) => (
    <Image
      key={item.id}
      uri={item.largeImageURL}
      style={{
        width: "100%",
        height: (deviceWidth / item.imageWidth) * item.imageHeight,
      }}
    />
  );

  return (
    <FlatList
      keyExtractor={(photo) => photo.id.toString()}
      data={photos.default}
      style={styles.container}
      renderItem={renderPhoto}
    />
  );
});
```

Here you can see that we've wrapped the `Home` component with an `observer` function. This tells the component, that when the Mobx data we're using in this component changes, make sure to re-render the component with that new data.

We've also changed the rendered output of this function component to a FlatList, which is a pretty efficient way to render a list of items with an unknown length. You can [read more about the FlatList component here](https://reactnative.dev/docs/flatlist). We then pass the FlatList component the default search that is stored in the photo store and we also define a render function for each item in the list of data.

Possibly the most important part of these changes is the `useEffect` hook. What this hook does is take a callback function to be run at least once and whenever the data in the second argument changes. We only want the `searchPhotos` function to be called once, so we just pass in an empty array as the second argument.

After you've made those changes, don't forget to create a new Image component in the `components/image.component.tsx` file. It should look like this.

```typescript
// components/image.component.tsx

import React, { FC } from "react";
import { Image as Img, ImageStyle } from "react-native";

interface IProps {
  uri: string;
  style?: ImageStyle;
}

export const Image: FC<IProps> = ({ uri, style }) => {
  return <Img source={{ uri }} style={style} />;
};
```

This is an abstraction that we will use later on to set a default loading image for all images, among other things. For now, it's just a simple pass-through of image data to the React Native Image component.

Also, we'll need to add in the deviceWidth helper in the `theme/space.ts` file. This will make it easier to get the device width in a standard way across the app when we need it. That file uses the `Dimensions` API from React Native to get the device's width and should look like this.

```ts
// theme/space.ts

import { Dimensions } from "react-native";

export const deviceWidth = Dimensions.get("screen").width;
```

With those changes in your app, you should see Pixabay images showing on the home screen! Congratulations! 🎉 You've just added an API call to get remote data and reactively render it in your app. Not too shabby.

## Conclusion

In this article, we've covered how to sign up to get a Pixabay API token, how to request data from that API from your React Native app, and how to store that data in a scalable manner in the app with Mobx.

We covered a lot in this article, so make sure you have a good grasp of everything we did.

On Github, you can [view the changes between this article and article two](https://github.com/jasonmerino/StockPhotoBrowser/compare/02-navigation...03-api-and-data) in this series, [How to Make an App With React Native: Setting up Navigation](https://jasonmerino.me/articles/how-to-make-an-app-with-react-native-setting-up-navigation).

If you're ready, [join us in the next article in the series on creating a search results screen](https://jasonmerino.me/articles/how-to-make-an-app-with-react-native-4-the-search-results-page). In it we cover pushing a new screen onto the navigation stack, customizing the navigation header, creating a horizontally scrolling list with custom interval snapping, and much more.


In part three of the How to Make an App With React Native series we'll cover signing up with Pixabay to get your API key, requesting data from the API, storing that data in a reactive Mobx store and rendering images from the API data.

How to Make an App With React Native | API Integration and Mobx

How to Make an App With React Native III: API Integration and Mobx

In part four of the how to make an app with React Native series, we cover adding an explore component and navigating to a new search results screen.

Series: How to Make an App with React Native

How to Make an App With React Native I: Getting Started

How to Make an App With React Native II: Setting up Navigation

How to Make an App With React Native III: API Integration and Mobx

How to Make an App With React Native IV: The Search Results Page