Build a FinTech Clone with React Native (API Routes, Zustand, Tanstack Query, FaceID, Charts, Clerk)

🔐 Try Clerk today: go.clerk.com/tQXLCe8
Join me as I build an epic Fintech Clone with React Native. You'll learn how to do the following in this tutorial:
Key Features:
🌐 Use Expo file-based routing
🔐 Use Clerk for user authentication with OTP
📦 Use state management with Zustand and MMKV
💫 Add drag-and-drop with Reanimated and Gestures
🚀 Use API Routes with Expo Router
✌️ Build performant Charts with Victory Charts
😎 Unlock the app with FaceID and Code
🔀 Dynamically change the App Icon
+ A LOT OF FUN 🚀
LINKS
🔥 Learn React Native FAST: galaxies.dev
🔐 Try Clerk: go.clerk.com/tQXLCe8
🔗 Check out the FinTech Clone: github.com/Galaxies-dev/finte...
#############################
❤️ You can also find me on:
Twitter: / schlimmson
Instagram: / simongrimm_
#############################
00:00 About this clone
01:49 FinTech Clone Overview
06:36 App Setup and Expo Prebuild
16:16 Background Video and Signup Screens
56:58 OTP Auth with Clerk
01:25:13 Expo Router Authentication & Tab Bar
01:32:56 Home Screen with Native Dropdown
01:52:01 Managing State with Zustand and MMKV
02:12:18 Drag and Drop Widgets with Gestures
02:25:51 Custom Header & Tabs with Blur
02:47:03 Crypto Prices with API Routes
03:12:50 Section List with Sticky Header
03:44:24 Victory Chart with Reanimated
04:17:36 Automatically Locking the App
04:31:00 Lock Screen with FaceID
04:58:46 Account Page with Image Upload
05:23:41 Dynamic App Icons
05:32:50 Teardown

[@abderahmanMOUSSAOUI]

Personal Tracker 04/04 - THE END ~ Thanks so much Simon 🙏 04/03 - 3:47:35 04/01 - 2:12:18 03/31 - 2:03:26 03/30 - 1:31:13 03/28 - 1:04:33 03/27 - 0:56:52 03/26 - 0:18:16

[@bradhanks7837]

It’s cool to see these right when they first come out!

[@RicardoValus]

I just started following your channel, thank you for making your classes available!

[@galaxies_dev]

You are very welcome!

[@jak3f]

Amazing video Simon. You single handedly taught me react and expo.

[@galaxies_dev]

Wow that is amazing, thank you so much!

[@uiuxengineer]

Great news, Simon! Will wait for the video

[@4Biddenn]

Bro 2 days back I was thinking to build Revolut Clone and here you built it.

[@galaxies_dev]

I can read minds 👀

[@4Biddenn]

@@galaxies_dev please make video on how to read minds 😄😄😄

[@teminoah2960]

This information is indeed worthwhile. Thanks Simon

[@galaxies_dev]

You are welcome!

[@bayoudev]

I just finished it! Thank you so much

[@galaxies_dev]

You're so welcome!

[@AllAroundFlight]

seems like almost perfect, just need to somehow get a datastorage behind everything. But will look at the video and just get started :)

[@christophermungiria2876]

I discovered your channel a few weeks back and I really enjoy your content. I have a question. How do you get autocomplete on your terminal?

[@uminhtetoo]

Thank you so much for sharing your experience and knowledge, Sir.

[@galaxies_dev]

My pleasure!

[@satanist70]

Саймон, привет, спасибо тебе огромное за твои видео, они действительно очень сильно помогают на практике узнать очень много нового и полезного про React Native! Simon, hello, thank you very much for your videos, they really helpful to know many new and useful things in practice about React Native!

[@ericsonl_]

Thank you for this especially the app icon customizable. Hopefully you can also try to create an home widget using expo

[@galaxies_dev]

Good idea for a future video!

[@KelthozT1]

Awesome video! And also, I love how your VS looks like. Which theme or personalization do you have?

[@galaxies_dev]

I use Shades of Purple!

[@KelthozT1]

@@galaxies_dev Thank you so much! I want to see all your videos!

[@madmaxdev]

This going to be lit🔥

[@leonalex330]

what extension are you using to show the colors from your constants?

[@simielxx]

Hello Simon, please is it possible to use zustand for lock state management. Thank you

[@johnmccants6828]

Can't wait for the API routes with Expo Router!

[@rishabh1S]

Exactly man

[@galaxies_dev]

API routes are 🔥

[@FULLUPE1]

woo Thank you sir , one of the best learning platform ....

[@galaxies_dev]

Glad to hear that you enjoy the content :)

[@FULLUPE1]

@@galaxies_dev pls sir i don't know why OTP not receive .....

[@devjoneslocker]

