Build a Crypto Price Tracker App with REACT NATIVE (Expo, FlatList, Components) | Part 1

Crypto Price Tracker App - Turning our Figma design into a React Native app! What you’ll learn: using expo to create a react native app, using FlatList to create react native lists, creating reusable components, adding assets to a react native app, and much more!
Link to Design video - • Design a Crypto Price ...
Link to Part 2 - • Build a Crypto Price T...
Link to Part 3 - • Build a Crypto Price T...
Link to Figma design - www.figma.com/file/4HGBxAN7ET...
Link to code on GitHub - github.com/mattfrances/Crypto...
❤️ Thanks for watching
👍 If you liked this video, be sure to give it a thumbs up
👊 Want to see more of this? Smash that subscribe button
📢 Let me know in the comments what you'd like to learn!
Follow me:
Twitter - / madewithmatt
KZbin - kzbin.info...
What we’ll be doing: (0:00)
Create Expo project: (1:10)
Markets title: (3:00)
Divider: (4:57)
Coin list item: (6:34)
Adding sample data: (17:24)
Coin list item text formatting: (19:10)
FlatList: (21:50)
DONE 🎉: (25:04)

[@JerrysTechCorner]

Really love the way how u explained! Everything was clear and understandable

[@itss_juno]

This is such an incredible tutorial. I love how you showed figma and the basics so that anyone wanting to make similar projects in the future knows how to make their own designs. Its a shame this doesnt have as much attention as it should. Keep it up man love the work!

[@johanthulin8850]

Really awesome work man! Just found you on the explore page and I'm loving your content. Superb teaching style and easy to follow. Just a tiny tiny bit of suggestion: can you please zoom in a bit when you are in VSCode? It's really hard sometimes to follow along when everything is so small. Maybe I'm just old... :) I really like the concept of you going from your own design and then implementing it. Something I haven't seen before. Keep up the good work!

[@kypiseth5435]

Hi matt, I do really love your contents. I have watched all of your videos and leant a lot. Cant thank you enough. I am looking forward the next content related to real time map navigation.

[@katehuang4314]

Your video is so helpful! Thank you!

[@souravdutta2108]

Hey Matt !! Glad to see you again...I was really excited about your video... And now we have an API call scenario as well Keep it up, brother!!

[@MadeWithMatt]

Thanks so much Sourav! I'm glad to see you excited, I'm hoping lots of people will learn lots from this series especially when it comes to using APIs in React Native 🙌

[@williamreiudarbe7612]

Will watch all your react native videos. Im learning react and knowledge in react and css helps me understand better

[@AdityaGupta-cu4gh]

I am recently learn how to make todolost using expo and now this video come up you are awesome keep doing this.

[@withchloe_]

Such an amazing videos. I only just came across your content and I wish you still made more!

[@kasje]

More tutorials please man these are gold!!

[@shankarbalasubramaniam1977]

Great UI Design and great explanation. I'm gonna follow all your videos since I'm a beginner in React Native development. Hoping to see more complex designs and a large multi-screen app tutorial.

[@MadeWithMatt]

Awesome! Thanks for watching and for the feedback, more content to come 🚀

[@prodesigntz7776]

i suggest also you start using nativewind css library for the css

[@joecolas]

thank you so much for this tutorial

[@edgarslife7261]

Thank you for your video!

[@MadeWithMatt]

Thanks for watching 🤩

[@riturajranjan2072]

you're videos are awesome

[@MadeWithMatt]

Thanks Rituraj! Appreciate the comment 😁

[@DucatiSydney]

This is great!

[@MadeWithMatt]

Thanks Hosanna 😁

[@DucatiSydney]

@@MadeWithMatt Thanks For the video Matt, great work, God bless!

[@Saurabhkumar-ps5zp]

Thank you Matt

[@MadeWithMatt]

Thanks for watching!

[@abaidrehman1417]

simply osm

[@JoshWatkins17]

Great tutorial Matt, thanks! Having an issue with the formatting of the price though - I've set my code up exactly as you do in the video and while it's not throwing any issues when I build, it just doesn't show the comma in the price. Any ideas?

[@aregmi450]

