Тёмный

Fetching an API (Simple GET Request) with Loading Spinner in React Native App 

MissCoding
Подписаться 8 тыс.
Просмотров 27 тыс.
50% 1

Hi everyone!
Today I am going to show you how to make a GET request to an API from a React Native app. I will also show you how to use useEffect to ensure the API is only called on the React component mounting. While the API call is loading we will display an ActivityIndicator on screen to indicate loading and improve user experience.
My code is available on GitHub:
github.com/chelseafarley/Reac...
You’ve clearly come here to learn and a free audible trial allows you to increase your learning potential in situations where you may be hands free like at the gym or on your commute. It allows you to spend more time on theory when you aren’t able to watch a screen, so that you can maximise your screen time to pick up technical skills. Try it for free today:
amzn.to/3ECMsom
// ABOUT ME
My name is Chelsea and I started studying software engineering in 2010. I have been working commercially full time since 2014 and have been in various positions from graduate developer to tech lead to solution architect.
I'm a full stack developer with a lot of experience in C# and Javascript but my passion is for mobile development; specifically native iOS development and cross platform using React Native.
I always have many things on the go and am always trying out a new side hustle and failing at it; perhaps you can learn from my mistakes!
Please like and subscribe if you enjoyed this video and want to see more like it!
Have any suggestions on topics you would like to learn more about? Please suggest them in the comments... I would love to help you out while doing a bit of learning myself!
// PRODUCTS USED
I use the following products in the creation of my videos:
Boya MM1 Microphone - amzn.to/3m6kif7
A reasonable quality and reasonably sturdy but cost effective microphone that can be used by both DSLR cameras, mobile phones and laptops
Canon 18-55mm Lens - amzn.to/3IwscFR
A kit lens but a decent quality lens for beginners getting used to a DSLR
Canon EOS Rebel T7 with 18-55mm Lens - amzn.to/3XZauAL
This is the kit I started with it includes the lens linked above and is a great starter camera.
I love Apple devices... These are the ones I use for my channel content creation:
Apple iPhone 13 - amzn.to/3KAUba4
A good all round phone, good for Apple development and recording videos with enough high quality features but at a cheaper price point than the pro versions.
Apple MacBook Pro - amzn.to/3KxrE5q
A nice portable computer for working from anywhere and perfect for iOS development
Apple iPad Air - amzn.to/3xU2k21
Really easy to use for graphic design if required for logos as part of my app development or editing the videos on the go.
Apple Pencil (2nd Generation) - amzn.to/3EBSwNS
For logo and icon design in Affinity Designer app for iPad
Logitech Folio Keyboard Touch - amzn.to/3XUYBM1
Adds keyboard and touchpad to iPad Air, making it easier to use for writing code/eBooks etc. on the go!
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
//CONTACT:
Please contact me at: hello@tripwiretech.com
//CRAVING MORE:
You can find links to all my different sites and social media over on Linktree: linktr.ee/misscoding

Наука

Опубликовано:

 

22 май 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 16   
@KT-ut9zg
@KT-ut9zg Год назад
Fantastic! Simply explained and very straightforward. Thanks!
@jobarmure6169
@jobarmure6169 Год назад
Thx very much for the explanation, very easy to understand
@danyspb9349
@danyspb9349 Год назад
thank you so much it easy to understand
@lylemccalmont4771
@lylemccalmont4771 Год назад
Thank you for this @MissCoding - excellent tutorial for simple API connectivity. I get the same error "undefined is not an object (evaluating 'response["bpi"]') If I remove the line return Bitcoin (GBP): {response["bpi"]["GBP"].rate}; and readd it it works first time but then fails every time after. Any idea what the issue is @MissCoding?
@benjaminflor2355
@benjaminflor2355 Год назад
so good teacher
@Draxen
@Draxen 2 года назад
Yo! Holla from Perth WA! Your accent sounds like you’re from NZ! 🤙 Awesome tutorial 👏 keep up the awesome work
@MissCoding
@MissCoding 2 года назад
Thanks Jordy! Yes I'm from Auckland, NZ :)
@Draxen
@Draxen 2 года назад
@@MissCoding Epiccc! Hope it's not too chilli over there atm! Pretty cold here in WA haha
@faizmasroor
@faizmasroor Год назад
thanks and love from pakistani mobile app developer .
@vlastimilslechta8927
@vlastimilslechta8927 Год назад
Thank u ! 😊
@rkshanigaming3434
@rkshanigaming3434 2 года назад
Lovely its really helpfull for me...❤❤
@MissCoding
@MissCoding 2 года назад
Thank you! If you want to see how to make different types of api requests eg put, post and delete… I have recently uploaded a video covering these!
@kashif2309
@kashif2309 2 года назад
I'm getting an error saying "undefined is not an object (evaluating 'response["bpi"]')
@anilokcuoglu
@anilokcuoglu Год назад
i get the same error can you handled this ?
@christopherquarshie8258
@christopherquarshie8258 Год назад
Same error any solution?
@mehdimv4808
@mehdimv4808 Год назад
​@@christopherquarshie8258 First cut the "return Bitcoin (USD): {response["bpi"]["USD"].rate};return Bitcoin (USD): {response["bpi"]["USD"].rate};" and save so the app runs successfully one time, then paste it and save again and it works for some reason!
Далее
Rose Burrito #shorts
00:35
Просмотров 5 млн
АНДЖИЛИША в платье 😍
00:27
Просмотров 601 тыс.
Fetching Data in React - Complete Tutorial
29:10
Просмотров 87 тыс.
React Native Login with JWT Auth Context
24:59
Просмотров 48 тыс.
Asyncstorage React Native | Async Storage Tutorial
14:19
React Native Tutorial - 70 - POST Request
7:23
Просмотров 9 тыс.
What’s the Best React Native Storage Option? 🧐
12:53
Make API Call to API Server with Axios in React Native
11:43
сюрприз
1:00
Просмотров 1,3 млн
iPhone 12 socket cleaning #fixit
0:30
Просмотров 37 млн
solve bubbling fan issue
0:24
Просмотров 2,6 млн