fetch

React Native Tutorial - How To Get Data From An API With React Native



Sharing buttons:

guten tag ladies and gentlemen in this

video we're gonna take a look at how to

fetch data from an API with react native

and we will also take a look at how to

display the data inside the actual

application this will work for both iOS

and Android so as you can see I will

recreate a new project using the

creative app command and I've also

started my emulators you can see right

here my Android emulator so if you

haven't done that go ahead and create a

new project and start up your emulator

or your physical phone so let's get

started first we're going to do is we're

going to import the activity indicator

like that let's just reload see that

that works alright yep we got it

included so we're gonna use the activity

indicator yes to show a loading spinning

circle here while the API is loading so

now what we're gonna do is gonna go up

here to the beginning of the app class

I'm going to create a constructor cause

in the props and we're gonna say super

crops and then we're gonna declare two

States so these states state equals with

it's loading which is gonna be a bool to

decide whether or not take a is loading

right now we also gonna set our data

source we can set it to no right now

because it's gonna be empty until we

have fetched the results from the API so

we will be storing the results from the

API in the local state of this component

okay so that's it for this state we got

everything set there that's all for the

constructor now we're going to create a

component did mount method

like that which will be invoked after

the render method and then it will

update the render method to output the

data so we're gonna do now is we're

going to use the react native fetch

method so we're just gonna say we can't

fetch then we're just gonna copy and

paste this example API endpoint which I

got right here it looks like this if you

want to we can take a look at it right

here as you can see it's just a normal

JavaScript object with a title

description and an array of a couple of

the movie objects right here and we're

gonna fetch the movie objects alright

and then we're gonna loop them inside

the application so by default the fetch

method uses the gift method which is

what we're gonna use to get the actual

movies here so what we're gonna do is

we're gonna call this API endpoint I'm

gonna say then what we're gonna do now

is we're gonna take the response from

the API and we're gonna convert it to

JSON object just like that alright next

step we're gonna take the JSON object

which is returned from here so we're

just gonna say response Jason

arrow function so what this does is

first we're getting the data from the

API we're passing in the data right here

in the response and we're converting the

response to JSON object then we take

this JSON object and we're gonna do

something with it right here and what

we're gonna do is we're gonna number one

set it's loading to false because this

means we're not loading anymore since we

have got the data what's gonna set the

data source to the response of the

movies so right here

so we'll simply what we're gonna do is

we're gonna say this said state pausing

an object of the state so it's loading

now it's forced as we get the data and

the data source oops

data source is equal to responses on dot

movies which is the array of movies that

we looked at just a couple of seconds

though all right

so now the reason I'm using the es6

arrow function right here is to not lose

context of this since we're using this

set state and this refers to the class

we're in so the app class all right so

that's why I'm using the es6

arrow function good to know so what

we're gonna do also is we're gonna say

let's say catch error so if you get any

errors in the call let's just say oops

let's just say council of log error yes

so we can see what's going on like that

let's try to real honest it was going on

again error let's see line 27 what's

happening oops I closed step one a

little bit early so remove what I just

put I reload again

yeah that's correct so that's it we're

getting the data from the API with the

fetch method now

said now we're using the get method with

fetch you can pause in second argument

except from this which is an object

which looks like this alright I'm gonna

actually just show you an example how

that would look we're not gonna use it

in this tutorial but is to show you I

got this copy pasted right here so this

is just a fetch example but here we're

using the post method instead of get and

as you can see we're using it as a

second argument right here right so we

first passing in the API URL this is

just an example but you get an ID

and the second argument is the method

which is set to post headers with

accepting content type and then we have

the body so he can pass additional

parameters if you want to send

parameters to an API for example alright

so this is how you do it the post way

and this is how you do it the gateway

which we're gonna be using now so let's

just delete that that's just to give an

example of different ways to use it so

what we're gonna do now is we're gonna

go down here to the render method it's

gonna have a little bit spacing here to

make it easier to read so what we're

gonna do now first is we're gonna say if

this stops tape that is loading so if

we're currently loading we don't want to

return the results from the API because

there are no results yet right so we're

gonna do then is we simply is gonna say

return and let's return a view with a

stein we can get a style dyestuff

container and then let's pause in the

activity indicator right just a loading

circle so you can see something's going

on in the application and let's close

after view like that we can also go

ahead and delete let's see you can

delete everything right here as the

initial code was when you create a very

active project because we don't need it

why not

so let's see we can leave the container

style exactly as it is right here for

now so now if if we're loading let's

return this yes an activity indicator if

we're not loading let's say else let's

return the actual date all right so

that's just that is a bit so what we're

going to do now first of all it's let's

check that this work works and it's

gonna pass a simple text year and turns

loaded so now this should show up

eventually so let's see if it does

yeah so you can see here super quick you

can see the activity indicator followed

by content loaded which is correct so

everything's working correct

logically or what the word is but is

working correct so what we're gonna do

now is we're gonna use a map function

the JavaScript map function to map

everything in the data source so the

state we're setting here with the movies

response right so what we're gonna say

here is let's just create a new let and

then let's called movies and we're gonna

say this does state that data source

stop map and then we're gonna give it

the value the value is the actual item

so the movie then we get the key and in

here let's just say return I new view

I'm gonna give it a key prop which we're

gonna pass in the actual key from here

right now this key is my data required

by react native Gregg native uses the

key property to keep track of which

elements has been updated or removed or

changed right so you will get a warning

if you're not using it so you can use

the key crop then also let's add a style

for this here so let's say we can call

it stats dot item and we'll create it in

just a second

like that and then also that's all in

text component right here like that

inside a text component we want simply

let's say we want the title of the movie

so let's see what we get we get two

movies and then we get the title and

release here so let's say value dot

title which would give us ten the title

of that

moving which is what we want and finally

closed off to view this will return a

new view with a text with the content of

the title of the movie for each index in

the data source state all right so let's

say that and down here let's let's seem

to say movies so this will print out all

the movies but before we print out every

movie let's add some basic styling to

this item so we don't get a warning that

this style doesn't exist so let's just

go down here container and we can say I

turn let's set it flex one fly full

weight and as you can see now we're

actually getting the movies here since I

saved the application and it's out to

updating or after reloading when I'm

saving we're actually getting movies so

that's good we can see everything

working so flex powerful for it full

height and let's say aligned self

stretch I'm using this because you know

the container is set to line items

center so center along the x axis and

along the y axis alright so this means

that the items will be basically pushed

together as small as they can be

horizontally right some setting aligned

self to stretchable which will force

each item to span full width of the

screen okay it's also set on a margin

yes to add a little spacing between the

items and let's say a line item center

and the justify content Santeria Center

text horizontally and vertically

and let's also add a border bottom I

start with the width let's set it to 1

and then also border bottom color let's

set it to light gray so let's say ii ii

ii like that and let's find load reload

the application and see what we got and

we trying to add a route even switch the

idea already set to attribute so let's

see

let's just oh all right

I have no idea what that warning was

about but it is a pair by itself

just updated my emulators I don't know

quite what's going on here yes to get

rid of that warning let's just move

everything up here in a row that might

have been the problem that it was

complaining about so you get everything

here in a row all right

so as you can see now we're getting the

movies and they are displaying in this

very simple list with a border bottom so

if you get any questions you can just

ask at a full-stack discussion forum or

simply write in the comments here so

that's it that's how we used react

native fetch method to get data from an

API