i am having the same problem reply if you debug the problem

[@abdelkadertalbi7063]

can we use react-native-responsive-screens to keep the designe responsiive for all devices

[@ezrakeeps]

I literally feel like shouting your channel to the whole world Am learning and this is good content Just a random video idea A drag and drop sort of game or apo with react native

[@MadeWithMatt]

I really appreciate that thank you soooo much 🙌 That's such a great idea, I've written it down to look into more!

[@jadriantan9917]

Any tips for someone trying to learn react native? Perhaps steps that you'd take if you had to do it all over again? 10/10 tutorial by the way, thank you!

[@MadeWithMatt]

Thanks for the comment! Yeah definitely got some tips. I learned by starting on youtube and learning to build react native UIs. After following a few of those videos, I started getting the hang of it and moved on to re-creating UIs in react native that I found on Dribbble.com. This was a great way to learn on my own and problem solve while building projects. Once I got better at that, I started learning about how to integrate APIs into my projects and began building out any idea that came to mind that wouldn't take too long. I'd recommend something similar for you: Start with the basics of how react native UIs work, then slowly switch gears by learning how APIs work and eventually how backends work to make a full stack app. Most importantly though, start small so you can make constant progress and build projects!

[@jadriantan9917]

@@MadeWithMatt Thank you so much for the golden tips, have a great day!

[@nigelpallatt]

6:45 thanks for NOT telling us the extension for the snippet! It's called => ES7+ React/Redux/React-Native snippets make sure to enable it.

[@kiree3869]

Helo, nice tutorial., im folowig but im stuck at SampleData because file is not the same, like you use it in video.

[@damianwasilewski6928]

Do you have any idea why I can't scroll like you did? I try to do it on Android phone

[@RahulPatel-ui1hi]

How do you run both Expo and ios simulator for the same project? Like, it can be either "expo init" or "npx react-native init" for a project, right?

[@MadeWithMatt]

Great question! Yes, you can use either expo, or react-native init. Both will create a react native project, although doing it with expo makes it easier to get up and running quickly since they have a very developer friendly experience. To then run it on the iOS simulator, using expo you'll type in "i" to the terminal running expo, and for react-native you'll say "react-native run-ios"

[@bashir5991]

Hey Matt! Any ideas on how to handle the "VirtualizedList: You have a large list that is slow to update..." warning?

[@MadeWithMatt]

Hmm that's a good question and I'm not entirely sure. How many coins are you fetching from the API? If you leave it as unlimited, it might fetch 100+ which would give that warning. I believe there are ways to optimize lists to make that warning go away, but I don't have strong knowledge on that just yet unfortunately

[@yendasateesh2878]

Is this work for androif

[@j.s3953]

my logo image does not display, even after I set the the width and height. Any idea why? code is identical btw

[@j.s3953]

got it working. great tutorial!

[@freedonzennar7547]

on android via scan qr code in expo go .. work like charm. but at browser or adb ..not work .

[@MadeWithMatt]

Do you have any error messages that could help me further understand your issue?

[@AtifKhan-cm8qv]

Please make an ecommerce on react native or maybe an rider/driver/uber app! thanks

[@MadeWithMatt]

That's a great idea, thanks Atif!

[@freedonzennar7547]

cant be done with expo ..... webpack problem

[@MadeWithMatt]

Do you have more details about the error?

[@ashisbhowmik348]

Please share the Images link

[@MadeWithMatt]

All the images can be found in the Figma file linked! www.figma.com/file/4HGBxAN7ETvEAALTMoULrL/Crypto-price-tracker?node-id=3%3A6

[@shaurtv2856]

Please update the links in the discription

[@MadeWithMatt]

Thanks for letting me know, I had forgotten about that. They've been updated!

[@didami7099]

13:23

[@pierre8851]

Hey

[@MiladVlog]

Hey what's up man i problem in TypeError: StyleSheet.create is not a function Module../components/ListItem.js C:/Users/milad/CryptoMarket/components/ListItem.js:30 27 | 28 | ) 29 | } > 30 | const styles = StyleSheet.create({ 31 | itemWrapper: { 32 | paddingHorizontl: 16, 33 | marginTop: 24,