How about implementing a referral system for the users? Any SDK we can use?

[@camilopimentel7471]

I love your content, really awesome... 🎉

[@galaxies_dev]

Thank you so much 😀

[@AllAroundFlight]

Hey Simon, got another small question. I tried to get Zeego working, seems to do everything correctly except adding in the icons. I am not using Ios rather android, but tried folowing the doku or you made the icon not appear. You have small example there? Btw, do you also have a discord to hang out and maybe ask some questions?

[@anthonycaneke7382]

Wow, thank you!!

[@galaxies_dev]

Happy to share :)

[@shubhamranjan4596]

google hired me after this project ,thanks sir

[@manisharya2138]

Amazing app contains lots of information and use multiple tolls is really awesome. please make a tutorial for e-commerce app which using all this tolls.

[@galaxies_dev]

Noted!

[@tutkuns]

8:45 - How can I get the plugin that has the dropdown list in Terminal?

[@Ted86]

Are you sure the signOut function is working? I might have messed something up in the top _layout file but when i try to signOut with clerks useAuth signOut method, i get a warning, Possible unhandled promise rejection, (id:0): error: No native splash screen registered for given view controller. Call 'SplashScreen.show' for given view controller first. As I understand it the entire file is re rendered when isSigned in updates and since the splash screen is not shown it cannot hide it again and the app crashes

[@josephikinda7174]

Hey Simon Grimm, i'm on windows but i wanted to debug on a iPhone, is threre a solution for prebuild ?

[@iyobosabetty5703]

Sir am so happy to be here

[@galaxies_dev]

Me too!

[@marcosromero5938]

Amazing! I was stucked with Expo until I knew about you. I have a question. What happen with the local storaged transactions if you log in the app with another user? I did a test and I guess everyone logged in can see it, I don't know if I'm doing something wrong or in a real app there is a better way to do all this stuff. Thank you very much!

[@greyshopleskin2315]

I didnt see the whole video, I’m just a curious backend guy but I can guess what happens. Yes, in a real app this would be handled differently. The data would come from a server. You don’t really want your local storage to be the source of truth. And obviously you don’t want to make a request every time you need transaction logs. So you would have 1 api client class that implements some interface (TransactionRepository?) and another one that takes in the constructor that class and uses it to get the data, but it handles caching. When your code uses that class to get data, it checks the time to live of chached data and returns it or invalidates it and makes an API request, chaching the result. The transactions cache should be per user. So for example in a KV store you can prepend username/ to each key. In sqlite you filter by a user column. To be more resilient against developers mistakes, depending on the project it could be a good idea to invalidate cached information (all users).

[@brodyolabarriaga1316]

Hi great video, do you know why my api routes just return the page html?

[@DevJariwala-nd7dx]

can you make an application that can receive the notification if the application is closed or does not have internet

[@abderahmanMOUSSAOUI]

waiting ... why not today, since the tutorial is made

[@MaiAurMikky]

Great video ❤

[@DarkGamer-km1py]

Awesome video! And also, could you do a video tutorial how can we export to .ipa to use it on our Iphone ?

[@galaxies_dev]

Yeah I should work on a general video about building the app

[@AgustinAstronomy]

Why didn't you include isLoaded and segments in that use effect dependency array? ( at 1:28:36 )

[@zlatkoiliev8927]

Hey Simon, I am using the latest version of Expo 51. And when I install zeego and try to run the ios emulator I got the following error: Error: Cannot find native module 'RNIContextMenuView', js engine: hermes Can you please help?

[@ayomidebamigboye1537]

Thank you for video, I noticed your terminal has this path intelligence. May I ask how you made that work? Thanks in advance 🙏

[@galaxies_dev]

That was Fig in the past, they now merged into Amazon Code Whisperer AFAIK!

[@affiliatepaid747]

Thank you for saving me...I am a freelancer...

[@galaxies_dev]

Happy to help!

[@smile-dev]

Hey Simon, not sure it is what you meant about the command but just cd to the directory and "code -r ." you forgot the dot

[@galaxies_dev]

Thanks, will give it a try!

[@adelekeabiodun9991]

you just get a new subscriber bro

[@galaxies_dev]

Thank you so much!

[@bryaniban2678]

what are the alternative for OTP?

[@user-pw9px9pg8w]

I dont even see the video in the screen followed the same code... But if i paste the image link from any website it works.. Why the local video is not visible?? I'm currently doing in android emulator

[@hasantayar586]

can u please make a video that explains how i can fix expo build on ios because that im not using expo to make native projects

[@usmanmarkaz]

is face ID package work properly in Andorid why you don't use Android Emulator

[@mpumuropatrick4288]

