Made With Matt
Made With Matt
  • Видео 26
  • Просмотров 1 348 567
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
RUclips: ruclips...
Просмотров: 257 711

Видео

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 - ruclips.net/video/PJkQIYWxjH4/видео.html Link to Part 2 - ruclips.net/video/IJQow77vvys/видео.html Link ...
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 - ruclips.net/video/PJkQIYWxjH4/видео.html Link to Part 1 - ruclips.net/video/PJkQIYWxjH4/видео.html Link t...
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 - ruclips.net/video/PJkQIYWxjH4/видео.html Link to Part 2 - ruclips.net/video/IJQow77vvys/видео.html Link to Par...
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 - ruclips.net/video/By0ydHGSJ64/видео.html Link to Part 1 - ruclips.net/v...
Photo Sharing App UI - Part 3 (Shared Album Page)
Просмотров 2,2 тыс.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 - ruclips.net/video/By0ydHGSJ64/видео.html Link to Part 1 - ruclips.net/...
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 - ruclips.net/video/By0ydHGSJ64/видео.html Link to Part 2 - COMING SOON Link to Part 3 - COMING SOON Link to Part 4 - COMI...
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
Просмотров 160 тыс.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
Просмотров 489 тыс.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 тыс.3 года назад
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 тыс.3 года назад
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
Просмотров 33 тыс.3 года назад
Travel App UI Part 1 - Figma to React Native
Travel App Design - Figma Tutorial
Просмотров 12 тыс.3 года назад
Travel App Design - Figma Tutorial
Onboard App UI Part 3 - Figma to React Native
Просмотров 4,3 тыс.3 года назад
Onboard App UI Part 3 - Figma to React Native
Onboard App UI Part 2 - Figma to React Native
Просмотров 11 тыс.3 года назад
Onboard App UI Part 2 - Figma to React Native
Onboard App UI Part 1 - Figma to React Native
Просмотров 13 тыс.3 года назад
Onboard App UI Part 1 - Figma to React Native
Onboard UI Design - Figma Tutorial
Просмотров 7 тыс.3 года назад
Onboard UI Design - Figma Tutorial
Designing Instagram in 10 Minutes with Figma.. Can it be done??
Просмотров 52 тыс.3 года назад
Designing Instagram in 10 Minutes with Figma.. Can it be done??
Food App UI Part 3 - Figma to React Native
Просмотров 22 тыс.3 года назад
Food App UI Part 3 - Figma to React Native
Food App UI Part 2 - Figma to React Native
Просмотров 57 тыс.3 года назад
Food App UI Part 2 - Figma to React Native
Food App UI Part 1 - Figma to React Native
Просмотров 103 тыс.3 года назад
Food App UI Part 1 - Figma to React Native
Social Travel App Design - Speed Design with Figma
Просмотров 1 тыс.3 года назад
Social Travel App Design - Speed Design with Figma
Food App Design - Figma Tutorial
Просмотров 27 тыс.3 года назад
Food App Design - Figma Tutorial

