Fetching Data in React Native

How to fetch data, using lifecycle hooks in react-native.

“black Android smartphone lying on gray surface” by Matam Jaswanth on Unsplash

API we are gonna be working with?

We are gonna use pokemon’s api to fetch data and have a method that renders each item. Then it would render a FlatList component from react-native which will improve performance, and lessen the memory footprint of our list in our application. Then we will use react-navigation so when you click on each item it will take you a separate screen for each pokemon. We will use fetch api to fetch pokemon’s data.

Here is the pokemon api main page.

pokéapi - The Pokemon RESTful API

To enable react-native init to work, make sure you set it up for native code, NOT CREATE REACT NATIVE APP.

Getting Started · React Native

Then create your app.

npx react-native init pokemonApiApp
OR 
react-native init pokemon-api-app

Then do react-native run-ios or run-android whatever one you should prefer and wait for it bundle to prevent having issues.

Now open the project in it your favorite text editor, and let’ s start coding!.

Let first create a components folder. Create PokeList, PokeCard, Pokemon Folder within with each having a index.js for it’s functionality and styles.js for it’s styling.

mkdir components
cd components
mkdir PokeList PokeCard Pokemon
cd PokeList
touch index.js styles.js
cd ..
cd PokeCard 
touch index.js styles.js
cd ..
cd Pokemon
touch index.js styles.js

Now let’s quickly anaylze App.js before adding or deleting anything to it.

First lets look at the imports. We are importing our UI from react-native instead of using html. Why?

Well the difference between React and React-Native is that React is a library, while React-Native is a framework. Mobile App Development and Web Development are two different worlds. Due to fact that you have worry about optimizing the size of app, memory footprint, and load startup time, etc. Then we have our UI, and stylesheet(that we will go over later in the tutorial) that is imported from react-native.

Then just like any other class component we have access to life-cycle methods. Like render.

Now lets define our App.js delete the App Component in the file except the styles variable. Import a PokeList component to have it render on page. Then we will we define our component in which we will make it stateless, and let it just return UI.

Now let’s define our PokeList class component which will be responsible for retrieving pokemon.

We are gonna use PureComponent for shallow comparisons of props and state which is also from React, and use instead of Component.

Here is documentation about PureComponent.

React Top-Level API - React

So We will go to our PokeList/index.js file where we will import PureComponent and React from react. Then import the UI elements for our list from react-native. Which will be:

TouchableOpacity ← A div that is clickable similar to a button.

FlatList ← Use to render lists.

View ← div for each list item

Text ←Span or text for output name of pokemon.

Image ← Image of the poke icon.

ActivityIndicator ← placeholder for retrieving data.

Then we are gonna define our component. We will have state set to an empty array of called poke-list, and loading boolean which indicate to display the component or not.

Now we will in our componentDidMount() return all the pokemon, using fetch and async and await making our componentDidMount customizable and asynchronous in which the order it takes when executing our code.Then define your renderItem method for the FlatList renderItem prop which will be how it renders each individual item.

Then we will render the list, with a data prop which would be the array in our state, renderItem which is a callback of rendering each Item, in this case our method, and a key extractor for make each item unique in the virtual dom.

PokeList component

Now it should render the list in our scroll view. Now let’s define our styles for this component. Which will be a StyleSheet which will provide a css abstraction or styles that are similar to css. They are couple of differences.

Default: display: flex, flexDirection: column. (NOTE: You can’t use display for styling in react-native, there is no grid,.)

Define styles for PokeList.

Styles for your UI.

Now our PokeList is complete, but not yet. Let refactor our PokeList renderItem method by defining our PokeCard component, by making it stateless, and let it render UI for each item of the PokeList. So just cut and paste the ui from the renderItem method, and into our PokeCard component. Then replace the UI with the PokeCard component in the renderItem method after you import it.

Define your PokeCard component

Import your PokeCard component and render your component.

Define your styles for the PokeCard component.

Define the styles for your PokeCard component.

Result of define your pokecard component.

Now let’s define your Pokemon component that will render each individual poke information, but in this case we will just render the name passed in via props.

Define your Pokemon component for displaying data.

And define your styles.

Define your styles for your Pokemon component.

But we can’t see it. Lets define our routing.

Now we will define our screens which we’ll use react-navigation for which is recommended by the creators of react-native(Facebook). We will use the createStackNavigator method which will create a stack navigator. Each stack will contain screen, and provide a initialRouteName(our Home screen), which will be assign to the specified screen define in first argument.

But first define our Home Screen which will be our initialRoute or our initialScreen. It would be a class component since we would need access to navigation props to navigate out of the page.

So would need to define our navigationOptions, and we would need it to be a function that returns a object with options for the navigation bar which would be headerRight or right of the header that navigate to pokelist

Define you Home Class Component

Then we will define our styles.

Define styles for your HomeScreen.

Go to our app.js where we will just define the Stack and return it instead of the UI. We will delete the styles object, and the comments at the top. Define a variable called RootStack using createStackNavigator with a object, with each property being a name of screen, and it assign to a object to screen property set to component.

We will have 3 screens

Home which will be set to the Home component.

PokeList which will be set to the PokeList component.

Pokemon which will be set to the Pokemon component.

Then pass a second parameter which will have a property called initialRouteName which will set the Home the name of Home screen. Then return RootStack.

Update your app component with our Routes define in a Stack Navigator.

Now your component should return your Home screen.

Pokemon Home Scrren

We will update the PokeList component which will have navigationOptions, and just set the title key to the PokeList, which will appear on the center of the navigation bar. We will then delete our renderItem method. Then we will use the navigation navigate method which will take the Screen it is navigating to, and optionally pass params in a form of a object which will define in our PokeCard component.

Here is our updated PokeList component.

Update your PokeList component to have it configurable to react-navigation.

Now update your PokeCard component.

Update your PokeCard component configurable with react-navigation

Now when we click on our listItem we should see our Pokemon component.

Great we built our a simple react-native app fetching data, enabled routing and other features.

Follow me on medium, instagram and linkedin.

Instagram:

https://www.instagram.com/alooshie_97/

Linkedin:

https://www.linkedin.com/in/ali-alhaddad/

Here is my github for reference and happy coding!

AliA1997/react-native-pokemonApiApp