Hi sir i tried to follow you step by step but got stuck when I use zustand and mmkv and zeego the errors are ( ERROR Error: react-native-mmkv is not supported in Expo Go! Use EAS (`expo prebuild`) or eject to a bare workflow instead., js engine: hermes ) is for mmkv and the second error is Invariant Violation: requireNativeComponent: "MenuView" was not found in the UIManager help me sir

[@voiciray]

did you try reproducing your issue on the github repo that is in the video comments?

[@umehstanley3140]

how to integarte backend to this and add payment methods

[@mpumuropatrick4288]

thank you sir for sharing amazing skills. I followed the tutorial and I got stuck about code verification I cannot receive the verification code on my phone can you please help me

[@hasantayar586]

can u please explain how i can fix expo build on ios ?

[@AGUNGKAYA]

Sir do you give up on angular/ionic thing?😮😢

[@user-ce7te5vq8o]

Great News, let us see how react-native can compete in Fintech apps compared to other C#, Nodejs and Ionic (Angular). Is it possible to take it into production level in the app store?

[@galaxies_dev]

For sure!

[@gigabit03]

" code . -r " that is the command to open on the current windows in VSCode.

[@galaxies_dev]

Thank you!

[@gigabit03]

@@galaxies_dev Thanks to you for all the good you share

[@ammarhaidar5995]

Great job

[@msv900]

After installing clerk packages my app stopped working and getting a error Error: Cannot find native module 'ExpoApplication', js engine: hermes not sure what do to

[@RoyalDailyTea2024]

Please did you fix this? I'm stuck here

[@noveltunez6546]

Trust me, as soon as you’re done with this app just go apply for any react native job, this is packed full geeez 😰

[@galaxies_dev]

Haha do it!

[@ojas4205]

While doing the widgets in android is anyone getting the engine error. Expected 0 arguments but got 1

[@fullstackcoder1181]

I'm getting "Cannot find native module 'ExpoApplication' " error when I try to run app in dev client. Does anyone know how can I fix it ?

[@zackfine4542]

I'm also getting this

[@rishabh1S]

@@zackfine4542 at what part?

[@anazi]

Face ID and Charts had me hooked

[@galaxies_dev]

Enjoyed that part as well!

[@biomatrix8154]

Can u give Ionic some luvin? Version 8 beta is out.

[@vamsimohanchowdary]

hey, here presentation: 'modal not working in android working in iOS

[@AjaySingh-jz8qx]

Simply Nice😊😊

[@galaxies_dev]

You are welcome!

[@huynhphatat3919]

What about integrating TailwindCSS into project in the next video?

[@galaxies_dev]

Yeah waiting for the next Nativewind release!

[@hasantayar586]

hi dude which version of XCODE are you using?

[@RandyAugustus]

I think the min version is 14.

[@omjagtap3432]

How to start with react native after angular is it necessary to know react js

[@galaxies_dev]

No, I think you can pick up React while learning React Native!

[@favoursatoru]

Things would eventually work out for me. Mind if I take this out of context. Life is a mess right now

[@dramen555]

Have you considered the necessity of featuring your face prominently in videos where the primary focus is on showcasing code? While your presence adds a personal touch, perhaps it might be worth exploring alternative methods to balance this. One approach could involve recording yourself separately and integrating your video into the content during editing, ensuring it complements rather than obstructs any crucial visuals.

[@galaxies_dev]

This is great feedback. I will definitely think about this and see if I can improve my videos that way!

[@greyshopleskin2315]

On the first sentence i thought this was a hate commend, but this is a good feedback comment! :D I hope to see more people like you on yt, good job bro

[@greendsnow]

I like watching his mimics, mustache and blue eyes. No thirst. He is expressive, I enjoy the coding theater. So close up to your face if you're gonna size down the recording screen, please.

[@mugerwaobadiah1621]

awesome, y not use nativewind for styling

[@galaxies_dev]

Maybe next time ;)

[@kineto7899]

How to fix phone number is not receiving sms/otp verification

[@parholikho3862]

well is anybody getting the error message: Android Bundling failed 948ms (C:\Users\user\Desktop\app\Fintech ode_modules\expo-router\entry.js) Unable to resolve "expo-application" from "node_modules\@clerk\clerk-expo\dist\singleton.js"

[@nadernagat5737]

me too my friend ! did you found a solution ?

[@amblessedcoding]

What you make video of building a mobile banking app

[@diegoletelier502]

Hey, i got some error with the expo av. My video doesn't render properly. And i got the same code as you

[@ian2neko]

I also unable to see the video on my Android device. I dont receive error from expo av but I tested my Android is unable to play the intro.mp4. I have to replace the video with another one and then my problem fixed.

[@diegoletelier502]

@@ian2neko you just replace the video and thats all? The vid from the file that is on the code it doesn't work on android. You think i should replace de video?

[@ian2neko]