Комментарии

  • @Broductivity-YT
    @Broductivity-YT 13 дней назад

    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!)

  • @Broductivity-YT
    @Broductivity-YT 13 дней назад

    What extensions do you use for that beautiful folder hover animation? Would love to have that in VS Code myself!

  • @adamwistoft1657
    @adamwistoft1657 18 дней назад

    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.

  • @dhruvsolanki4473
    @dhruvsolanki4473 18 дней назад

    Really easy-to-follow tutorial, enjoyed learning.

  • @Antassium
    @Antassium 19 дней назад

    This is i credible!

  • @justin7532
    @justin7532 24 дня назад

    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!

    • @justin7532
      @justin7532 24 дня назад

      i changed the import * as firebase from firebase to get the specific packages I needed: auth, app, firestore

  • @matart7199
    @matart7199 28 дней назад

    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. ❤❤❤❤❤

  • @simasjanusas1766
    @simasjanusas1766 Месяц назад

    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.

  • @shortv1dsreact
    @shortv1dsreact Месяц назад

    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.

  • @GenjisaburoArashikage
    @GenjisaburoArashikage Месяц назад

    i just started developping damn! this is good

  • @dev_insights783
    @dev_insights783 Месяц назад

    Thanks mat this tutorial is very helpfull

  • @qhaleedk1842
    @qhaleedk1842 Месяц назад

    Thanks matt

  • @stasvic
    @stasvic Месяц назад

    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?

  • @stasvic
    @stasvic Месяц назад

    I’m confused with one thing, do you set each layer for each hour/day/and month seperate?

  • @maksss7728
    @maksss7728 Месяц назад

    Your tutorials are super helpful, probably most helpful among every other UI/React native tutorial playlist on YT

  • @AliBongo-h3o
    @AliBongo-h3o 2 месяца назад

    How can i launch the application

  • @c4custom490
    @c4custom490 2 месяца назад

    it is not scrollable ? how can i do it should i use scrollView or flatList

  • @uttamtiwari1009
    @uttamtiwari1009 2 месяца назад

    How to add video in figma

  • @lessonsinreels
    @lessonsinreels 2 месяца назад

    what a video

  • @obochafrancis4475
    @obochafrancis4475 2 месяца назад

    How to post your design on Instagram

  • @vothaihung6872
    @vothaihung6872 2 месяца назад

    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)

  • @chick_thoughts
    @chick_thoughts 2 месяца назад

    How can I get that icons?

  • @code_bro6144
    @code_bro6144 2 месяца назад

    thank you very much dude

  • @aanyc.6198
    @aanyc.6198 4 месяца назад

    Thank you so much for this beginner way like really appreciate it.

  • @08_mehuljadhav18
    @08_mehuljadhav18 4 месяца назад

    if i relaunch the app i get logout please fix

  • @prodesigntz7776
    @prodesigntz7776 4 месяца назад

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

  • @santiagourzua2420
    @santiagourzua2420 4 месяца назад

    I LOVE YOU

  • @simasjanusas1766
    @simasjanusas1766 5 месяцев назад

    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

  • @mounirben9370
    @mounirben9370 5 месяцев назад

    very clear tutorial, thanks

  • @RaksRhythm
    @RaksRhythm 5 месяцев назад

    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?

  • @humbertoventura1344
    @humbertoventura1344 5 месяцев назад

    you need to download and apply react native first

    • @Broductivity-YT
      @Broductivity-YT 15 дней назад

      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.

  • @techmus4060
    @techmus4060 5 месяцев назад

    tnx

  • @ChandrasekarBharathi
    @ChandrasekarBharathi 5 месяцев назад

    What is the name of the icon plugin?

  • @mixx-n-match
    @mixx-n-match 5 месяцев назад

    clear and concise. thanks! will be checking out more of your videos! subscribed :)

  • @albertoderio2370
    @albertoderio2370 6 месяцев назад

    On "Get started", can i click "Web" for a database in my app? Or i need first iOS and Android?

  • @williamkakooza4603
    @williamkakooza4603 6 месяцев назад

    Well done, Professor

  • @carlmascarenhas4124
    @carlmascarenhas4124 6 месяцев назад

    Clean video

  • @RahulRahul-pj1fo
    @RahulRahul-pj1fo 6 месяцев назад

    hi. for some reason, the big image doesn't display when using on an android emulator

  • @codestudio497
    @codestudio497 7 месяцев назад

    thank you so much i hope if you can do more for the other stuff that we have to know about react-native like the permissions and other stuff 👍👍👍👍👍👍👍👍

  • @Fathima_Ilmaa
    @Fathima_Ilmaa 7 месяцев назад

    I hunted for many tutorials to build the Firebase integration, and yours was the best. Simple, straightforward, and to the point! Thank you for saving my time🎉

  • @pritamchawdhary988
    @pritamchawdhary988 7 месяцев назад

    do you have different syntax for version 10?

  • @alexandramateus2324
    @alexandramateus2324 7 месяцев назад

    Does someone know how to create a post prototype to share photos in any app? Like a blog or article

  • @hnkatze370
    @hnkatze370 7 месяцев назад

    The better 👌🏻

  • @ffer8404
    @ffer8404 7 месяцев назад

    If your todoList doesn't also scroll down to see the last added tasks, add ScrollView import { ScrollView } from 'react-native' and change View for ScrollView here: <ScrollView style={styles.items}> { taskItems.map((item, index) => { //your code } </ScrollView> And in my personal opinion I think is better if we change onPress for OnLongPress to complete a task TouchableOpacity key={index} onLongPress={() => completeTask(index)}> Finally, we could add a backgrondColor to style: writeTaskWrapper:{ ... backgroundColor: '#E8EAED', ... } Thanks!

  • @ffer8404
    @ffer8404 7 месяцев назад

    2024's code: 00:56 - For Android Developers: <KeyboardAvoidingView keyboardVerticalOffset={-500} behavior="padding" style={styles.writeTaskWrapper}></KeyboardAvoidingView>

  • @yannboyongo4832
    @yannboyongo4832 7 месяцев назад

    thank you for this wonderful 2 videos series, i have just tried and everything worked as expected. thank you and keep it up

  • @viniac.
    @viniac. 7 месяцев назад

    Outstanding!

  • @sunnysingha1154
    @sunnysingha1154 7 месяцев назад

    Wnt more projects like this❤

  • @mauriciosmith6877
    @mauriciosmith6877 7 месяцев назад

    Wheres the autolayout?

  • @shanildpeiris
    @shanildpeiris 7 месяцев назад

    Thankyou soo much ! This was really helpful 💓