- 26
- 1 386 837
Made With Matt
Canada
Приєднався 3 лис 2020
Welcome to my channel, where I teach Figma and React Native to help you build your dream apps. 🚀
My goal is to share simple educational content that will help you become a better React Native developer.
The best way to learn is by doing. That's why most of my videos consist of building apps from scratch.
Be sure to subscribe!
My goal is to share simple educational content that will help you become a better React Native developer.
The best way to learn is by doing. That's why most of my videos consist of building apps from scratch.
Be sure to subscribe!
React Native Authentication with Firebase and Expo in 27 minutes
Learn to use Firebase with Expo by building a simple authentication flow in 27 minutes. In this tutorial, we’ll be using Expo, Firebase, and React Navigation. The app is kept very simple for the purpose of helping you understand the basics of Firebase, and giving you the ability to use this code in your own projects.
✅ WHAT YOU’LL LEARN
• Using Expo to build a react native app
• Using React Navigation, more specifically a Stack Navigator
• Styling components
• Using Firebase authentication to register, login, and sign out users from your app
💻 CODE
Github: github.com/mattfrances/FirebaseExpoAuthentication
👇 SOCIALS
Twitter: madewithmatt
Discord: discord.gg/EVXqnGdWtz
UA-cam: ua-cam.com/users/MadeWithMatt
💰SUPPORT THE CHANNEL
Donate: www.buymeacoffee.com/madewithmatt
⏱ TIMESTAMPS
00:00 - What we’ll be building
01:03 - Technology used
01:16 - Project setup
03:16 - Stack navigator
05:50 - Login UI
13:46 - Login state
15:00 - Firebase project setup
17:30 - Firebase handle sign up
19:35 - Firebase handle login
20:31 - Firebase user auth listener
22:48 - Home UI
24:14 - Show logged in user’s email
25:00 - Firebase handle sign out
26:44 - DONE 🎉
✅ WHAT YOU’LL LEARN
• Using Expo to build a react native app
• Using React Navigation, more specifically a Stack Navigator
• Styling components
• Using Firebase authentication to register, login, and sign out users from your app
💻 CODE
Github: github.com/mattfrances/FirebaseExpoAuthentication
👇 SOCIALS
Twitter: madewithmatt
Discord: discord.gg/EVXqnGdWtz
UA-cam: ua-cam.com/users/MadeWithMatt
💰SUPPORT THE CHANNEL
Donate: www.buymeacoffee.com/madewithmatt
⏱ TIMESTAMPS
00:00 - What we’ll be building
01:03 - Technology used
01:16 - Project setup
03:16 - Stack navigator
05:50 - Login UI
13:46 - Login state
15:00 - Firebase project setup
17:30 - Firebase handle sign up
19:35 - Firebase handle login
20:31 - Firebase user auth listener
22:48 - Home UI
24:14 - Show logged in user’s email
25:00 - Firebase handle sign out
26:44 - DONE 🎉
Переглядів: 262 506
Відео
Build a Crypto Price Tracker App with REACT NATIVE (API, Axios, Charts) | Part 3
Переглядів 12 тис.3 роки тому
Coinbase Crypto Price Tracker Series - Turning our Figma design into a React Native app! What you’ll learn: using the coin gecko API, adding API data to a FlatList, debugging a react native app, using react-native-animated-charts, and much more! Link to Design video - TO ADD Link to Part 1 - ua-cam.com/video/PJkQIYWxjH4/v-deo.html Link to Part 2 - ua-cam.com/video/IJQow77vvys/v-deo.html Link to...
Build a Crypto Price Tracker App with REACT NATIVE (Bottom Sheet, Charts, Styling) | Part 2
Переглядів 16 тис.3 роки тому
Crypto Price Tracker App - Turning our Figma design into a React Native app! What you’ll learn: using react-native-bottom-sheet to create a Bottom Sheet, using react-native-animated-charts to create a React Native Chart, styling React Native components, and much more! Link to Design video - ua-cam.com/video/PJkQIYWxjH4/v-deo.html Link to Part 1 - ua-cam.com/video/PJkQIYWxjH4/v-deo.html Link to ...
Build a Crypto Price Tracker App with REACT NATIVE (Expo, FlatList, Components) | Part 1
Переглядів 20 тис.3 роки тому
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 - ua-cam.com/video/PJkQIYWxjH4/v-deo.html Link to Part 2 - ua-cam.com/video/IJQow77vvys/v-deo.html Link to Part ...
Design a Crypto Price Tracker App - Figma Tutorial
Переглядів 6 тис.3 роки тому
Learn to use Figma by building a Cryptocurrency Price Tracker App. What you’ll learn: styling in Figma, creating reusable components in Figma, prototyping Figma designs, and more. Stay tuned to see this design turned into React Native! Link to Figma design - www.figma.com/file/4HGBxAN7ETvEAALTMoULrL/Crypto-price-tracker?node-id=3:6 ❤️ Thanks for watching 👍 If you liked this video, be sure to gi...
Photo Sharing App UI - Part 4 (Bottom Sheet)
Переглядів 3,7 тис.3 роки тому
This is the last video in the Photo Sharing App UI Series - where we turn our Figma design into a React Native app! What you’ll learn: using a FlatList with columns to create an image gallery, passing props to react native components, building reusable components, styling react native Images and more! Link to Design video - ua-cam.com/video/By0ydHGSJ64/v-deo.html Link to Part 1 - ua-cam.com/vid...
Photo Sharing App UI - Part 3 (Shared Album Page)
Переглядів 2,3 тис.3 роки тому
This is the third video in the Photo Sharing App UI Series - where we turn our Figma design into a React Native app! What you’ll learn: using a FlatList with columns to create an image gallery, passing props to react native components, building reusable components, styling react native Images and more! Link to Design video - ua-cam.com/video/By0ydHGSJ64/v-deo.html Link to Part 1 - ua-cam.com/vi...
Photo Sharing App UI - Part 2 (Album Page)
Переглядів 4,1 тис.3 роки тому
This is the second video in the Photo Sharing App UI Series - where we turn our Figma design into a React Native app! What you’ll learn: cloning a project from GitHub, starting an expo project, downloading project dependencies, using a ScrollView, mapping over data with javascript, creating reusable React Native components, styling react native components, navigating between screens using react...
Photo Sharing App UI - Part 1 (Project Setup)
Переглядів 6 тис.3 роки тому
This is the first video in the Photo Sharing App UI Series - where we turn our Figma design into a React Native app! What you’ll learn: using expo to create a react native app, setting up react navigation (native), using a stack navigator and much more! Link to Design video - ua-cam.com/video/By0ydHGSJ64/v-deo.html Link to Part 2 - COMING SOON Link to Part 3 - COMING SOON Link to Part 4 - COMIN...
Photo Sharing App Design - Figma Tutorial
Переглядів 7 тис.3 роки тому
Learn how to use Figma by building a simple Photo Sharing App UI. What you’ll learn: creating reusable components in Figma, using Figma’s Unsplash plugin to add images to shapes effortlessly, prototyping Figma designs, creating avatars in Figma, creating a design system in Figma and more. Stay tuned to see this design turned into React Native! Link to Figma design - www.figma.com/file/jKrTKKXtP...
👉 Build your first React Native app - Todo List Tutorial Part 2
Переглядів 165 тис.3 роки тому
In this second video of the Todo List React Native tutorial series, you’ll learn: state management in react native, adding items to state, removing items from state, dealing with user input, TextInput component, KeyboardAvoidingView component and more! Link to source code - github.com/mattfrances/simpleReactNativeTodoList Link to Figma design - www.figma.com/file/ndTNp9FBR5s2KYsJsKPuyg/React-Na...
👉 Build your first React Native app - Todo List Tutorial Part 1
Переглядів 507 тис.3 роки тому
In this first video of the Todo List React Native tutorial series, you’ll learn: layouts using react native, creating reusable components, passing props to custom components, using Expo to run your react native app, styling react native components and more! Link to source code - github.com/mattfrances/simpleReactNativeTodoList Link to Figma design - www.figma.com/file/ndTNp9FBR5s2KYsJsKPuyg/Rea...
Travel App UI Part 3 - Figma to React Native
Переглядів 10 тис.4 роки тому
This is the third and final video in the Travel App UI Series - where we turn Figma designs into React Native apps! What you’ll learn: Layouts using react native, Navigation between screens in react native, Passing data between screens in react native, Using the ImageBackground component, Flexbox for styling, Styling various react native components and more! Link to source code - github.com/mat...
Travel App UI Part 2 - Figma to React Native
Переглядів 13 тис.4 роки тому
This is the second video in the Travel App UI Series - where we turn Figma designs into React Native apps! What you’ll learn: Creating a header in react native, Using the FlatList component, Using the BackgroundImage component, Adding different sections and titles to a react native page, Styling react native components, Implementing a ScrollView and more! Link to source code - github.com/mattfr...
Travel App UI Part 1 - Figma to React Native
Переглядів 34 тис.4 роки тому
Travel App UI Part 1 - Figma to React Native
Onboard App UI Part 3 - Figma to React Native
Переглядів 4,4 тис.4 роки тому
Onboard App UI Part 3 - Figma to React Native
Onboard App UI Part 2 - Figma to React Native
Переглядів 11 тис.4 роки тому
Onboard App UI Part 2 - Figma to React Native
Onboard App UI Part 1 - Figma to React Native
Переглядів 13 тис.4 роки тому
Onboard App UI Part 1 - Figma to React Native
Designing Instagram in 10 Minutes with Figma.. Can it be done??
Переглядів 57 тис.4 роки тому
Designing Instagram in 10 Minutes with Figma.. Can it be done??
Food App UI Part 3 - Figma to React Native
Переглядів 22 тис.4 роки тому
Food App UI Part 3 - Figma to React Native
Food App UI Part 2 - Figma to React Native
Переглядів 57 тис.4 роки тому
Food App UI Part 2 - Figma to React Native
Food App UI Part 1 - Figma to React Native
Переглядів 105 тис.4 роки тому
Food App UI Part 1 - Figma to React Native
Social Travel App Design - Speed Design with Figma
Переглядів 1 тис.4 роки тому
Social Travel App Design - Speed Design with Figma
I challenge you to design Adobe Photoshop in 15mins
You forgot the status bar
Why u r using the web app config? Cant u add android or ios app and use google signin ?
Pls how can i download this app on my phone to use
Thank you so much Matt
It was just what I needed ! Best tutorial to get started in React-Native... Thank you Soo much .... Keep them coming ....
Hi i have a question. Can we use the template to your other projects also? Like the Food app
thank you so much matt u got a new subsciber !
The best one so far. I struggled so much. Its 21-Oct-2024. Just change the import statement in firebase.js to import * as firebase from "firebase/compat"; and it will work perfectly. My node version is 20.18 and firebase version is 10.14.1, expo is 51.0.8, react is 18.2.0
This was a easy to follow tutorial. Bro you're doing a great job! :)
great stuff!
highly appreciate your attempt.your explanation is so smoothy. therefore we can get points so easily. thank you so much and need more videos about figma user interfaces creation.
Matt, I noticed that when I used npx react-native link, the files did not link. I also tried npx react-native-assets and npx react-native-assets link but none of them worked. I used React Native for my project, not Expo, so I'm not sure what's going on. Could you help? Thanks for your time and the video (it was great!)
What extensions do you use for that beautiful folder hover animation? Would love to have that in VS Code myself!
Amazing content! I ran into an 'uncaught error' a mismatch between JavaScript part and native part of Reanimated (3.15.0 vs 3.10.1) and I am currently stuck in the tutorial.
Really easy-to-follow tutorial, enjoyed learning.
This is i credible!
I had to make a few changes due to updates for firebase but otherwise this was the catalyst that got me through a 3day headache of establishing auth. Thanks!
i changed the import * as firebase from firebase to get the specific packages I needed: auth, app, firestore
I'm pleased to have found this tutorial after a month of searching-it's concise, clear, and straightforward, with no unnecessary jargon or complexity. ❤❤❤❤❤
Great tutorial, thank you! Make it really easy to follow and implement. Especially, having unsplash and iconify plugins. Would ask for an implementation of a marketplace screens for some services.
Hello guys, if you are watching this video in 2024 and version of your firebase is 10+ you may have encountered errors such as "unable to resolve firebase" or "cannot read length" you should change your import in firebase.js to import * as firebase from "firebase/compat"; No need to change anything else in the code. This worked for me so I hope it helps you as well.
i just started developping damn! this is good
Thanks mat this tutorial is very helpfull
Thanks matt
Wait, now I’m really confused lol your videos great, but ru basically using figma for a template? Or is it easier to integrate in vs?
I’m confused with one thing, do you set each layer for each hour/day/and month seperate?
Your tutorials are super helpful, probably most helpful among every other UI/React native tutorial playlist on YT
How can i launch the application
it is not scrollable ? how can i do it should i use scrollView or flatList
How to add video in figma
what a video
How to post your design on Instagram
I did the instructions step by step, currently firebase version "firebase": "^10.12.3", something has changed leading to the above error The error is that it cannot be used directly .auth.createUserWithEmailAndPassword(email, password)
How can I get that icons?
thank you very much dude
Thank you so much for this beginner way like really appreciate it.
if i relaunch the app i get logout please fix
i suggest also you start using nativewind css library for the css
I LOVE YOU
Nice, short and straight to the point video. Thank you. No bs, no explanation, straight diving into the code and the design, - as it should be! Also kudos for showing how to use Figma tool. Efficient Figma use + React Native = turbo speed in development! Thanks
very clear tutorial, thanks
I did all the steps that you mentioned but I'm getting an error 'Unable to resolve "firebase" from "firebase.js"' when I try to test the sign up functionality. I'm using the firebase version 10.11.1, can you please suggest how I can fix this?
you need to download and apply react native first
Can you please tell me how? I'm not really sure. It throws an error when I apply the CLI commands he says to use. But that's probably because I haven't installed React Native yet.
tnx
What is the name of the icon plugin?
clear and concise. thanks! will be checking out more of your videos! subscribed :)
On "Get started", can i click "Web" for a database in my app? Or i need first iOS and Android?
Well done, Professor
Clean video
hi. for some reason, the big image doesn't display when using on an android emulator