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

May 04, 2020

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.

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. 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.

To register as a Pixabay user visit the Pixabay API documentation page and click on the Join link in the header. After going through the registration flow go back to the API documentation page, 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

oprah you get an API meme

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.

Installing the react-native-config module

To store your API key we'll be using the 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.

$ 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.

$ 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

. 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
file that you just created insert this text, making sure to replace
with your actual API key.


The final step in adding this environment config file is to add it to your

file. Open up that file and add this entry on a new line at the end of the file.


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.

"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

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

module as well as the
module for React specific bindings. All you need to do to install these modules is to run this command in your terminal.

$ 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 here.

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

import "mobx-react-lite/batchingForReactNative";

Then import the Provider component from the

module and wrap the NavigationContainer component inside the Provider component. After doing this your code should look something like this.

// 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 (
              header: () => null,

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

in the project's root directory and creating a file called
inside it.

Requesting data from the Pixabay API

In this file, we'll be creating a

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

// stores/

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

const BASE_URL = "";

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

variable with it. Using Mobx this way will allow components that are using the
variable to update when the value of that variable changes.

Also, note that the

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

file in your project. It should look like this.

// 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

All we need to do now is to make some changes to our

file and add a separate Image component, which we'll do some further customizations to later on. For now, our
file should look like this.

// screens/home.screen.tsx

import React, { useEffect } from "react";
import { FlatList, StyleSheet } from "react-native";
import { photos, searchPhotos } from "../stores/";
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(() => {
  }, []);

  const renderPhoto = ({ item }: { item: IPhoto }) => (
        width: "100%",
        height: (deviceWidth / item.imageWidth) * item.imageHeight,

  return (
      keyExtractor={(photo) =>}

Here you can see that we've wrapped the

component with an
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. 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

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
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

file. It should look like this.

// 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

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
API from React Native to get the device's width and should look like this.

// 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.


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 in this series, 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. 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.

The author, Jason Merino, with sun glasses and a hat

Jason Merino 💻 🚀

Software engineer, TypeScript enthusiast, avid gardener, all around family man, Franciscan at heart, celiac, aphantasiac. I enjoy nature and a good technical manual.

Follow me on Twitter and checkout my code on Github!