@@diegoletelier502 I am not sure whether you have the same problem as me. You can test sending the video to your device and play it. If it plays, you are having different problem.

[@prodeath2200]

For me: on Android emulator, the file size is too big to be allocated in the memory which caused an error, - you can lower the video size or change it to much smaller one (I Didn't do that) or (what I did) add android:largeHeap="true" in androidmanifest.xml inside the like this

[@Vintersorganic]

ERROR Error: Cannot find native module 'ExpoApplication', js engine: hermes No luck finding a solution to this. Anyone?

[@douglaskipyegon2183]

Did you find a solution?

[@user-lx9tx8ie8o]

Nice UI, but does it work? Can i put real money in this App?

[@shivamkumar-qp1jm]

Please integrate stripe with monthly subscription and free plan

[@error5959]

drag and drop code doesnt work for web

[@GoldenMind145]

sir can you provide an starter code ?

[@sohaibeboss]

the video of the first screen didn't load for me

[@iammakafui5667]

this worked for me. Require the video directly instead of using assets change: source={{ uri: assets[0].uri }} to: source={require('@/assets/videos/intro.mp4')}

[@sohaibeboss]

@@iammakafui5667 thanks

[@amblessedcoding]

Full tutorial on react native for beginner

[@TanishqPratap]

that Link href is showing errorss.

[@nazarii027]

Does anyone know if Clerk OTP Auth works in all countries? I'm using a Ukrainian phone number and can't get the code

[@diptasudipta7]

no it doesn't. try a virtual number

[@revanzakurniawan5466]

yeah me too

[@domthefounder]

I never write my stack screen stuff in the components, maybe that’s why I can never fully customize them lol

[@galaxies_dev]

It feels so awkward anyway

[@igmtink]

sir can you make a poll 😁 for your next cloning app

[@galaxies_dev]

I do have the idea for the next already, but very good idea indeed!

[@igmtink]

@@galaxies_dev I want to see how you do your way of creating a full stack mobile app using express.js for the backend and expo router for the frontend, because I really like your methods in developing clean and easy-to-understand logic. I gain new knowledge because of your way of developing.

[@Ethicalh0cker]

is there a way to hire you for a fintech clone ?

[@galaxies_dev]

I'm currently not for hire, but I do have some really skilled friends. Reach out on Twitter if you are interested!

[@SubodhKumar-oi4si]

please today.

[@derlisruizdiaz]

Freddy Mercury of React

[@CodingQuickTips_]

Please we need an VTU App to pay data, airtimes and recharge electricity ⚡️, also features to add money into user account and transfer to another user within the app This will be a great feature please, I need it 😢

[@abderahmanMOUSSAOUI]

I suggested doing a study group in tg, and pasted the link but I think the spam algorithm removed the comment, could you please do it yourself, or show my comment

[@galaxies_dev]

Definitely thinking about it for my upcoming mentoring program!

[@franklou8086]

Copilot sometimes messes the code 😪

[@galaxies_dev]

It definitely does :(

[@4Biddenn]

its been 8 months I am learning German. Initially it was very hard for me to pronounce Z = S and S = Z. Now here we have made in germany npm package ZUSTAND ,but germans are not pronouncing SUSTAND. man...... that makes me angry. 😄😢😠🤔

[@galaxies_dev]

Sorry about that, tried to pronounce it like Americans would but it's not the German way of pronouncing it :D

[@4Biddenn]

@@galaxies_dev 😂😂😂

[@4Biddenn]

@@galaxies_dev btw about to complete whole video tutorial i was happy with my final app. Keep doing this kind of great videos.

[@agbosamson26]

Next Auth>clerk

[@FrancescoPiscani-tr8qt]

Slow down dude. You tend to make mistakes when you go too fast. What's the hurry!☺

[@galaxies_dev]

Will try to take things more slowly next time, absolutely right!

[@Piggiesgod]

code -r fintech works at powershell at windows, but not in zsh/bash on mac what i tried

[@danxayota9933]

Hello Sorry to put it here but i don't know where to ask you for help, i always had this issu : > Task :expo-modules-core:configureCMakeDebug[arm64-v8a] FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':expo-modules-core:configureCMakeDebug[arm64-v8a]'. > [CXX1210] /home/nobe/work/react-native/demo/action-count/node_modules/expo-modules-core/android/CMakeLists.txt debug|arm64-v8a : No compatible library found please i really need your helps

[@InfinityInsights758]

[@dickson710]

8:05 code -r

[@dickson710]

1:08:54 signIn ?:string

[@galaxies_dev]

Yes should be signIn!

[@veedjohnson]

Damnnnn Please tell me you have a reanimated course 🥹

[@galaxies_dev]

I might have something here: galaxies.dev/course/react-native-reanimated

[@MaiAurMikky]

Great video ❤