🔴 Let’s build IN-APP SUBSCRIPTIONS with REACT NATIVE (RevenueCat, Tailwind CSS, Paywall, TypeScript)

yo what's going on Papa Farm welcome back to the channel it's your boy sunny and today we are back first video of 2023 and it's gonna be a one hell of a banger I'm telling you it's gonna be exciting welcome back today we are building a react native app with in-app subscriptions so if you've ever been on an app and you've tried to go to a pro feature and a paywall's popped up today you're gonna learn how to build just that and I'm telling you it's something that you want to know because it's one of those things that you can use to go ahead and build your million dollar app so let me know what you're watching from right now get excited I can see everyone flying in the chats this is amazing I love the energy it's good to see so many familiar people and as always guys welcome to the build let's check out a demo of what we're going to be up to today check this out guys the fast fit app well welcome everyone because the other comments coming in hey look at this Armando Rodriguez says yo what's up from Texas 5 a.m over here catching this live that's what I'm talking about dude we're Nigeria in the house so then says yo what's up Romania in the house what is up that's good I want to see everyone shouting out where they're from right now Brazil that's what I'm talking about we got India we've got UK Canada Belgium nice all right guys let's go look at a demo now something I want to show you before we kicked this demo off is that firstly it's a pretty damn cool demo and secondly this is not a simulator this is actually being run from my phone right now so this is actually being airplayed to my computer and there's a reason why I'm doing that so whenever we have in-app subscriptions there is a certain limitation and it's a bit of a long-winded process to set up the uh the simulator with this but you can do it but I've gone ahead and done it with AirPlay so I'm actually going to be showing you a real device today which is even cooler right so this is actually my phone that you're seeing South Africa Kenya Spain Ghana Nigeria India Sri Lanka Nepal turkey Tunisia that's what I'm talking about I'm Mirage oh coming in hot with the donations thank you so much dude I appreciate you use Pakistan Malaysia that's the energy I'm talking about that's what I'm thinking about we've got 200 people jumping in now oh it's good to see you guys Japan Switzerland I missed it honestly I missed the live streams let's Dive In into what we're going to be doing so I'm going to show you a live demo of the build so what we're going to first see is you can actually go ahead and click into any of these features so in a normal app you can see if I was to go ahead and look on this right now as I mentioned this is literally on my phone right so I'm going to go ahead and click a one of these features and if I have access to it you're going to see hooray you have access to this feature we're going to be able to go back now what if I go on to something like this I'm going to try and highlight this so if I click on right now I'm about to tap on one of these fields where it says add an exercise create a routine or join challenges and you can see there's a little Pro icon right there right so in this case if I was to go ahead and hit one of those so I'm going to hit that you can see hang on a minute you have to upgrade so we get a paywall and this paywall is literally being powered by a revenue car and I'm going to show you how to do all of this right now now let's say I want to go ahead and do this right so I want to go ahead and start a one week free trial which by the way I'm going to show you how to do so you can have a one week free trial you can have a two-day free draw or one year free trial whatever you want to set up I'm going to show you how to do it and you're going to have localized pricing so you're going to be able to set up prices for everyone around the world in their specific currency so I'm in Dubai right now so you're going to see a Dubai currency on the screen okay so check this out if I go ahead and click Start a one week free trial now what you'll see is it's going to connect to the App Store it's going to show an option now that's going to pop up on the screen saying hey you can sign up to the pro monthly subscription with a one week free trial and then after that it's going to be 22.99 Dirhams per month right if it's in dollars in pounds it will show the appropriate currency now for example if I was to go ahead and subscribe in this case I'm going to put in my password and as it's being airplayed you can't actually see it so that's completely fine so I'm going to go ahead and pop this in right now and let me just do that right now so I'm just popping this in two seconds and this is a test account and I'm going to show you how to do all of this in a second as well so you're going to learn about all of this and how you can get test accounts and do all this good stuff so I'm going to click sign in right now and then what's going to happen is this is actually going to create a purchase so you can see I've now got Pro okay so now what we've literally done is subscribed to the pro membership on this application right and what's going to happen is it's gonna say you've you know your purchase was successful then what would happen is it will drop down in just a second and we should see an alert message on the screen saying well hey your purchase has been complete and now I have access to add an exercise you can see I have access to this I have create a routine and I have access to the join challenges so the previously blocked out things and you can see you can confirm this by on the top right it now says Pro before it said upgrade okay what's even cooler about this is let's imagine I want to go ahead and actually change my subscription maybe I change my mind I really like this app and I want to change it to an annual subscription option in that case what we can then do is go ahead and I've actually gone ahead and shown in the paywall here as well so I can go ahead and click on the pro button over here so I click on Pro and then we can actually click on the annual option so now I'm going to click on the bottom option right here and we also I'm going to implement restore purchases which is really cool I'm going to show you all of this right I am live right now all right so if I click on Save 46 annually and I click on this and now what it will literally do is ask to switch my membership to a year plan and that will continue to allow me to have Pro but it will be on the yearly annual plan and I'm going to show you how to do all of this which is damn powerful trust me you want to know how to add in in-app subscriptions because that is literally how the App Store is functioning you've got free and you've got paid apps and then you've got free apps within app subscription and in-app purchases that's something which you're going to want to want to learn how to do okay so without further Ado let's dive into the tech sack and see what this build is about and as I mentioned you're going to learn how to do all of this a beautiful UI on the screen you're going to learn how to have react native navigation we are using Tailwind with Native wind all right so you're going to learn how to do that and most importantly you're gonna go ahead and learn how to handle in-app subscriptions so let's dive into in-app subscriptions why you want to use them and why you want to use the revenue cat which are also really nicely sponsoring today's video right and they're actually helping us out because honestly if I'm going to use uh in-app purchase I am using Revenue cap okay so I am developing apps all the time and we are using Revenue cap so in this case why should you care about them what are they doing so in this case you're going to actually have loads of instances where you're going to have you know you've got iOS apps and Android apps two different platforms which is why we have react native right and then you've got different configurations you've got ways to set up the app store you've got ways to set up the Play Store it gets kind of really tricky right to do all this this is where Revenue cat comes in we basically plug in all of our keys into Revenue cards so our app store keys are are um our Android store Four Keys and all that good stuff and then Revenue cat is our one Central platform where we can go ahead and handle everything okay so let's go ahead and dive into the reasons why so a lot of crazy huge apps if you've ever heard of notion Cameo visco buffer Stockton any of these huge apps are actually using um Revenue cut to power their in-app purchases right now which is absolutely incredible and you can go ahead and get started really quickly so you can see just with a few lines of code you can get everything running and they support loads of languages so if you want to do it natively on iOS you've got Swift if you want to use react native you can use react native which is what we're going to do today right they've got tons of sdks a very simple API to use you're going to see today just how simple it really is and as I mentioned it's going to be your single place where you're going to get access to all of your metrics so imagine you have people on your app store you have people on your Play Store and everyone's you know subscribing to your app and go ahead and get everything set up in this case you have a one central place where you can see all your customers you can see how many millions you're making a month from your app in-app purchases all that goodness right and you have all of these Integrations and plugins that you can then go ahead and connect to as well so Revenue cat is not just a little platform that helps you do a simple thing it's actually allowing you to expand and carry out all this powerful stuff in one central place so you can handle your in-app purchases you can handle your customers you can go ahead and see where your customers are from how they interact with the app and so forth right and it will scale with you so tons and tons of stuff to do with this right um so that's why I like to use like things like Firebase and xjs the cell because they're all built around scaling as you grow the worst fear that I would ever have is my app becoming super successful and loads of people actually wanting to use it and then it's gonna crash that's not what you want and there's a tons of reasons why and I've already got questions coming up in the chat saying what about stripe what about this what about that look for yourself come onto revenuecat.com and you're going to see a bunch of reasons why for example stripe do not have access to a ton of different web Hooks and Integrations they have access to some but Revenue cats Arsenal is huge so in this case this is why I would recommend it right so you're going to see just how easy it is to integrate this now there is an amazing blog post that they've provided called Expo in-app purchase tutorial if you just Google this you'll find it and we're going to use this today and I'm going to show you how we're going to use this to get set up and everything so it's going to be quite easy to follow along it's going to be something you're going to be able to enjoy and build alongside with me and yeah it's going to be a lot fun so this is the Expo this is built with Expo by the way just won't shout that out and if you find anything sort of you know over your head or too complicated or you're kind of like whoa Sunny slow down I don't know JavaScript I don't know react I don't know whether how to begin with this then make sure you definitely check out zero to full stack hero our main Flagship course the link is in the description this is where we have all of our coding Community awesomeness and we have all of our content our coaching calls are you know I have tons and tons of modules in there they're going to teach you how to go from zero all the way up to becoming a successful developer right so we've done it with tons of students and that's how we basically Thrive right so our students are killing him right now we've got nearly a thousand students inside so it's absolutely awesome and yeah it's going to be a lot of fun if you join so make sure you check this out first link in the description and I want to see you inside okay so first things first what I've done is I've taken screenshots of the app right so we're going to go ahead and and dive into today's app and I forgot to mention as well today's app is also going to use typescript so if anyone's been wanting to learn typescript then this is the video for you so this will support typescript we're going to be using typescript to build it react native as our main framework and um yeah we're going to build an iOS Android app but by the way this tutorial is covering the iOS installation portion of the of the in-app purchases and in-app subscriptions if you want the Android there is awesome tutorials out there on YouTube and if I get enough likes and comments on this video I will make sure to go ahead and make an Android version as well so you know what to do subscribe and like the video if you want to see an Android version as well right but I'm going to show you how to program it in react native so it's going to be pretty straightforward Okay so we've got our screenshots for reference for our design afterwards and right now we're going to go ahead and dive into the tutorial so what I'm going to do is pretty much show you and this is how I kind of do it in coaching course I'm going to show you how I would go ahead and do it myself how I would go ahead and find the resources to do it and in this case we're going to use Revenue cat's awesome tutorial to go ahead and do that so in this case the first step you want to do is make sure you have the Expo CLI installed right this is a crucial step that you're going to need because you're actually going to need to be able to do things like um set up your starter template start up your server and all that kind of good stuff so in this case I'm going to cut my old server I've already installed Expo so I'm not going to need to do this raspberry thing is this is the live stream a bit asynchronous so it is live right now so we're all good so in this case I'm going to go ahead and install this so I've already installed this but all you want to do is pop open your terminal up open your terminal and go ahead and pop in the following npm install G Expo CLI I've already done that so I'm not going to do that this will allow us to run Expo commands in your terminal now if you do this and um you basically go ahead and type in Expo and it doesn't work all you're going to need to do is shut your terminal and reopen it after you've done the install okay if anyone's getting an audio delay don't worry about it they tend to fix after we're live after the live finishes so it's all good don't stress right um that's all good all right so now what we're going to do is I'm just going to go ahead and move my screen around so I can actually see what you guys are what you guys are messaging there we go nice all right so the next step is we're going to go ahead and actually initialize an app and before we carry on any further I'm going to explain to you something so we are using Expo today which is going to allow us to streamline the development process in building our app and then what we're actually going to be doing is actually deploying the app to explore Expo explore Expo applications Services right and what this will allow us to do is do something like this we're going to be able to deploy a development build and that development build will allow us to run it on our device but it will be connected to our Metro server so when we're basically developing and we're basically building out the features of our app we're going to basically have a live version on our phone and I'm going to show you exactly how to set up your test device so that you can use your iOS device as your test device for your development okay so don't worry if it goes over your head I'm going to explain the steps and then you can pause the video afterwards it's going to be up okay so let's check this out um well I know the audio might be slightly off I don't know why don't worry about it it's completely fine just follow the video it's all good and also we've got more songs in the papa fam playlist so I'm going to change up the mix right now before we carry on okay so let's get started with our development so I'm going to go into my terminal let's get into Flow State right let's do this so I'm gonna go into documents builds I like to do it here you don't have to do that I just like to throw it in there okay then we're going to go into Expo init and I'm going to call this one Revenue cap build or let's just say Revenue cut app and I'm going to call it YouTube right then we're going to go ahead and hit enter this is going to create us our starter application for us okay so in this case um we get a nice little template that pops up you've got blank blank typescript or you've got tabs type script right now you can use tabs and it will go ahead and set up react and react native navigation for you but I'm going to show you to do it from scratch because I think it's going to be more beneficial to actually show you how to add react native navigation to a basic app okay so in this case we're going to go ahead and type in with the arrow keys we're going to go down to blank type script and hit enter on the keyboard and you can see it downloads a template and it starts getting things set up okay now I'm just gonna go ahead and move my screens around so that way we're ready to crush this build okay now while this is doing this I'm actually going to show you something else that we're going to need so remember I explained how we're going to be using something called Expo application Services right well firstly this is the dock so you can go ahead for yourself and check it out at docs.expo.dev forward slash EAS right and then you can actually give it a read here but in this case we can use this to actually deploy our app to development so we can actually have a development build we can deploy it to production so we can go ahead and get pushed out to the appropriate app stores in this case we're going to be showcasing how to push a development build and then basically be able to test it on our phone right it's going to be too long of a video if I showed you the entire flow all the way to actual deployment but we can make future videos for that all right so we're going to prepare ourselves for that while this is happening and you need to go ahead and install this into your computer so in this case you could use yarn or you can use npm just like we did Expo I'm going to go ahead and do the same thing from um earlier so in this case I'm going to open up my terminal and I'm going to paste it and I'm going to install this now I've already done it but in this case you can you have to run that as well okay so make sure you install the export EAS CLI as well we're going to need that right so next step is once this is done it'll say your project is ready that's a good sign you want to then CD into your app so in this case I'm going to see the end to my app and I'm going to type in code Dot and code dot will open up vs code in our um on our screen in the correct folder directory so I can close the previous terminal and then I can go ahead and just set things up nicely so that way I can have it all look in the way I want it right now I'd highly recommend at this point that you actually prepare your screens accordingly so you have a nice workspace so you want to have your like your windows on one side so you've got your design maybe like this and then you can actually have things nicely laid out so you can work a bit more efficiently right rather than kind of going a bit crazy and I always say it's my coaching calls as well right um oh we got the university in bath in the house what is up um also guys we just crossed over the 250 lag Mark smash that like button if you're watching this right now we're gonna get it over to 300 keep going to a thousand I know it's gonna pass a thousand these videos always pop because you the Iraq native Community is amazing right now let's go ahead and actually get this up and running so first thing we want to look at is up uh or let me make it a little bit bigger for you guys is app.tsx right so after TSX now here now this basically this is the traditional way to write styling in a react native app I personally do not like that so I'm going to go ahead and get rid of that right now okay I'm going to get rid of the styles.container as well and I'm going to get rid of style so in this case this is simply a very similar to a react functional component where it is a functional component that's just in react native except rather than divs like we were doing react for web apps we're using the review components and the text components from react native because what's going to happen is we have to use those special components so that way react native knows that okay on an iPhone build the text field in this way on an Android device build the text fold in that way okay so it needs to go ahead and know those kind of things so what I'm going to now do is clean up our code a bit and now I'm going to show you how to actually Implement Tailwind into this app okay so right now we haven't got the app running because I want to go ahead and get everything kind of prepared and organized before we do so the first step is getting a native win installed so that way my goal is I should be able to write something like how we're used to saying class name and I should be able to add in padding like so and it should just work right so let's go ahead and install a native win so that way we can style our app so first things first I'm going to type in tailwind and I'm going to type in uh Native win sorry native wind I'm just showing you because I want to show you the whole process right so native went home you can literally click it and then it's going to have some install steps on here and some people I always get mixed comments advice why do you why do you show all this you don't know what you're doing and it's not that guys it's literally because even in coaching calls I will completely show you how to do it in this approach rather than kind of show you um rather than kind of just skip all of this because otherwise you're gonna be doing it yourself and you're gonna have no idea how to do it yourself right so in this case you can see the docs right we've got to create the project we've already done this step right we've already gone ahead and done this then we have to go ahead and install native win right and it's peer dependency which is of course Tailwind CSS right so at this point I need to now go ahead and add it now they're using yarn let's have a quick check what we're using so we have a yarn lock file which means I am now using yarn if I had a package log file means I'm using um npm remember you can switch between the two as long as you don't have two lock files because you should only really have one okay so you want to make sure you only have one if you have both then just delete one and use the other one that's existing and make sure if it's a package lock using npm if it's your unlock using yarn stay consistent because there's a reason why we have log files okay make sure that all the dependencies are locked and in the right place right so in this case all in the right yeah I'm looking into it but yeah so at this point I'm going to go ahead and install this so I'm going to copy this and also if you like the tunes on the new proper fan playlist check out go ahead and subscribe to our email newsletter and I'll send them out that's how we do it right now so command J to open up your terminal and then I'm gonna go ahead and pop this in and now we're adding in the two dependencies so this is native wind and Tailwind TSS so this is going to allow us to use Tailwind CSS in our code this is crazy MFG faith says hey mate thanks for your amazing videos landed my first job a few years ago also thank you it's amazing thank you so much for sharing that that is so so cool and uh amazing stuff Remco is actually working from home and he's watching the video on the side that's awesome to see uh welcome to all the new viewers jumping in and again make sure you're subscribed if you are watching it helps this channel grow right so let's go ahead and remember smash that like button we're about to cross over 300 likes so at this point now we've installed this cool let's go ahead and set up Tailwind TSS so next step is we have to go ahead and do MPX Tailwind CSS init I love this track I'm going to restart this track it's called East West dance on the playlist I'm gonna go ahead and say this is a this is a nice little background track okay so MPX Tailwind uh CSS in It Marvin here from Nigeria what's up dude so we're gonna go ahead and pop this in so MPX tailwind and net right so I'm going to go ahead and do that right now and you can see it so they created a Tailwind config file so command B to open up our sidebar command J to hide our terminal and you can see telling config is now here right so then what we need to do is we need to Telltale in config that what files it basically needs to check for Tailwind stuff inside of right so in this case they've all they've already given us a kind of a head start here so I'm going to copy where they have their content and we're going to basically change this for what we need okay so in this case I'm going to go back to here I'm going to Chuck in the content build and I'm going to go ahead and get rid of this one and pop in mine so now we've got this on this uh forward slash app so in this case the app.tsx file with loads of different extensions to just support that you can delete ones that you don't want but I'll just recommend keeping it and then we've got the custom directory okay Papito what is up we got Papa Farm members in the house remember if you want a sport Channel hit the little join button down below and I know I can see you basically stand out from the rest right so um I love the comments coming in right so at this point we also want to support the screens order which we're eventually going to have right and then I'm going to go ahead and take this as well copier and I'm going to say I also want a components right so in this case I'm just going to go up I want screens and I want components because this is how I'm going to lay out my app right so we've got screens and components eventually as well so that's it that's the Tailwind config file sorted let's go back let's go down add the bubble player plug-in right so in this case we should have a bubble bubble bubble I don't know how you even say it I probably messed that up so bad but Babel right and um in this case we're going to go into our config file and add in the following plugin right the Tailwind the native win bubble configuration so in this case we have got it we're going to go don't add it in presets I've done it before and I know one of you have done it as well right I completely just misread it and I kind of done that quickly then you already said I don't have to write Rihanna but I love tuning in here honestly if you can write react you can do this right I'm telling you can do right it's actually not hard at all um oh man Samuel got a job as well awesome stuff dude that's incredible Jay screenshot that that is amazing right so at this point I'm just gonna oh yeah there we go we've got the plug-in set up and then we're gonna go down and now we can start writing some code Okay cool so let's actually see for ourselves right so what I want to do is head back over to our app and I'm going to start typing in class and you can see we don't get the correct uh sort of configuration as yet yet so I'm actually just trying to figure out where I added in the final missing piece of the puzzle I think to be honest what you can do here at this point is that because we've added in an entire new thing what I'm going to do is I'm going to type in Expo start of course I like to do XP MPX Expo star okay and this is basically going to start up this app right so let's go ahead and start it up and you can see it starts to project up and while that's doing it and now you can see it gives me a QR code so this QR code is basically going to allow us to basically scan on our phone if we had it set up in the correct way but for now we're just going to go ahead and do open w for the web right in this case oh no actually I don't want to do that I don't want to do that yet yeah no cancel that cancel that I'm not gonna do it for the web today I'm going to do it for the iOS or Android okay now rather than do it this way and show you on the simulator I mean I could show you on the simulator before we do anything further I'll show you I'll actually show you how to deploy it first right let's actually do that oh no I'll show you similar right so I'm going to hit I on the keyboard right here on the keyboard open the iOS simulator and then what we're going to do is we're going to load this up on this simulator first and then I'll show you the point at which we can't continue on with the simulator for a few reasons right so this will go ahead and open up a simulator for me um I think I think it's going to open up my sim now hopefully it does yeah it does yeah there we go so let's go ahead and wait for my simulated device to pop open okay whenever it does it will and then we're going to be able to use our Styles like so right so view class name that kind of stuff now I'm gonna go ahead and head back over so is it opening up my my simulator yeah no I don't think it is okay that's annoying oh yeah there we go it's out there would you like to upgrade oh okay yes let's upgrade a chance we'll go download yes we'll go up all right so let this let's do this thing right in the meantime let's get our phone ready so that way we can actually demo this on a real device okay so the way that we're gonna do this is we need to go ahead and I mentioned before we need to install the Expo CLI right so this one right here so we've done this already we've all we've already um installed the CLI the next thing that we need to do is actually go ahead and start using this now the first thing you need to do is actually go ahead and create a device uh basically you need to register your iPhone as a device under the application server so that way you can actually go ahead and connect or push builds to your test device right now before we do that I just want to go ahead and see I think my Expo device is working let's just double check something is my simulator oh okay my simulator has finally come around let's just let that load I wanted to do this live right I was thinking about doing this on a recorded screen but then I think it's just when I do it live you guys can see for yourself the actual painful bits that kind of break when I'm actually live and I think that's so much more valuable than everything just being Crystal perfect and you know all every time it's perfect because when we're developing the truth is it's not always perfect right so in this case there we go building JavaScript bundle nice okay there we go so you can see that on the simulator I started this by pressing I right so now what I'm going to change here is I'm gonna make this a safe area of you and then what that will do instead is it will go ahead and it will show it here okay now let's just double check something let's go into here and say class name equals padding of 10. and you can see that it's not pulling in the the bubbles not kicking in right so the reason why this can happen is for it can happen a few different reasons what I would say is at this point I would highly recommend you need to restart I believe it's your vs code or your server there was a reason I'm gonna find it on the Stream I was a little bit of a painful reason I remember where was that took a couple of retries and then I was able to do it so I did set up my bubble config I did do this I did do this [Music] okay let's do I open on iOS scary thing about doing a react native build on live is that there's so many more chances of bugs happening okay so that's fine now there was a a place where I could extend my um where is that there we are that's it so the reason why we're not seeing class name right now is because we have to add in something called a type definition file so I forgot where it is where is it here it's not showing it here but basically what you need to do to basically stop it freaking out like this is go ahead and add in a new file called app.d.ts okay and then here you basically want to add in the reference to the types okay so here reference to types native wind types okay and then we're going to close this and eventually at some point this is going to kick in and it will work right let's refresh again let's see if it's gonna if it's gonna do me a favor now no it's not still not working where's your text red 500 text Red 500. um and at some point it will wake up right unless I've completely missed a step which I don't think I have typescript let's see I've already done this step right so we've already done that Expo we've already done this we've already added in my entire dependencies let's have a look again package.json um we did add a native wind we did add in Tailwind CSS good and then we did run our toe in CSS a knit while fine app custom directory let's just double check our custom directory again so let's go to Tailwind config and right here so app.tsx so I'm just going to double check my config because I sometimes I feel like I always mess up a little bit here oh that's still fine okay that's completely fine and a babble config let's just go ahead and double check that one more time in this case yep that's completely fine [Music] MPX Expo slot clear okay we could do that actually yeah so I'm gonna clear my cache right so what I'm gonna do is detect the change in Babel config there we go that's the one I was waiting for all right so that's usually the problem here so if we do export and I believe that is the correct thing Claire and that will clear the cache all right so now we've run the project again with the clear flag and now it says Bangla cash is empty rebuilding and then we re- do I to open it on iOS okay and then wait for a sec and hit R so okay let's wait until it actually loads close it here push it up uh I there we go and now wait a second that'll pop up honestly react native is requires so much patience I'm just gonna be real with you it does require patience but that's why I'm here you can code along with me okay so in this case there we go now it's building a bit again let's do a reading and then if you do find that I highly recommend you have to clear your bundle yeah it's mostly the case even when we do the EAS deployment step chances are you're gonna have to rebuild a couple of times to get it to kick in the way you expect it to the way to work right okay so what I'd recommend here is honestly I did it last time and it just seemed to work is I'm going to go ahead and actually reopen this project so I'm going to go ahead and copy this I'm gonna close my code terminal I'm going to open up a terminal here I'm gonna do documents forward slash build oops uh builds there we go I'm going to CD into my directory again I'm going to code dot again so I'm going to restart my vs code basically with the directory and last time that you know that actually seemed to wake you up there we go so now I shouldn't complain about my class names all right I told you I told you well hopefully it doesn't scream at me if it doesn't I I made a mistake there okay then we're gonna do Expo um MPX Expo start remember if you're watching this on live just know that afterwards we always add timestamps to these videos so you can feel free to watch it with me and experience the entire flow or you can go ahead and Skip ahead I'm going to hit I to open up on iOS again I'm going to close this one again so let's do that and then hit all right there we go cool now what I've found most of the time is it's usually a caching issue here right a code review says puppet from his back so cool to see you again Tony hope you're doing well I I'm doing well thank you so much dude right um someone said how did I get this little Color Picker box it's because I have the uh Tailwind extension installed dude so that's the reason why so in this case Tailwind CSS intellisense that is why we get that so we fixed the first issue but our Tailwind isn't kicking in so we'll fix it on the stream live don't worry we always do um okay so in this case API cash that's fine all right well I mean we'll we'll come back to it I guess we'll get we'll get around to it let's do a view oh maybe it's because I'm in a safe view no I don't think it is let me just pop this here let me try and do it with a normal View and see you is that going to be red let's see where's my red text at BG oh okay oh wait oh wait a second oh there we go there we go that's what I'm talking about all right so in that case I believe I'm actually being so stupid here I think I actually can't add a safe area view oh my camera it is safer review okay I mean you see what I mean sometimes it's just so weird right there right so if you've experienced the same thing don't stress it happens right you see how what I would recommend is just change your component and it'll force it to kick out at some point right but there we go now we can start adding in our Tailwind right so I know a lot of you always drop comments about you know something it worked and then it doesn't work and what the hell is going on and also you'll notice that we can't do the text white in the parent component here right you're gonna have to actually on the text field here so in this case I have to do text white and then you can see it applies on the text but that's damn good right We Made It smash the Thumbs Up Button we're about to cross 300 likes that's what I'm talking about right and then uh now we can start making progress oh that that was kind of scary I ain't gonna lie right uh yes it wasn't accepting the class name for some reason and then I had to force it by changing it to view and then coming back to save area view so we're past the first problem nice now we've got 100 more I'm joking right so now at this point what you need to do is install I've actually got a nicer bit of documentation here that I want to show you instead now we're going to go ahead and I'm going to show you the docs for how we can get set up with uh here we are create your first app so on Expo no sorry here's okay it was this one yeah so there you go so when we basically set up react native purchases right we are you going to be using Tel Revenue cat and our Revenue cat is actually on the Expo doc so if you're wondering is it official should I use it Expo themselves are recommending Revenue cap if you look on their docs on in-app purchases and in-app subscriptions you will see that they also have a link to it right now in order to get everything set up it's actually all we need to do is install the two things here so one being react native purchases and one being Expo Dev client okay so the first one I'm gonna install in the store is this one here Expo Dev and that this has to be in your directory okay so I'm going to go into command J I'm going to pop open a second terminal and I'm going to push this one all the way to the side because that's just running my stuff over there and I'm going to go ahead and pop it in Expo install Expo devclient and then you can see that this is oh so if you do want to avoid this issue you can use MPX Expo install right so that way it will use the latest version I recommend you actually do that to FIFA and then I'm going to do the same here with react native purchases okay so in this case MPX Expo install react native purchases and now it's basically installing the dependencies but it's going to use Expo to in order to do it and what this actually does behind the scenes is it installs the appropriate pods and stuff for iOS installs all the goodness in Android in the Manifest and all that kind of stuff but it does it in a nice way you just write Expo install and it does all the dependency management for you that's the beauty of Expo right so in this case we've installed the two things that we needed step two is to configure our Revenue products and offerings right so at this point we can kind of pause here right and then the reason being is I this is what I can kind of take over and show you how I would do it all right but what we're going to do here is we're going to pause here and we're actually going to build out a little bit of the UI right because I mean we just want to see some stuff on the screen right so I'm going to build out the UI while we have access to the simulator and then what I'm going to do is we're going to go from the UI connect it to the app store and then we're going to go ahead and hook everything up with the revenue cap okay so that's first things first is let's get to the point where our app turns from this to this right which is obviously a lot better looking than what I have right now on the screen so heading over to our app this has several screens on it right if I showed you as I showed you earlier if I type on uh hit on track workout for example it says hooray you have access to this feature and so forth right we this is called react native navigation well most of the time the Library you're going to use for this is called react native navigation so what I'd highly recommend at this point is we actually installed that so first thing that we need to do is I'm going to leave that over here is our starting point here is app.tsx Right TSX typescript file so we want to convert this into screens and then we're going to have a navigation kind of structure to this right so how do we do that well basically we go over to our rather we type in react native navigation and I will show you this is the library that you should get very familiar with when you're doing react native work okay so this is how you navigate between screens it's one of the most popular ways of doing it so in this case click on read docs you'll see for yourself and the reason why I'm showing you this exact route as well is because the docs will tend to change right they will tend change so you should actually check for yourself and I get the comment all the time more about the latest version you're going to always have this issue right where it's going to go ahead and sometimes be delayed and or outdated and stuff so you have to check for yourself so we're going to install route native navigation into our app so I'm going to install it like so react native navigation and then I'm going to come down here and it says installing dependencies into an expo manage project that's exactly what I'm doing so I'm going to copy this entire line right here okay and you can see we are installing rap native screens and react native safe area context so I'm going to install those into our thing into our app and you can see that's using MPX Expo in store and then you can see we can stop there right because what we've done is we're not using a bear react native project now we're using Expo manage project instead right so the next step now is that we need to basically go ahead and wrap our app into a navigation container so in this case now I can do is I can import navigation container like so and then what I'm going to do is basically wrap my entire app in the navigation container right just like that okay and at this point you should see you know nothing's broken nothing's crying at me freaking out and then you can even hit r on the keyboard on the in the console and it will refresh right so good good so far Next Step that we need to do is go ahead and click on hello react navigation see an example of this is you need to install your native Stacks all right so in this case I'm going to copy yarn add react navigation a native stack copy that head over here oops let me chop down the side and then we're going to go ahead and pop it in here so yarn add react navigation native stack and this is going to be like responsible for the different like the stack Library I guess so it's basically how we stack screens on top of each other and then we navigate between them so now what we need to do is create something called a stack Navigator and a stack Navigator allows us to essentially have like a screen like this and we can have a link to another screen and it will essentially have that behavior where we can go into the next screen and then swipe back between to the to the old screen right or if we had a model we can basically set the type to modal click it and it pops up as a model of that screen right so we need this uh it's basically a crucial element right now so we're about to cross 300 likes smash that like button let's get energy up that's so sick right so I'm gonna grab this stack uh con stack over here and we're going to basically pop that in just over here all right cool and you can actually leave that outside over there right and then what I'll show you is a little trick so go to the end of Navigator control spacebar and you have auto complete click it bam you get your oil complete all right I always get that question question everyone's asking me how the hell do you do that that's how you do it right then we're going to go ahead and copy this stack over here so that bit of code there and basically we're just gonna remove this right now I'm going to paste that in and you can see we're going to push eventually to our home screen and then the whole point here is that you can have several screens that can have the home screen I could have the search screen I could have the inbox screen and you know different screens like that that's how you basically Nest to different screens and then that way we can basically we're telling our uh you know our react native app that um these are the different screens and then basically it sets up all the navigation parameters so that we can basically go ahead and navigate between them okay uh candles though will you marry me and get a joke all right um so in this case we've got the home screen right and then what I'm going to do is I need to create that home screen component so firstly before I do that I want everyone to go into your extensions and download this extension because it is absolutely Game Changer I'll say every single session es7 react Redux react native Snippets so good such a good extension right so simple it's just Snippets that allow us to write functional components really easy so download that just click install and it'll do that and then what I want you to do is go into your folder structure at the app.tsx level create a folder call it screens simple as and then inside of screens all I want you to do is create something called a home screen dot TSX okay react native functional component with an export and now we're not going to use style sheets but in this case you see my snippet I just hit enter now and Bam wow I have a home screen right I can get rid of this that's fine we don't need it and I can say I am the home screen hit save go back to my app.tsx control spacebar enter and then bam just like that now I have a home screen and what you should see if you did everything correct is you need to go ahead and see the screen right if you don't get this screen you probably mess something up and at this point you should go back and just quit I'm joking I'm joking do not quit you should go back and actually debug it and figure out what's going on and then if you do get stuck honestly you have chat GPT to help you out and I have to have GPT videos to help about uh to coming along the line or join the community live here at force that girl and ask for help that's the main thing right so in this case we've got the home screen right here and what we're then going to do and by the way all this code will be available on the GitHub repo afterwards if you want it check it out links in the description right um so we're gonna have the home screen and you can see it just renders out the home screen like here right and again this applies with all of our stuff we can add padding to the the element afterwards all that good stuff text extra large you see we can we can do all of our normal stuff right that we expect so at this point now we've got our screen how does your face cam zoom in and out I have something called a stream deck that's how I do it right and what I basically want is remember we captured our UI pictures before and none of these have this ugly looking header right I don't want that header so how can I change it well you can change the default options but I actually want to go ahead and change just this screen option and I'm going to add an argument here called options and inside of here I'm going to add an object and then I'm going to say header shown is false see it's like the get of copilot is listening to me right so I'm going to do this and as soon as I hit save what you'll find is the header disappears now it's very important to understand that the view here is like if I was to get rid of this padding look what happens you see how it goes all the way into that dangerous area all right so what we want to do with our screens is tend to use something called the safe area View and you're going to have two once you've installed the reality of dependencies try to use the react native one it's just a safe use right so go ahead pop that in we can get rid of the old dependency and what this will do is it will only use the safe area now the safe area is basically outside the notch so that way you're not cutting off any text or any of that stuff so to avoid all that and it will account for all different types of phones and all that kind of stuff right um so yeah but before we jump on I'm gonna have quick water break right so it's been a good uh oh wow time's good time's going well but um make sure oh 300 likes as well sick get to get the energy out guys let's keep going I love this song right so we're gonna go back to our home screen and now we are gonna go ahead and build out this what you're seeing right here right so first things first let's have um uh let's have a uh okay this is essentially document it right so I'm gonna actually go ahead and add a few um comments so the first comment I'm going to say is it's gonna be I want to kind of visualize this for you guys I'm going to pop this over here the first comment is going to be this image right so I want to have a well I wanna yeah I want to have an image right I wanna have an image it's going to be the logo and then I want to have um this area right here now really what this is is these are just components rendered out one after another so these are just being rendered out one after another right so one after another and then this one is just actually surrounded in a view and I'm simply using a flex rule to basically divide the space all right so if you actually set up your components correctly then it will actually you know you can do this very easily right so I'm gonna call these action rows right so each one is an action row action action action action row all right so we're going to create a bunch of action rows so this is going to be basically the action row components okay and then we're gonna have a little icon up here right so this icon is going to be responsible and it's basically going to show Pro or upgrade button and it's going to show us the status of our membership if we're a pro or any of that kind of stuff okay so in this case let's go ahead and hit save thank you come Eclipse because well done today thanks for your visit I appreciate you man thank you heatham as well and thank you so much honestly I love and appreciate all of your messages I see you guys all right so at this point now we can go back to our app and we can start doing this so I think the first thing that we should do is get that image in right that image is probably the one that's going to be visible straight away so let's do image let's import the image from react native it's a self-close component now the first thing I want to do is actually pass in a source now I've actually given it a source already oh I've got a source available and the way we do is we say Source we pass in an object and we pass in the URI okay and I've actually got a URI already available and this URI feel free to use it it's uh it's this one right here right I'm not responsible for your use just throwing that out there that's up to you right uh elephant says we need to make something 100 times bigger he deserves to be a superstar dude then that's all I ask is smash the Thumbs Up Button because I I love that comment we're almost at 200 thousand subscribers which is incredible right that's actually amazing like uh let's go ahead and uh keep the likes coming let's hit 400 now all right I'm gonna get energy up as well all right so class name we're gonna go ahead and oops class name we're gonna say equals and I'm gonna say that this one is width 4 and height of 64. and if you're wondering what the heck is this stuff this is called Tailwind so if I hover over it you'll see that this is actually going to create CSS for me that's actually going to look like the following right and a lot of you asking for video calling apps I will make one in the future okay hit save and now let's see what we get okay oh nice right we get that so we can get rid of the text up above oh nice Jay's in the house what is up there we go Jay are you uh are you are you good cool nice all right so at this point now um we're gonna go ahead and create the I guess we should maybe create the the start creating the I guess the pro button let's do the pro Bon okay so uh nice days back in the house that is what I'm talking about all right so now next step is just do that Pro a bit all right so I'm gonna have a touchable opacity right so whenever you want a button to be clickable but it's not a button it's kind of you want to customize the view of it then I'd recommend you use something called touchable opacity right so touchable opacity like so and then you can go ahead and import this from react native and what we're going to do inside of here is we're gonna have a bit of text which says Pro or upgrade right so in this case it's gonna be like this so pro upgrade now if you see if I click it oh you see how I get this nice clickable that's because it's touchable it's like I can touch it and it changes opacity when I touch it right so uh if you can't see that just zoom in oh look closely because I can't zoom into the phone right and then I need an icon now right so I need this icon that you see right here so this one right here so at this point I know right 300 likes sick uh so this one we're almost going 400 the lights are flying right so at this point we're gonna change uh ionic we're gonna add in icons so what you may not realize is when you actually use Expo we have the following right so when you use Expo we have Expo Vector icons as part of the package so in this case you actually get this just by installing um export so I'm going to show you if you go to icons in the Expo documentation it will show you how to use it so that's the first thing how to use it as well as how to go ahead and firstly how to use it and then as well as how to search all of the different icons right so in this case you can see here we can actually search if I typed in person for example but loads of different people come up right or do people icons okay now um this uh well there's so much positivity in the chat but I can't reply to everyone but I I see you guys right so this is this is awesome so um at this point yeah this is how I'm checking for them and then if you click it it will show you how to use it so let's do this for the first one and then I'll basically just assume that you do this approach when you're doing it yourself so in this case person we have a icon right here and I actually want to use person Circle so we're going to copy this from here right so in this case I'm going to copy it over to my code paste it in and then what I'm going to do is render it okay so I'm going to copy that I'm gonna pop it in like so and I'm going to show my simulator and hit okay and now you can see it popped up nice okay and uh what we're going to do is style this out a bit so we're going to say class name and then here's gonna say this is actually going to be an absolutely positioned element and the reason being is because I want to throw it over here on the right right and it doesn't matter how much I scroll around this screen I don't want to show so basically if I show you this app right this is the live one you see no matter what I do well if I go up and down it's gonna always be stuck in that top right and that's what I want here okay so I'm going to say absolute and this is going to be a Z50 because I never want it to be buried behind something that means the layer that you're positioning it in top is going to be five and the right is going to be 10 right that's amazing somebody just received an internship as a software developer thanks to our videos love from India that's amazing world ended all right so we're going to hit save and now you can see it flies over to the top right right then we're going to say items in the center okay and as you can see now it's kind of nicely pushed into that center right now for the safe area view we're just going to style this a little bit we're going to say Flex one give it as much space as we can possibly we're going to say the background is going to be gray 100 and then we're going to give it a relative color okay and then I'm going to also just go ahead and hit go to my console and hit R to refresh because some reason the background color is not kicking in let's do red foreign relative there we go right so in this case that's pretty nice I'm gonna go all of this I want it to be in a scrollable view right so I want to add a scroll View and a scroll view is basically like a view where it's just scrollable so in this case if I throw it here now you can see I can scroll right so that's better and it also adds a little bit of padding at the top which I like all right so we've got a tiny bit of that now we've got this scrollable feature which I didn't have before okay um or some stuff right 350 likes incoming come on keep pushing all right and if you're watching the replay you know what to do just destroy the like button okay so in this case we've got Pro or upgrade and I'm going to make this basically change based on if you're actually a pro or if you're not right as in a pro member right you're all Pros in my eyes right so in this case ionic uh for the ionic icons we're going to change the size to 30 and the color I've got a nice hexadecimal color here so I'm going to go ahead and copy that right now the copy and then change the color to this and then yeah hit save there we go and I want the same color in the text so in this case I'm going to say class name and this is going to be text centrally aligned and I'm also going to say text and in remember in the Tailwind we have something called uh in we have the just in time compiler and adjusting time compiler allows us to have Dynamic values in square brackets we can still have that here and we can pass it in like so and you can see we can still actually pass in our own colors so it's really really cool to actually go ahead and see that right Faisal says hi bro I'm at work I want to drop in the say you are awesome you're awesome dude for tuning in uh make sure you don't get caught at work but thank you so much for tuning in we're going to change it just say upgrade and then yeah so that that's looking pretty good so far now for the action row right let's actually gets something pretty nicely looking like this right so action row that's what we want to do and the action row should take a few different things in the uh as arguments right so as props so we're going to make a customizable element and each time we pass in different props it will render out these different icons and different colors so I'm going to show you how to do that so first things first go to app.tsx level create a new folder called components right yeah and no one pressed the like button twice otherwise yeah you know what's gonna happen so at this point we're going to do that and then we're going to create a component inside the components folder called action row.tsx right and then react native functional exploit component bam we can get rid of the reactor top no longer needed all right and that's good and then what we're going to do is we're going to basically mask out our props and how we're going to pull them into this app so if I go back to Apple uh home screen sorry here for example let's do a dummy call for an action row okay so one of the action rows is to track a workout right so in this case you can see us to track a workout so in order to do that I'm going to have something like looks like this so we're going to import it and you can see right now it's complaining because we haven't set up typescript in the way that it expects so it thinks that you know everything ain't really set up right right Joseph Isaac oh what's up man good to see you tuning in from work as well so these are the different props that we're gonna basically customize our custom component with right so by passing in different props or properties we can actually customize how a component will be rendered out on the screen right so in this case we've got different colors different screens and we're going to also say vertical okay um and um yeah we'll cover that in this oh yeah yeah I know why we're doing that okay so we need to actually support this so first things first is the props come through here now all of those individual props that you just saw I have to basically I'm going to do something called destructuring and I do teach this inside the course so remember check out zero to full stack hero if you want to learn more about your JavaScript fundamentals yeah or just learn them on the videos it's all up to you so in this case the props are getting destructured here but this is not where it ends right you have to define the prop types here and this is where the typescript is basically going to help us protect against unwanted bugs or anything like that so we actually have to say that we have to basically tell it the shape that of the props that it expects so in this case we've got the title which is going to be a string so the title is going to be a string then we've got the screen which is going to be of type any and the reason because it's uh anyway now just for now right is because um uh what's it called all right so when the screen is uh any that's because we haven't got a correct type definition just yet that's because we're going to navigate to a certain screen then we're gonna have color and this is going to be for a string right then we're gonna have three more and these are going to be all optional which means you don't have to pass them in so requires Pro icon and vertical okay now the reason why I want to do this is because basically some of these so if we look at this screenshot some of these will require Pro and if they require a pro I'm gonna make it so that you can't actually navigate to that screen and if you try to navigate when you haven't got a pro membership it's gonna pop up that you know that pop-up that I showed you previously right the one that says Whoa you need to pay so it's going to pop this up saying you need to upgrade your membership okay so we're gonna go ahead and do that right now so we've got our props correctly placed in like so the next thing that we're going to want to do is create we're going to change our View to a touchable opacity right and I don't know why it doesn't actually work complete properly like that right uh so now we've got a touchable opacity and then inside of it we're going to have an icon and a title right so let's just keep it very simple for now an icon and a title okay so icon and title so we've got the text already in there so let's just leave that for now and then we're eventually going to have a ionic on icon so I'm going to import that at the top like so bam and then you can see what we're doing here is typically in the previous use case we were actually passing in the name of the icon that we wanted to use right but here what we're doing is we're using the string that we passed in um or the component the way essentially pass in depends in this case it will actually be a string value right in this case it's going to be a string value but oh that's why I did it yeah because this is expecting a certain string and I don't want to write all of these out because they didn't give me a specified type definition so in this case what we can do is we're going to say name is equal to icon and that's going to be basically whatever we pass in as a prop type right and then the title here I'm going to instead replace with tiles so we do a query brackets for jsx to basically pass our prop in like so okay now let's go ahead and see you can see track workout with the heart has popped up right and the color is white right now in this case I want to make the background a different color right so in this case the background should be a different color so what I can do here is I can actually go ahead and pass in now you can pass in colors in many ways but in this case when you're passing a dynamic value into a customizable component it's better to pass in the style prop the color right so in this case the color is like so right so color color and it's actually gonna not gonna be color it's gonna be um I think it's background color yeah background color is going to be the color here okay and what you'll find now is that that is the track workout so we're almost getting there why is the track workout and what I'm now going to do is pop in the rest of them so the rest of the action rows so that way we can get basically a nice overview as we build this out right so going into my home screen I've got the browse workouts I'm gonna add in and hit save and now you can see browse broadcasts popped in and I've got a bunch of others which I've actually done for us right and some of them are going to require Pro so you see the last three are requiring Pro right and I'm passing in different icons into each one and I'm passing in different colors and different and all of the screens in this case are eventually going to navigate to a demo screen right so remember this is a demo and it's just showing you how to basically block access to different screens based on if you're a pro member or not 350 likes that's what I'm talking about let's get to 400 let's keep going guys all right so action row is going pretty well so far and now what we're gonna do is we're gonna customize the text because it looks boring as hell so for the class name we're going to say text white we're going to say the font should be Bode on it should be bowed and the text should be large there we go bam all right now for the touchable opacity for the class name we are going to actually do quite a bit here so we're going to say firstly it's a flex box and the reason being is by default on react native everything is flex column now when you're talk you know flexbox if you don't flexbox foggy check out my video it'll teach you flexbox the binder for everything is in a row in react native because it's mostly on well it's mainly for phones everything by default is in column so you have to tell it that you're actually going in the other direction right so in this case if we were to say like uh in this that we said Flex row you'll see the following so then it goes into a row okay but we're actually going to keep it as that just for now and I'll show you why right we're gonna say Flex one so I want them to use up as much space as they possibly can we're going to justify in the center uh we're gonna say item center with a padding of five and in fact I'm going to change this to padding y of six I want the padding on the y axis of six there we go and remember it's a scrollable component so that's pretty nice okay I'm going to give it a slight Shadow and actually to be fair you won't see a shadow because we're on mobile so Shadows We're not gonna do yeah if you want to add a shadow I recommend adding it in style as a custom Shadow right we're gonna round the corners as rounded OG cc is slightly rounded Corners now and then we're going to say space between all of the X modes S2 and you can also do um so this is actually when they're in a vertical sense right and so if I did Flex row then it would kick in you see space X oops Space X of like let's see if they ever did eight for example you see how they spaced out so I'm doing SpaceX of two but four Flex row I'll show you why I keep getting rid of it I'm going to change this to back ticks and put a curly brace and same with this and the reason for this is because I want to do some string interpolation here right my music just was done a weird Madness and cut off I don't know if that's me or if it's okay one second I don't know if that's can you guys hear me I think you can yeah or not let me see one second oh God something weird happened right one second all right I I can't actually see my music or hear my music and I don't know why and also my preview is looking a bit weird right so okay we are live just give me one second I'm just trying to figure out on my end why I can't hear my own music [Music] um today where that music is banging and then the music literally happened to stop so I'm gonna see if that okay there we go super weird I don't know what happened okay we're back all right so in this case um so strange right so we got we got back ticks and then we're gonna go ahead and basically add in a it's so funny because at the minute I saw Jay wrote the music is banging it just cut off I don't know what happened um so in this case now I'm gonna go ahead and say um dollar sign curly bracket so basically what I'm doing here is string interpolation right so what this means is basically if I want if I have a dynamic variable then I want to show I want to basically determine what star is going to get applied if that variable exists so in this case I'm gonna say if it's a vertical screen then I'm gonna say it's Flex column otherwise I'm gonna say Flex row right so in this case you see they're all vertical right um and they're all vertical um and that's strange because I don't have a more vertical I think in my home screen did I pass everything vertical [Music] okay let's have a look so I don't pass in these ones interesting right so in this case Flex column I think I have to say Max column yeah it's fine thanks bro okay interesting um I'll fix it refresh [Music] okay and then I'm gonna basically say the following I'm gonna say if another one here I'll say if it's um okay we're gonna do the locked status after we've actually connected the back end properly all right so my vertical is being a bit stranger so I'm actually going to go ahead and say that vertical oh that's why okay I had this little curly bracket here yeah so that's a super annoying right so you see you gotta be careful with that guys right so that's what was happening so um yeah so we've got the verticals working them out and the horizontal nice and then the Final Touch here is that in the home screen I'm gonna go to the two action rows here and I want this to basically go ahead and say J is the sigma J is a sigma so in this case um I'm gonna go ahead and put in a view I'm gonna pop in the action rows down here and then this one I'm basically gonna make this a come on I'm gonna basically pop this around native let's go do this and now with what we're going to do is basically make this its own Flex row box right so now you can see now I've only got those two in a flexible box and this is where flexbox is beautiful if you learn how to do it correctly okay so now I'm going to say justify the space between them and give a space between the two uh children of two right now the reason why this isn't looking the way I want it is I also want to give everything around here of MX of two so the action row all of the action rows should be surrounded in a view so everything up until the end of the action row should be surrounded in a view and that action row should have a MX of five so I'm gonna I don't want to touch the side right so so far I mean it's almost there something's really annoying me though right and I think that's just simply because I haven't added a margin around these which I guarantee it is and I think it is yep it's true it's because I haven't added a margin there which made total sense there you go bam and just like that we have our UI looking banging right and if I tap it touchable opacity is that's pretty cool guys smash the Thumbs Up Button hit 400 likes if you're liking this right now and we're about to touch on to the point where I can basically navigate to the next screen so a little water break let's go you know what's crazy is that I I saw the stats recently and so many of you are watching I'm not subscribed why just subscribe and then you'll get the notifications like come on subscribe um space wide is face white does work by the way yeah you can use face wire but margin 2 actually was perfect for the way I wanted it but you can use that yeah um there's not a better it just depends on the use case right preference right there's not a better one to use so in this case the screen uh we haven't decided to use yet okay this is it so let's go ahead and create our second screen right so I'm getting confused with all these designs right so now I want it when I click this it takes me to this screen for a demo screen right um so how do we add a second screen well it's fairly straightforward we go into our stack Navigator we copy the stack screen we paste it we basically pull this one the demo screen and basically what you will do is behind each of the different screens right so behind each of these different ones you'd have a workout screen you'd have a browse screen you'll have a connect screen you have an add exercise screen and you have different stack screens appropriate for each one okay in this case I'm categorizing all of them into the demo screen all right so very important point I just shared and then I'm gonna basically change this to the demo screen which doesn't exist yet so I'm going to go ahead and actually do this right now and I'm gonna go back to my song that I'm loving this this song right now all right this is such a Vibe when you cut let's see I was building this and this one came when I was like outside this is right yes the video is delayed with my sound I think but don't worry about it so demoscreen dot TSX our react native functional export bam and then we're gonna go ahead and get rid of this because that annoys me and then over here I'm gonna go ahead and import it like so and now what we want to do is we're going to click this screen I want it to navigate to me towards the next screen right so if I go to demo screen and I'm not joking everyone always asks me is this actually a newsletter that is there's actually a playlist that you use and it is a playlist that I use um I don't know why my music is doing this it's really annoying me why the hell is that happening um I think my something about my Bluetooth or something let me I'm going to restart because uh my later okay it's asked me to update not now let's okay there we go we're back cool all right so you got the view uh and then what I want to do is I want to navigate to that screen so I'm gonna go into the home screen and remember I was passing in a screen here right so what I can do is for the demo screen right now just to demonstrate that's fine so I'm actually going to go into my Apple TSA I'm just going to show you something if I remove the header hidden here for that one and I go back to my um action row right so these buttons basically now what I want to do is when I click on it I want to navigate me somewhere now the way that we do this is we need the navigation object right we need access to the navigation object now that's actually really handy is that we can actually pull that using a special hook so we can say constant navigation equals use navigation right now because we're using typescript you actually need to go ahead and actually enhance this a little bit by passing in a certain type of prop otherwise it doesn't know what screen you're actually pushing to so what we need to do now is basically pause go back to app.tsx and we need to basically start passing in our correct prop types right so over here this is where we basically need to go ahead and pass in the type definitions for our different screens so we're going to create something called the root stack parameter list right it sounds horrible I know you can name it whatever the hell you want but basically this is a type that we're going to export right and then we're going to pass in all the different screens here alongside with all of the variables that those screens can get passed along with in this case we've got three screens demo screen home screen and the paywall screen and yeah so in this case we're going to go ahead and take that in and we're going to go pop this here like so right so uh we've got the home screen payroll demo and then none of them are accepting any different variables that's fine right um so let's go ahead and Save and now if I go back to My Demo screen remember this bit Yeah remember that so in this case now what I'm going to do is on the demo screen I'm going to create something and this bit can be kind of nasty to understand in the beginning but I promise you it will make sense we're gonna have a type definition above and this one is going to look like this it's going to have a native stack navigation prop we're going to import the previous root stack param list and then we're going to say what screen this uh page is actually on so sorry I'm in the wrong screen right now um no this is fine I'm gonna no am I on the correct screen one second okay so this is going to be on the home screen so this is going to be a home screen yeah so in this case action rows are on the home screen so that's fine so navigation prop is basically going to get all of the screens and then we're going to say which screen we're on and then we get this navigation prop and we pass it into our navigation prop over here okay so now we have this navigation nice navigation object right Jose Felix is looking good so far or some stuff UK cast dial says thanks for your Publications I'm now a front-end developer and I work for a company in Turkey sick I'm writing a rewriting a career opportunity inside with three million members in real with react that is so cool man and uh there well done congrats and Jay screenshot that that is amazing right so in this case what we're going to do is we're going to say on press right now GitHub code by that beat me to it I'm going to say on press nice screenshot all right so now we're going to say on press I don't know why that is doing that that is so frustrating but it's like isn't it keeps pausing my music and I have no idea why it's doing that um okay anyway I'm gonna come back to that in a second oh there we go here we go all right so at this point I'm going to say on press and then I'm going to say Arrow function navigation Dot and then you can see we've got all these different options so navigate is the one I want and I'm going to literally say navigate to the screen that we passed in right now the screen is going to be different for every different uh thing so in the home screen you can see I passed in the demo demo demo demo those ones will work the one with the paywall uh where was it um oh we haven't done that yet okay it's fine all right so in this case navigate to screen so if I click it now look what happens guys if I pick track workout oh we get navigated to a screen and what you'll see is I can actually swipe back from that screen to the natural behavior there is there or I click back and as I mentioned before I don't like the UI for this so I'm gonna go back to my app.tsx and I'm going to disable the header here for that screen and you can do it default saying but I'm just showing you per screen at the moment so I'm going to do that and now you can see it's in the danger zone right so we're going to fix that by saying safe area View safe area view there we go boom and then copy that bam super review now we're in the demo screen cool so what I want to do now is basically quick little UI for the demo screen and I'm going to basically have my navigation object at the top so I'm going to import the necessary dependencies that we needed for that right so I've just explained this before but this is on the demo screen which makes sense then we're going to have the navigation object that we're gonna basically access so we're going to pull in our useful hook now we have the navigation object cool and then we've got the touchable opacity and but firstly I want to basically translate this to this right so this is going to be a touchable opacity button and then we're going to do the following with the rest now the first things first is I'm going to have a uh at the top here I'm going to have touchable opacity like so and then inside of here I'm going to have a text uh text row text like so and then this text it's going to say go back yeah and on that go back I'm going to have an ionic on right and you can have different types of icons I just stuck with ironic on series to keep the UI consistent but wherever Expo icons has you can use right so as you can see it's white right but that's because the background I still want to change it to be a custom background color and in this case I'm going to take a custom background color of uh this nice orange color right so in this case I'm going to basically make it my own custom color and as you'll see it doesn't stretch all the way down which is kind of irritating so in order for it to use all that room you say Flex one and then it will say I'm going to use all of the space I could possibly can right Sebastian what's up dude good to see you in the house all right look at this um that's really nice so far and then we've got the text here at that bit I'm going to go ahead and change the text to say class name and it's gonna be text white and [Music] um the final thing is for the touchable opacity oops I'm going to say it should be Flex row right and I want to item like I want to centralize the item so I am saying this look at this that's horrible right where do items Center now it goes next to it and I say panning of five and we should have a little bit of breathing room that's nice all right now if I click here it doesn't do anything right but I want it to simulate the back button so what I do is I go here I type in on press and then I have an arrow for oh actually what we can do here is because I'm not actually passing any proper property I can pass the signature of a function and it will invoke it for me so I can say navigation dot go back right and that will do just what I want so now I'll go back boom hey look at that DJ Mark says Papa fam for life that's what I'm talking about yeah look at this oh nice all right now we've got our screens looking pretty good so the next natural step is to go ahead and pull in the view so I'm gonna go ahead and pop in so for the next bit I'm not gonna spend too long on this area the reason being is because it's just a UI bit right so I'm debating maybe just to even pull that what I did here to basically save us some time but basically I've just got a bunch of icons a bunch of text right and this bit is not really that important you can put whatever you want there the whole point of this screen and I'm going to just pop this on the screen right now so you can see for yourself what I did but basically I just popped in the following right so I go with the demo screen and I popped in this so you can pause the screen and really just this is my example demo screen but really what you would do is you would replace this demo screen or each of the screens that you would navigate to with the actual app functionality this is purely for the demo part so in this case I'm just going to go ahead and save I'm going to go back and now you can see we've got access like so right but in this case we haven't set up our padding in the exact way that I would like and that is because I have not put everything inside of a view correctly I don't think I have actually oh no that's actually fine yeah that's actually fine that is good that is what I wanted it's just a smaller phone right so in that case hooray you have access to this feature this is where you can create a new screen blah blah blah and do all the stuff that you need to do okay so that's looking pretty nice so far yeah so in this case that's actually pretty damn sweet so we've done that bit we've done that bit now I think we should move over to the payroll screen right so now I'm going to implement the paywall screen and we're going to go ahead and get everything hooked up the way we need it so first things first let's implement the paywall and then what we're going to do is actually make it a functional payroll so that way you can actually see uh if you're a pro member we're going to create a custom hook as well in today's video so we've got loads going on today right so make sure you do smash that Thumbs Up Button we're almost at 400 likes this stream is going so damn strong right now right so first step we're gonna go into our screens we're going to create one more called paywall all right this one's gonna be called pay one and as you can see how the hell did it know I'm writing or it knows that because of my type definitions at the top which means it will stop me from writing a random gibberish screen you'll say whoa you can't do that because we don't have a screen called pay like that one right it's a paywall there you go it also helps get up co-pilot and now I need to make a paywall screen okay so in this case the payroll screen I'm gonna go ahead and create a payroll so in this case I'm going to go ahead and say pay or uh actually lowercase w paywall.tsx there we go react native functional export component bomb get rid of the react bomb and go over here back to our app and import the paywall paywall now for a paywall can you see how it comes up slightly different right this is like a modal it's very different to what we're seeing at the moment right um so in this case this modal that's super annoying I don't know why this Bluetooth connection is kind of cutting up um let's let me do it again there we go okay so um we've got this um yeah this pay one you can see it's actually a model so I want this to swipe up from the bottom when I click it right uh GG Max is probably changing the game level up tutorial content changes lives by the minions that's what I'm talking about that gets me so hyped when I see so far because that's what we are trying to do that's the mission right so let's go to paywall and what I want to do is remember we actually have already hooked it up in such a way that if we click one of these down here oh no we actually haven't got anything directing to payable yet I guess right but if we were to go for example and connect this to a paywall button let's do that right so in this case I want this to connect to the paywall so as our first step so let's go to our app our home screen and let's go to the touchable opacity and say firstly remember we're at the home screen now so we're going to need access to the navigation objects which means that we're going to have to do our neat little navigation prop let's pop that in over at the top so far so over outside like soap um import it like so root stack parameters bam and we're also in the home screen right now hence why I'm doing this but if I didn't do that I can actually go ahead and see I can like it shows me the screens and that's all based on what I've done as the type definitions earlier right so check this out uh sudanation says is it possible for me to do react native if I've done react before hell yes 100 yes right and six like six likes away from 400 smash it just destroy it right so go ahead and hit save and now we can see we've got the uh well nothing visible right I'm gonna add in the navigation object let's go pop that in like so we need to pull in our hook there we go and now on press of the touchable opacity button here I want to navigate so I'm going to do a narrow function say navigation you don't navigate to the paywall okay now let's go ahead and try out if I click this now pow all right so firstly that doesn't look like a modal Sunny that looks like a screen that you've disabled the header for and you're right that's because that is exactly what it is it's a screen where I've disabled the header for it and it's a bit of a pin in the um something to go back right so okay so I'll kind of get it back there we go all right um so in this case I'm going to go back to app.tsx and here I'm going to basically do something now so what you can do is you can actually change the presentation type so in this case it's called header shown photos which we want to keep but I can actually change the presentation to a few different options you've got contain model these different ones full screen model I want the card model right so in this case bam I hit the card model I hit the model sorry and then I click upgrade and look at this oh nice now I get this like swipe down beautifulness right so look at that so we swipe down oh so clean right let's look at that so everything just works the way we wanted it right and then what I want to do is have a little X icon and all this kind of nice styling so we're going to go ahead add The Styling and then these buttons will generate based on the actual things that we pull through afterwards once we're set up right so I am going to go to my paywall and I'm gonna go over here to payroll and I'm going to start styling out this thing so I'm going to firstly change the view to a scroll wall scroll view view I don't know what I'm saying that on review and I want to get some new songs in here let's go down to the bottom let's do some there we go that's better all right and um oh my God three legs away let's go all right so for the scroll view I'm gonna say class name and we say BG and we're gonna change our backup a nice little color here and I'm gonna say Flex one as well so just like so yeah and then for this instead we're gonna get rid of the text we don't want that instead I'm gonna have a view with a text button saying upgrade to Pro to access all the features so again I'm not going to show you exactly all this little bits and Bobs like this because that's very like easy to follow right I'm just adding two text Fields inside of a view with a bit of spacing right and I'm making an uppercase makes it all capitalized uh boom 400 likes that's what I'm talking about that's it that's only as soon as the beat dropped us up that's so sick all right and then we're gonna go to touchable so we're going to create a touchable opacity to basically close it so touchable opacity and in here I've got a nice ionic on all right so ironic on pop this in like so and then at the top I'm gonna import it so let's go up to our oh okay over here pop it in like so save and now you can see I've got a nice little X and I want to go ahead and say unpress so here we're gonna go to we're gonna go ahead and pull in a navigation prop native stacked navigation prop group params and this time we're in the payroll screen that's why it's going to say paywall uh and then we're going to add our navigation object in because we're going to need the navigation right pull this in like so use navigation cool and then I'm gonna basically go to that little X and say on press I'm going to say navigation dot go back and again signatures that way you should just work so in this case upgrade to Blue X and it goes back nice oh yeah this is awesome Jean-Pierre Casanova says are you gonna upload together yes I am I just didn't upload it yet because I didn't want everyone to just copy it like the code before the video was live right um but yeah we will be doing it okay so at this point let's um let's get this let's get likes to 500. oh bang let's get to 500 let's go all right so inside of the paywall now I'm gonna go ahead and add in the um content so this bit right so we got the view so this is going to be all the content that you see basically right and then over here so now we're gonna go ahead and pop in a bunch of text so this one again is just gonna have um so I've basically got three repeated sections here each with different styling and I'm just going to basically pop it in for the essence of time right so that way you guys can get kind of a you don't have to spend that long on copying me here for that right so basically this is the first chunk and I'll show you what that did so you see what I did here so it basically popped in access to All Pro features the second one I'm gonna pop in and this is just literally views and text boxes that's all it is right so the first one was that and then outside of that we've got the next block which is again the exact same block so you can feel free to go ahead and pop that out in a different way or make it into its own component and then the final one is going to be another block again and they're all just different icons and basically different bits of text that's all it is right the only thing I do that is bothering me so much right now is that button styling because I forgot to completely forgot to style it my bad right so that button right there I'm gonna go ahead and say they should be absolute it should be top zero it should be right of zero and if you're padding up five yeah there we go and now you should see there we go that looks pretty good we forgot the logo I literally forgot the logo so just adding the logo here in this case I'm gonna go ahead and have a View with a material oh yeah so in this case uh the reason why I'm doing a view here is I'm not doing a picture logo I'm actually using a different type of uh icon here so material Community icons and the material Community icons is an example of how you can use different icons not just icons in this case we've got the material icons and Trophy award 150 and then I put in a view because I want to basically go ahead and Center it so in this case I can go ahead and just say items in the center of this View and Bam it works okay now for the content lock I'm gonna go ahead and pop in the following with a space between each y component of five so that feature asked previously at space y work yes it does panning X of uh 10 and a panning top of five allows us to space out give us a bit more breathing room and a padding bottom of five as well now because we've got padding bottom and top of five we can shorthand this to padding y of five and that's a cleaner way to do it okay so this is looking pretty neat so far very nice okay and then what I'm gonna do now is basically I am going to add in these two buttons actually what I want to do is I want to add in the buttons as we do that right so what I'm going to do is I'm actually going to pop in here is I'm gonna have one button which says monthly subscribe I'm gonna have another button which says annual subscribe and then I'm gonna have one more button called restore purchases okay and that's gonna be these three all right that's these ones okay so now this is where it gets intense right so um so it's the worst that your live streams full in the Midway check out after the weekend is what honestly dude it's probably best you catch you even afterwards because we actually time stamp it as well but it's awesome that you actually got a chance to catch it live right so um let's see so I hit save and now we got this so basically all of our screens are prepped in the way that I want and I'm actually gonna have it so that if they're locked it's also going to be uh sending me to the paywall right but the payroll but I'm gonna determine if I'm locked in a little bit when I basically can figure out if you're subscribed to Pro or not so this is where we bring in Revenue cut right so Revenue cat is as I mentioned before the platform that we're going to be using to handle our in-app subscriptions okay and the reason for this is it makes all of the you know the the sort of connecting the things that we need making sure that we're listing the correct offers all it makes everything around the subscriptions fairly straightforward now the first step that I'm going to need you to do and this is a bit where I'm going to need you all to basically Focus all right I need everyone to kind of you know dial in now right so at this point I'm going to be showing you the App Store connect right and I say that with like some some whoa the App Store connect because it gets a bit more like you have to kind of around the little details here because there's a few areas where you can slip up so make sure you just take your time if it gets confusing pause it rewind it watch your back whatever you need to do to get it right now I want to mention the App Store connect you need access to the developer program in the Play Store I believe it's free so you can follow the Play Store and use the docs to basically get the Play Store working but I'm going to be showing you the iOS version of it right so if you want to go ahead and check that out there's a lot of tutorials already on YouTube up about that and again as I mentioned if this gets over a thousand likes I'll do one for Android as well right so what we're going to now do is basically set up the app store connect right so in this case App Store connect is basically a suite of web tools and we use it to basically manage all of the things like subscriptions all of that stuff right so at this point we actually need to set up our subscriptions on App Store connect and then we have to set up on Google Play and again I'm not going to do that I'm only going to App Store connect and then what we do is once we have all of that data set up on the actual platforms we basically give our special keys to revenue cap and revenue cut is where we basically carry on the rest of the things right so first things first is I've actually gone ahead and paid for 99 for an app store developer account in this case I've actually so I'm going to go ahead and sign into App Store connect so let that sign in for a second and again if you haven't done it it's completely fine you can go ahead and there's nothing to freak out about right um You can uh you can just watch this tutorial or you could be doing this on Google Play if you want to okay so we're going to go to App Store connect so at this point I clicked over here go to App Store connect and then I'm going to go ahead and log into my account so in this case I've logged into an account and basically when you do the App Store connect you're going to have to agree to the terms and conditions you're going to have to set up your Banking and that's going to allow you to enable certain things that you're going to need to do like deployments that kind of stuff and you obviously have to pay the 99 right so at this point we click onto my apps and I've already got some dummy apps here but I'm actually going to go ahead and create one so I've got a revenue app Revenue cap this is one I used when I Was preparing and this was like a mess around one so what we're going to do here is create a new app okay so really try and focus along now please yeah because it gets quite intricate so click on new app and then we're going to say it's going to be on iOS right and the name of this app is going to be let's go ahead and do the following I'm just going to say um let's pop in something like revenue or let's just say YouTube Revenue YouTube demo right so my YouTube demo that's it all right cool easy as primary language we're going to say is English and I'm from the UK so UK in it and then we go ahead and do this and you can see bundle ID now in this case the bundle ID we don't actually have our app deployed yet right so here I must actually use an x square computation fastboot okay so in this case we actually need to go ahead and register our new bundle now what we actually have to do is deploy this app first and get a bundle up right so I'll show you how we do this so I'm gonna pause here go back to our code where the heck is my editor okay yeah back here and this is where EAS comes in so the Expo application service right so at this point we're going to pause on our app development we're going to handle the nitty-gritty stuff I'm going to go back to where is it gone yeah okay and over here so EAS build yeah submit that kind of stuff right so I'm just double checking my notes as well because it does get a little bit confusing right so first things first we need to create a test device right so I'm gonna go ahead and basically connect my actual phone as a test device for this build so that way I can actually go ahead and do things so inside my what the heck is it right so inside my code I'm going to go ahead and do EAS device colon create okay and at this point what it will do is it will pop up and it was okay there's an update right so I'm not going to jump with that's fine I'm going to use the one that we already have and you can see it says would you like to automatically create an EAS project for a revenue cat app YouTube which is the one that I am in right now so yes I'm gonna say enter growing Revenue count on Expo cool and now this is basically the interesting part so this command is basically um I think local project TS project yes there you go this command lets you register Apple devices for internal distribution of your app which is basically how we're going to test it so what you're doing is you're deploying it to your internal distribution Network which is in this case us right so we need to go ahead and create an export account so at this point if you weren't logged in you'll be prompted to log in I've already logged in so I'm going to go ahead and enter now we need to log into our Apple developer account now this is where you and I expect a lot of people to kind of you know at this point you either watch on or you're going to basically get the US dollar App Store connect subscription fee but at this point you would have to enter in your app uh store developer Account Details so in this case I've already done that I've already got an app store developer account so in this case I've done that and then I've actually logged in so it's gone ahead and used my login from my keychain and now it will say what account you want to do so my main account is my name and then you've got what the reactive entrepreneur is my podcast so that is also an Apple product that we have right so it's a podcast and if you haven't checked it out definitely go check it out I'm going to do more podcast episodes so at this point we're going to go ahead and do uh my name so we're going to go ahead and Pop That in Sergeant Sanger and then it says how would you like to register your device okay so at this point you've got a few different things that you can do but the easiest one by far is to click website okay so if I go ahead and click a website now it gives us a QR code with this on it so what I'm going to do now is I'm going to show you my phone so I'm gonna go take you over to my actual phone so where's my phone there we go boom okay and now I've got my phone in my hand right so there's literally a live example of my phone right so I'm gonna go to my camera right I'm gonna go here and I'm gonna say Expo Dev and this is gonna pop up a screen saying export Dev set up your device for internal distribution and then it says download profile so at this point I'm going to click download profile and it says website is down try and download a configuration profile I'm going to click on allow it says profile downloaded review the profile in Settings app if you want to install it so at this point I want you to head into your settings right so I'm going to just um hide my screen for a second while I go into my settings I don't want anything to pop up they shouldn't so in this case I'm in my settings now and I'm gonna go and type in the following I'm going to type in profile okay so the easiest thing that you can do at this point is go into your settings I'm just typed in in the settings app so I've gone to the top and I've typed in profile then you have VPN and a device management click it okay so at this point I now have a VPN so in this case it says VPN screen and it says downloaded profile here register for development I click it and as you can see I've got the profile on my screen okay so now you can see I've got the profile on my screen and what I've essentially done here is I've basically gone ahead and enrolled in it and I've already installed this so I don't need to install again but if I was to do it you can see I can pop in my password so in this case I pop it in and then install right so the install will come up now I've already done this so I'm not going to do that okay so at this point you should then have your uh register for deploy uh the development right so once you've done that you also need to make sure you enable developer mode so I'm going to show you how to also do developer mode but once you're on your phone go to your settings and then you want to go to let me just find it again um this one I always actually lose where it is oh yeah so you want to go to privacy and security okay I'm just trying to check there we go yep so you want to head to privacy and security tab next you want to go all the way down to developer mode hit OK and then you should be able to enable this right enable this setting because this is going to allow us to install internal distribution apps onto our test device or iPhone okay so um oh wow Calvin says before I go to work I kind of some videos back with his videos uh back in the day I'm now a full step developer and it's down he's the girl thank you dude I appreciate you and that's awesome right um that's not smart man thank you so much right so at this point we've got this so I'm gonna go back and then you're also gonna have um where did it go okay that's fine for now for now for now that's completely fine yeah so once you've done that what I'm going to do is I'm going to go back to my previous apps just to kind of have a place over there so now we've registered the phone okay so now this phone will be up to accept you know um something if we were to push it to the distribution Network okay so everything's good on that front uh let me move my there we go move my code back okay cool so now that that is done we've added our device so our device has now been added successfully and then what I need you to do is go ahead and we're going to go ahead and build create a development build for our app and the way we do this is we go ahead and say EAS build okay then we're going to say dash dash profile development okay then we're going to say dash dash platform iOS so I'm building a a development build for the iOS platform okay hit enter and then you'll see it will go ahead and it will start something called our iOS um internal distribution build now this is the important part remember where it said you needed a little bundle identify we didn't have that right in uh in the App Store connect settings this is where we basically do it so in this case I'm going to leave it as it is revenue count app YouTube and then I'm going to hit enter okay and then in this case it will say if you provide your Apple account it will be able to generate all the necessary broker and fully validate them blah blah blah in that case I'm going to say yes it makes my life easier so I've already done that so I've already got my Apple account again this will fail if you haven't got the app store connect developer if you haven't paid for your developer fee where it's a 99 or it depends where you are in the world but that's what I had to pay and in this case you can see we've got all of our stuff and then we have basically will ask us to create a distribution certificate okay so in this case I've already created the distribution certificate you in this case will actually have to do that so it will prompt you at this point to do that I've done that so I'm going to go ahead and hit enter so to reuse my distribution certificate then you see select devices for the ad hoc build now this is the important part that's my phone right so in that case my phone is now registered so from the previous step that's why it's there okay so I'm going to go ahead and hit enter now and then you can see handling unlock provisioning profiles basically it's just securing it so only my phone is going to be able to use this app right um there we go and then it gets pushed out Bam Bam Bam all credentials are ready to build would you like to set up push notifications no not for this one yeah and then we're going to upload to EAS build okay so now this is uploading to es build and this is basically where it gets queued for a build okay so let's go ahead and check this out now so if I go to this link right here what we will see is we will see this being built on I'm just waiting it load on another screen and I'm going to bring it over to the screen so right now what we can see is it will take me to this screen and you'll see that this is actually going to go ahead and build out an internal distribution build now the confusing part is you're probably wondering hang on a minute so I have to I have to rebuild and deploy every time I make a change in my app no the actual crazy part that's really cool here is you do this build once right and then what you do is you basically open the app up on your phone which I'll show you how to do right and then what happens is as you update the app on your phone because you're running Expo stock right so it's running a server on your local machine because you're on the same Wi-Fi network it streams the updates to your phone which is damn cool right so you're developing and you're literally seeing the streamed updates to your phone it's so cool right so it's actually uh I was pretty mind-blown when I saw that right so this will take a minute to go and deploy so we're going to let that do its thing right and in the meantime we're gonna go back over to Apple to the App Store connect settings right so in this case the bundle ID and here you can see if we go cancel I need to basically refresh all right yes oh that's a very good point ggmox says keep in mind if you add any modules or packages to the project you need to rebuild 100 right if you do any uh yarn or you know like are you add in a new dependency or anything like that or for example you added in Tailwind right then you have to do that yes build step again because there's new dependencies that have to be built I can't just stream the entire dependency and has to build that in the bundle it can stream the UI updates but it can't stream like entire dependencies so in that case yes very good comment thank you so much so that's why comments are so important for you guys to interact with me right so in this case we'll create a new app I just want to see as well let's get bundle ID hey there we go guys Revenue cat app YouTube that's the one that we have awesome stuff uh someone says take a walk or break you look tired I will thank you very much right I will have one in one sec so here we're going to type in just YouTube demo iOS YouTube demo app right primary language is English UK and then skew uh this is a YouTube uh demo I really don't make a difference uh user access um you can introduce yourself okay possible uh let's just click on I think I did four access right now but um okay let's do four access for now okay I'm gonna have a quick water break and you guys should too as well right so that's going to create a new app in the app store right oh we have our first app in the app store guys smash the like button almost at 4 50. right let's keep going okay so at this point now you can see down here subscriptions all right so this is where we start getting really fancy all right so we start doing some crazy stuff but basically what we now need to do is create a subscription right now you can also start messing around with in-app purchases for single purchases that kind of stuff but we're going to be covering subscriptions today so I'm going to go to subscriptions and let's just have a look on that build one second okay so you see that builds building it's gonna take about 10 minutes so in the meantime we're gonna set this up so this is where um Revenue cat and the next bit go hand in hand right so what we're going to do is we're going to click on subscription groups right what I'm actually going to do is just have a reference open on the side so I can teach you in a smooth way I don't make a mistake that's silly um it's published for now no so basically Kirby asked a good question so right now it's basically deploying to an internal distribution uh it's basically making this end deploying an internal distribution build but only my phone can access that because of the way I added it to my Eis Network earlier right so you have to add the provisioning profile to be able to access that and then you also have to enable developer mode okay um so quite important yeah um still in Dubai yes I am Simon so in this case subscription groups let's click on Create and in this case we're going to create a subscription group and here what I'm going to call it is let's call it our Pro subscription okay Pro subscription let's call it and click create this is a subscription group so you can have different subscriptions inside of it now inside of here I'm going to have two subscriptions one is going to be Pro monthly and one is going to be Pro annual so here I'm going to click on Create and this one's going to be Pro monthly product ID here let's go ahead and say this one is just going to be our Pro right so I'm just going to call this one pro and then I'm going to call the next one pro annual right so um thank you so much MK because doing so much good bro appreciate how many effort you put into these I really appreciate that comment thank you so much right so we're going to call Pro monthly Pro and then Pro annual is going to be pro-annual right so let's go create uh oh I've already done that yes I've already got an app that's doing this so I'm going to say Pro monthly let's just do pro-monthly and pro yearly okay so Pro monthly there you go actually probably easier to be fair it's probably clearer right now we've got this now this is the important part okay so we have to fill this out correctly now the subscription duration is going to be for one week right so in this case I'm sorry one month right now uh um this bit I want you to kind of take your time go through it uh someone goes I want to come to Dubai just to say hello all right so in this case all right you guys do crack me out right so you got one month right so it's a monthly subscription and then we're gonna go to subscription prices right now this is where you can have a localized pricing so in this case we're going to go ahead and say um Derek what's up man good to see you back dude thank you so much add subscription price and in this case we can add in you know different prices that kind of thing so let's just imagine our monthly price for this app was 4.99 pounds right you can say whatever you know region uh you want click next and then look what it's going to do it will calculate the price internationally now this is something I really actually like about the app store is that you know for example if you wanted to make it cheaper in a certain country you can actually go ahead and do that so for example I know in some countries especially um when we have I have certain audiences who basically want us to reduce pricing in certain countries you can definitely do that right so you can definitely do that here and you can make it cheaper in some countries you can make it more in other countries whatever you decide it's up to use your app right so in this case we're going to do that we're going to say next and this is what we're doing in all these countries you click confirm make sure you're looking for it and then confirm you can also download it all right let's just do that and then uh uh nowhere else do you get professional advice oh thank you so much and a full package changes again with every religion Pub fan Legend that's it awesome stuff and I'm so happy you guys are enjoying this as well that's amazing right so you can see current pricing for new subscribers good stuff and then we've got App Store localization right so in this case you can actually go ahead and change how it would appear in different areas of different apps for example right so in this case you can go ahead and pop in um so localization so how it would appear in Arabic how it appear in English and so forth so in this case imagine we had like um Pro monthly discount right so Pro monthly sorry subscription So Pro monthly and then you could say something like let's just say Pro monthly so a pro monthly subscription to access Pro stuff the access bro basically yeah so basically you can you can base uh keep saying basically sorry about you can you can go ahead and change all of that so basically in all of the different stores it would say different things I'm going to try my best to not keep repeating what I just said right so then you need to base then you need to take a screenshot of the app okay so in this case take a screenshot of the app and what I've done here is I've already got a screenshot of another app or I've honestly just taken any screenshot here but really what you can do to really kind of easily make your life super clear here you can just go ahead and go click and then that would take a screenshot right so that's if you didn't know that you can actually do that fairly straightforward so I've done that here and obviously what you should do is actually make that relevant right so make that a relevant screenshot not just some random one like I just did and I'm just going to try and find where my actual um screenshot went so I'm not sure why it just disappeared for a second um let me just go ahead and I'm just hiding my screen for a second to help you I'm not sure everything yeah so that's a click quick way to clip a screenshot and then here I'm just going to say test uh app development yeah so obviously in the real world you would add like a pro screen or something like this and then actually explain you know this is for pro it's gonna have a lot more um it's gonna have a I don't have to go there's gonna have a lot more description here about what your pro offers right if this is an actual production app you would obviously put a lot of time into this point and then do that right so we're gonna go ahead and hit save cool and then Patty says I was so curious about how to connect mobile apps to the App Store this tutorials and scene thank you so much I'm glad you're enjoying that right Family Sharing as well you can turn on here and I think it was here that I did the other step as well for uh trial I think it was here no was it that wasn't a different bit I think okay but anyway we're gonna go back so we've done that bit and basically you want it in a oh no so if it's missing missing the error it's not good it should be in a ready to submit State uh add localizations we need to do so add localizations foreign oh yeah so at the top level we need to add app store localization so in this case subscription groups we can just call it pro um monthly oh no sorry Pro subscription um keep it as the app name custom name blah blah in this case is the English customization but obviously you can add as many as you want and I would honestly say you should right if you have an Arabic audience you want to allow your Arabic audience to see everything in Arabic if you have a Indian audience you don't see everything in Punjabi or Hindi or you know any language you want french Spanish whatever you want it's all going to be here that's where you add in the different languages okay so now we're going to go ahead and pop in another one we're going to say Pro annual okay and then here or Pro yearly let's call it pro yearly right and this one's going to be called pro pro yeah Lee okay and click create okay and now you can see that's about our subscription duration is one yes this will be a yearly subscription and we're gonna do the same thing right so in this case let's imagine your yearly subscription was like 30. 84.99 I say it'll be cheaper to subscribe yearly than it would be to annual because obviously that's the way it works in most cases we're going to confirm all of our pricing options and then let's just go ahead and check on our app build so you can see that's got five minutes remaining so we're doing pretty well guys it's actually really good this actually worked out very well right App Store localization and also by the way you're you're probably gonna have to fill out your taxes and all that kind of stuff when you set up your app store connect account okay um reports on what's up dude absolute localization let's do it here so we can say Pro yearly and then description we can say uh your access to Pro yearly subscription okay like so aliyatan says hey man uh Alton sorry I completely messed up hey man thanks for everything I did one of the tours but couldn't deploy it but I still learned a lot from you much love from turkey or some stuff if you can't deploy and you want help remember you can always join zero to full stack hero the community it's awesome for helping out everyone get over there hurdles right and same thing over here by the way uh we're gonna add in a screenshot so I'm just going to add a dummy screenshot for now and remember there actually has to be a correct sort of um has to be in the correct Dimension right or the correct resolution so that's why I did a direct screenshot from the phone itself and it will tell you that it's incorrect if you're not giving it a correct resolution one right so I'm going to say Pro yearly subscription test right so obviously it should be fully thought out right and then we're going to click on save I believe so say yep that's all good save okay this is doing well come on guys well oh we've just put our past 450 likes nice okay so save and hit back so subscriptions now we've got our Pro Monthly our Pro yearly this is good um and then we go back to subscriptions and you can see now we've also got one where did I add in there's also a way while we're waiting for the app to get deployed there's also a place where you can actually go ahead and add in a free promotion like a like a weekly trial or something like that uh I'm just trying to remember me for the life of me where I put it I think it was in uh subscription underneath subscription no I think it was in oh it wasn't there just trying to find it guys one second oh monthly was it in Pro monthly I'm just checking my previous build okay and then okay well I mean we're touching it in Revenue count I believe it could be in Revenue cap I'm sure it was here though but anyway we'll come to that okay so now we need to basically go ahead and prepare to connect this to revenue cap right so once we've got this done you need to go to users and access right so click on users and access and then you should have this area right so you've got me you've got sandbox testers so this is important now guys so this one you okay now I stress this when I say this use a different sandbox ID compared to your normal Apple ID right and then when you have your sandbox ID you actually have to set that up in your your iPhone settings so the place to do that is actually in so I think it's uh let me see where is it so I'm saying so where the hell did I put it um is in okay uh I will find it basically it's in developer mode saying so developer mode it's in if you go to privacy and security it's in is in developer mode yeah okay strange but I can't find it for some reason anyway there's a there's a point where you need to find it right and we will find it so don't worry I'll definitely find it afterwards okay so at this point I want to go to um here and I want to basically create a Sandbox tester so I've already created one and I've done UAE right because I'm in Dubai right but obviously that's why I was seeing durhams right with the currency here when I was um trying to purchase now the really good thing about this is that basically you can have a you know an um an email and a password and basically once you click edit and you click it you can click on clear purchase history now what this does is it simulates you never having bought the test subscription in the first place so you can try the subscription out then you can click on clear purchase history and then it will basically go ahead and act as if you never did the subscription right remember obviously it's all fake anyway it's less than sandbox mode right so that's important and then we're going to have keys now Keys is obviously our next important thing so if we go to in-app purchase you can see we've got a subscription key right so this is going to be important as well in just a second as well so firstly let's go over to our Revenue cap so Revenue cat is the place to be this is where we're gonna basically set everything up to make the whole app work so we're going to go ahead and log into your Revenue cap so I'm going to log in right now and you can see I've already got a few projects here right now we're going to go to projects we're going to create a new project and we're going to go ahead and call this one YouTube Revenue cap demo okay create project now in this case we can start by adding an app so it's super easy to actually follow the instructions okay because almost a 500 likes that is sick all right keep going um so change that so in this case we're going to go ahead and do apps and remember you can actually hook up App Store Play Store stripe and Amazon in one place which is damn sick so we're going to click on app store then we're going to go ahead and type in um just just call it YouTube YouTube wherever you got whatever you can't it doesn't really make a difference right and then let's go back to our so the uh bundle ID is quite important right so inside of our code what you will find in EAS dot Json is n't Esther Jason no it wasn't here it was Jason I think no after Jason yeah so iOS bundle identifiers here okay so there it is you want to copy it from app.json bundle identifier and then you basically want to go back to overhead and paste them okay now you've got App Store Connect app shared specific secret so if you click on I will say what the hell is that and it'll tell you basically where to go to get so in this case we need the key so all we need to do is go into your app store connect my apps select your app app information General manage and then you should see app specific shared secret so I'm going to go into it right now so I'm going to go into the app so let's go into our app so this is my demo app then we're going to go into was it services up information yes okay I found it yes app information on the left and then we're going to go to app shared app specific shared Secret click on manage and then here generate so I'm going to click generate and I'm going to hide my screen so I'm clicking generate and what's happened is it's given me a shared secret so I'm copying my shared secret right now right so I'm smashing the copy button and make sure you note this down because otherwise you have to regenerate it if you if you lose it okay so I've copied it now then what I'm doing is I'm going over to my revenue account now okay so I've gone over to my Revenue cap and I'm going to click on set secret and I'm going to paste in the value here and then I'm going to click set okay so I'm pasting in the value and I'm clicking set and that's it right so I've saved it my secret now then you've got in-app purchase uh we don't need to do that right now but eventually you will need to put in a p8 file from App Store connect so I would Google that once you go to the the actual um full deployment you're going to have to have that right so we'll do that there or you can do that in another tutorial I think for now we'll save the changes we'll go over to you can see now it's Paula pulling everything in let's go to API Keys um we've got a key over here so this is going to be our public specific key so in this case this is a special keyboard and I actually need to use very shortly okay um and then we're gonna go over to oh yeah here this is where the magic happens right so products offerings entire months right so these are different ways in which you can go ahead and pass the basically your app information right so think of it this way products are going to essentially be the lowest level they're going to be essentially the in-app purchase the in-app subscriptions so in our case here what we're gonna have we're gonna have different products for different reasons now I'm just going to quickly make sure I get this 100 way so I don't make a mistake in teaching this well what we essentially have is four products we're going to have Pro monthly and pro yearly okay so let's go ahead and click new and you can see we're clicking on our YouTube app and here now the identifier is very important remember previously what we did was we set up our subscription so let's go back to subscriptions inside of subscription groups you can go ahead and see these two product IDs right so subscription Pro monthly Pro yearly so you want to take the ID this is very important you get the idea right you're going to copy the identifiers we're gonna do monthly first create a product okay this is the lowest level right now we've got this now you've got entitlements right and you've also got offerings right so in this case we've got entitlements we've also got offerings so the first thing we want to do here is we want to have um where is it so we need to create a entitlement here and the entitlement here is going to be the pro monthly this is going to say pro access to all features Right add and you can see it says zero products we go into our products we attach the association to it there you go okay now the way that I like to do is you can do it with endearments by offerings is kind of the simpler way to do it so offerings are basically a selection of products that are offered to a user on a paywall so you can do entitlements are slightly different they're basically represent a level of access right um so if you see pro access and so forth right so in fact I made a mistake here I actually did it as oh no I did a mistake here oh yeah that I did so okay so in this case folk don't worry about entitlements for now we're not doing that we're doing more so on the paywall side of things so go on to paywall and offerings and we're going to go on new okay now for the paywall here we're gonna call this um Pro okay and we're going to say the pro membership um Pro membership subscription okay and then add and now as you can see inside of here we're going to have two um packages inside of it one is going to be for monthly one is going to be for annual okay so inside of here let's go ahead and add in the monthly so in this case identify our monthly you see this custom and we're going to go ahead and say Pro so just Pro monthly is here okay and you can see what we do is we attach the product to it so in this case I attach my monthly product to it so that's it that's the easiest way you want to do it so offerings then we have Pro and inside of here we'll have two selections each one is going to be attached to its product so monthly and we need to make a yearly now so let's go ahead and do the same thing for the app so we're going to say Pro yearly this was the same thing we did here for pro yearly okay create product and now we go to offerings we go to Pro we go to oh no sorry go back uh yeah Pro sorry and create a new one called identifier is yearly so annual then we'll say yearly uh Pro subscription basically add oh my God that's gonna bug me so much right there we go pro yearly there you go I didn't think it was undoable but there we are there's no need to freak out Pro monthly Pro yearly and then I'm gonna basically attach it to the pro yearly there we go so you see once you connect all of this up then you can basically we we connect it we set it up correctly the first way the first time so products then offerings is what we're doing we're not touching entitlements today okay so products and offerings is what we're doing and then you've also got your Integrations experiments a b testing all that kind of stuff okay so in this case um for this it's got no Associated timers for now that's fine Okay so now what we can do is I believe actually you know what we should actually pass this to so for now just to get rid of this error I'm gonna pop in I'm gonna say this is pro access right just entitlement Pro and Associated products are pro yearly and pro monthly okay because if you're yeah so you can either do it by entitlement so in this case a level of access So Pro for example it should be Pro why is that called Pro it should be I have I didn't updated no oh the description only change okay so really I would have named that Pro and then I would have had Pro monthly per year but anyway you should the easiest way is products then offerings set up your offerings okay cool now that that's done I think we're good to go on this front okay here we are State Building progress so now this build is almost done good stuff all right it's quite it's faster the second time it's just obviously it's got cash here the first time okay so now that that's good what we're going to do is basically start coding the the our app to get it all in the correct state that it needs to use okay so let's go to our code and let's start creating things as we need it so that way we're ready when it's when it's deployed okay so I'm going to create something called a custom hook okay so in react this is a very good thing to know how to do so we're going to go ahead and do that right now oh we're almost at 500 likes let's go guys absolutely incredible we're going to create a photo called Hooks and I'm going to create a file called use Revenue cat right dot t s all right and now in here oh no sorry this is a typescript yeah dot yes um let's just put an x on it for now because I mean you could potentially right so in this case here we're going to have a functional component so really all this is is a react native functional component oh it's actually just a it's just a function right so it's a function and we're going to call it use Revenue car and it's a custom hook now so you're also learning how to make custom hooks in this tutorial I'm also going to say export and this one is not going to export yeah export D4 Revenue so yeah there you are okay so this is the start this is your base now what we're going to do is we're going to have all of the sort of you know clever logic and the stuff Associated around this so first thing I need is I need a bunch of different imports from react native and react native purchases so let's pop those in right now Okay so we've got platform which tells us which will help us determine what we're on Android or iOS purchases customer info and purchase offering right so around there purchase this is how we're going to connect to revenue cap all right um why can't we integrate a payroll directly in our code because remember we're trying to do everything in a cross-platform sense Revenue cut allows us to do that cross-platform approach with one bit of code if you're doing it directly to the App Store you're gonna have to do it directly for iOS directly for Android in this case you do it in one instance and it works for both that's why you want to do it yeah obviously I'm only showing you the uh the the single way of doing it right so in this case I'm only gonna do this for as a demo tutorial purposes but you should be storing these in um also called in environment variables but here just to simplify it so you can see it all in the same um same screen so your revenue account Google API key for here we're going to use the revenue cat um iOS key so let's go back to our revenue account go to API keys and we will have a public key that we will use so you can see here Publix app specific API keys we're going to take that key and we're going to pop it in here this should be in a in a special file where it shouldn't be and it should be an environment Fox and then we're going to say const and then this is where we start preparing our state okay so I'm going to I'm going to create a few different things here to keep track of right and this is so this is actually going to return us three things I want to know the current offerings that we have in Revenue cat so I want to know what membership uh options we have so like Pro yearly Pro monthly I want to know the customer's current information and their current state and I want to know if the user is a pro member all in this function all neatly wrapped up right and I'm gonna show you how easy that is right so we're going to say current offering so one for the current offerings uh Set current offering and then here we'll say equals you state and you're either going to basically get the purchase offering back purchase offering why am I not getting this micro you stay uh we were going to get purchase offering back or no right and it's going to be initialized with no to begin with and then we're going to have the same thing for customer info okay so the same two things for customer info and the current offering so the two pieces of state right now and then we're also gonna have um basically we're gonna check the customer info object eventually to see if their active subscription includes either Pro uh monthly or Pro yearly and the way we do this is we say const is pro member and obviously you can memorize this if you want to but I'm just going to show you very simply I'm going to say customer info DOT active subscriptions and we're gonna use optional training here as well because that could be null and then we could say if it is yeah so this is a a few different ways you could do this right you can firstly say if directly into the thing so you can actually go ahead and do that Pro here but I'm actually going to make it a little bit easier I'm just going to say if it dot includes and say Pro um monthly yeah or and obviously what I would recommend here highly is that you have these in constant files right so you had something like a const and different types so in this case you could have something like types of membership or yeah membership and then here you would have your pro-monthly what do you say monthly and also yearly yeah so that way you've got like a dedicated monthly and why is this freaking out cannot find monthly what types of memberships right monthly yep uh or if it's type yearly right so that way you've got a const there we go nice and now that will tell us if the user is a pro or not basically right so if they have an active membership which is either monthly or yearly they're in Revenue cap okay so then we're gonna have use effect now this is gonna this is where we start having the custom hook magic we're gonna have dependency array we're going to import the user fact like so and this is where we do our special stuff okay so we need to do an asynchronous better code now when we need when we do a synchronous bit of code inside of a user effect we have to wrap it in a function it's going to say cons fetch data equals an asynchronous function um and then inside of here we're going to say firstly we need to enable the debug logs for our purchases so that way it can tell us more insightful information so this is the purchase API and then we're basically going to con we're going to detect or if we're on an iPhone or if we're on a Android so why the way we do this if we say if the platform operating system is Android configure our purchase API with the Google key right if it's um uh iOS then configure with apple key right and obviously if if this was the case and you're using environment variables at this point you would say process.m dot Google API key process.m dot API Apple API and so forth right then what we do is we say const and then we need to basically get all of the offerings right now the offerings just to make super super clear are in Revenue cap remember we went ahead and we actually set up the offerings so I need to basically get all of the offerings so these two offerings okay well the actual Pro is the offering and then I need to get the packages inside of it so in this case I'm gonna say const offerings offerings equals a weight purchases get offerings okay and I'm going to do the same for the customer info I'm going to say const customer info equals away dot get from it purchase or get customer info and that's what we want okay so this will get us the customer information this will get to you how your hover it says gets current customer info and here it gets us um offerings and so forth and you can always look at the purchase offerings to to detect what type you're getting back and then you can even look into that and see what kind of stuff you get back and so forth like active subscriptions is a string array and so forth right so it's just handy way to do it and then we need to set that to our current pieces of state so in this case Set current offering to customer to offerings sorry offerings dot current right so in this case current offerings configured in the revenue count dashboard or you can even show all of them but in this case I just want to show the current ones and then we're going to say set customer info to the customer info like so okay now once that's done we need to execute our fetch data so we're going to say fetch the data and if we has any any issues we're simply going to console log them uh console error them right so that's an easy way of writing uh basically this it's an easy way of just saying that okay so in this case I'm just going to do console.era hit save like so cool so close to 500 likes let's go guys right that's awesome now that's perfect so far we have no external dependency inside here so we're good then we're gonna have a second use effect right so in a function with uh there we go I'm going to say const and this is basically going to be a listener now okay so what this will do is is it's going to basically every time the user's information updates for example if they got a uh if they subscribe to the pro membership this should ping off and tell us right and it didn't have a detached listener function in case anyone's wondering so that's what I would typically do here in the cleanup function of the use effect I would detach listener but I didn't have that here so I was assuming it just did it itself and you even got one for um I think last night it doesn't exist here and say customer cons customer info updated object equals asynchronous so I'm going to create an asynchronous function here and I'm going to go ahead and say purchase the info so this actually has an argument here and then we're gonna update so basically this is a function and I'll show you how what we're going to do here right so this is a function that we're going to attach to a listener right now so we're going to say attach it to the purchases dot add customer info update listener and then what you do is you pass in your function and what this does is this is essentially getting passed through here and if you are if you don't believe me you can check here by doing this and now if we hover over a you can see a is custom of type customer info hence why I've done it here okay so that's basically how you detect the type so in this case we've got our customer info and then we basically set it with that so that's what's happening and if you're wondering if returned nothing otherwise I would have detached it in the cleanup function okay so done and then we have no dependence here management here that's because there's nothing in there as well okay and then what we want to do is we have all of these things happening behind the scenes now with use effects so they're going to get updated it will tell us if a user updates and so forth and then what I want to do is I want to return these um objects so this is our custom um hook part of it we're going to return the current offering the customer info and his Pro member and what's beautiful about this now is that that in that hook now I can call it anywhere inside my app and it will tell me if the user is a pro member it will tell me all the revenue cap offerings and it will tell me the customer's current information right so pretty sick right so in this case we're going to go ahead and close that and now we can start implementing it so I want to show you right now if you go to the home screen Let's test this to see if this even works right so firstly I'm going to go over here and I'm gonna just go ahead and close this out so come on okay and now the thing is right so this is the point at which we are limited because um we cannot test the actual purchases with um a simulator right we will get restricted at some point here so what I will show you is you can there is a setup process where you can activate I think the storefront apis I mean you can basically set up your simulator in a way with xcode and all that stuff but I'm going to show you how we like I said how to test it on the real device hence why redeployed it to EAS right so on the home screen now what I'm going to do is I'm gonna pull in our custom hook so I'm gonna go ahead and say const custom offering go ahead and pull in our custom hook so just like we have other hooks I have one here and what I'm going to do is I'm simply going to log out current offering to see what happens so I'm gonna say debug current offering right and let's see what we see in this case there we go you're trying to use a module that is not supporting an expo go you need to create a development build of your app so that's the problem right so in this case now this is why we need create development build so this is where we move over to the simulator so I didn't need to stop it there MPX Expo stop so now what I want you to do is I want to basically close the simulator because that's the end of the journey for the simulator okay now what we're going to do is we're going to move over to uh phone okay and then what we're going to do here is we're going to go to the deployment so this one here so iOS internal distribution board this will finish you click install and this is where on the phone now I will show you what we need to do okay so on my phone what I'm now going to do is I'm going to go ahead and scan this code so I'm opening up my camera I go ahead and pop in it says open in iTunes and then you can see here it says I would like to install Revenue cat app YouTube okay so I click install and now this is installing it onto my phone okay so I'm now going to go ahead and locate that on my phone so I'm going to go into my photos I might know what I would do is simply just do a little search right so basically pull down I'm not going to show my search but basically go into your search in your home screen and you pull down and you follow that because I don't want to show in case there's anything there um and then basically what you'll do is you'll find that the app that we just deployed okay so our one is called Revenue CAP app and there's literally an app name right so in this case I've now gone ahead and loaded the app and this is what you'll see right so this is literally an app on my phone now so you can see it's literally an app wherever you can't app YouTube so you just need to search for the app and you'll find it okay so now at this point you should see we don't have a development server running it's like blank okay how do we do this so this is where it gets really cool right so right now I'm charging the phone again so I'm gonna go ahead and restart my server so in this case I'm going to go ahead and do uh R to refresh um what is it vegetable servers let me uh go ahead and actually do Expo let me go ahead and do this sorry with your Expo start MPX sorry MPX Expo star um dash dash Dev dash dash client or dash dash Dev client okay and now what you'll see is this should go ahead and fetch up our app over here so let's just double check oh in fact I don't think I've actually got the um I didn't I think I needed to actually install that a provisioning profile I don't think I did it all right so firstly oh 500 likes boom we smashed it amazing stuff guys yeah so at this point I've messed up somewhere so I should have actually installed that okay oh wow and just as that happened the song came one the main song It's So Sick hey let's go guys all right so at this point what I want to do is actually I want to install that provisioning profile that I completely ignored earlier right oh okay let's do that again so um in this case well I've just showed that that's fine one second okay so I need to show that provisioning profiles I'm just gonna find it quickly [Music] Okay so I've installed it and where the hell was the conversion profile again um okay I'll tell you what I would just do it manually again I'll show you so at this point I want you to go ahead and yeah the song gets me so hyped up and then we're going to say EAS device create which I've already done but we're gonna do it again just to show you okay we're gonna get it yes yes okay uh we're gonna say website yes I'm gonna register this which I probably didn't do correctly the first time that's my honest truth so I'm gonna go ahead and screenshot and get this Expo Dev oops right download the profile allow profile downloaded I'm going to go into my settings right now I'm gonna go into the profile so I'm going to type in into the search bar profile and now I'm going to VPN in device management I see downloaded profile is here register for development go ahead and do that install enter my passcode so let's do that right now and I'm going to install it so now I clicked install okay which I didn't do properly before and now you can see Expo Dev your device is ready to run your internal development builds so that's where I kind of messed up right so I kind of I don't think I did it correctly the first time right now what I'm going to do is reopen the app that I had opened previously all right so in this case um oh no actually Sunny I'm so stupid sometimes all right so what I'm gonna do is I'm gonna go back to my app there's so many steps right MPX Expo star yeah and now watch this so that QR code that popped up now all we need to do is scan it also stupid right so scan it and then this will pop up on our phone here so once you're on this screen I need you to go ahead and type a click on the development build and they'll say opening Revenue cat app YouTube yes and then you want to click on allow and click on reload and just like that but hey look at that now I said hello there friend blah blah blah all right and then you can shake to get to this right so if I shake my phone now so basically that I see I look like a crazy man but look if I basically I'm on my phone right now so this is actually the the app that we built right now so you see I can do all the things we did previously I know it's not focused it's super annoying right so in this case I can do all this stuff we were doing previously if I click on the top bit over here so I'm just trying to show you and if I don't over there there you go you get even the pop-up and all sorts yeah but now if I go ahead and Shake It okay shake it yeah there you go then it pops up with the the debug menu okay so that's how you access the debug menu on this on this bit so you just shake the phone okay now once you're on here I want you to click on remote JS debugger right so remote JavaScript debugger and you see what happened the minute I clicked it it opened up a react native debugger on my computer and what you'll find is now I've got the debug logs on my computer so if I inspect this screen by doing um inspect now you can see I've got my debug remember the one that I showed you and I can see just we can see it monthly annual let's go let's go it's working all right so this is exactly what I want to see all right so in that case yeah so that's what you have to do I'm so sorry I messed up you just have to scan the bloody QR code this is stupid whenever you see a QR code just scan the thing right it makes it helps you out all right um but yeah there you go so now we have it on our phone so this is and by the way guys I promise you something crazy I'm gonna show you something and this is what the what I initially thought wait that actually works so check this out if I go to my um basically I just want to add in a bit of text here just to prove something to you yeah so use text and just say hello world right I'm gonna pop it in so if I hit save uh it rebuilt my app there you go weirdly um it wouldn't have to do that every time by the way say hello world one two three save okay maybe because I'm streaming I guess is doing that but it won't it doesn't always do that right but in this case if I hit save now I want to show you something that's remember that's streaming for my phone right so I'm gonna remove that text block and show you right now so I'm going to remove it I'm removing it and I'm hitting save that's crazy that is crazy that just streamed to my phone and if I undo it and I hit save like that's nuts and I'm stressing the point because I just find that absolutely and crazy how that works right but yeah so now you know basically what's happening right so uh say 600 likes um but yeah so now we've got the the connection to our backend ready right so absolutely crazy so it will literally stream it over your network to your development build so that's what you need to do at this point right and now the awesome part is if you need to debug it we have our debug logs here so I can go ahead and cancel this and remember you can't click this because I'm streaming it and by the way if you want to see it on your computer I'm using something called reflector for um to airplay to my phone but as in right now honestly when you're developing you can just have your phone in front of you okay so now let's go ahead and test this what I'm going to do is you're going to see me interact with the phone as well but if I need to send a refresh command I go to my terminal and I simply put press r so to R to refresh and I can actually refresh the app right and you can see it says debug logs so in this case I had a debug in the home screen we showed the current offering right and that's what you see here and this is what I get back so I get the annual membership I get all of this good stuff available packages and all that kind of stuff okay so this is really really awesome right now right so now we're gonna go ahead and take this knowledge I'm gonna put my song because I like that song so much what is it we're going so well guys I'm actually so like this is getting sick okay so the next thing is let's actually make this thing work okay so we're gonna go to um oh yes let me get my code up here we are so now we're gonna basically use the is pro member to determine if the user is actually a pro member or not okay so we're gonna go here we're gonna go ahead and say uh we don't actually care about the rest of these which is pro member for now uh we're gonna go down and basically first things first is at the top over here if they're a pro member I want it to say um Pro okay so here I can say is pro member then they're going to basically say Pro otherwise it's going to say upgrade okay so I really don't know why it's doing that yeah um but as in it's fine it's just gonna do that a bit right but in this case we now I've got upgrade so if I click it you can see on my phone it pops up so I'm not clicking it sorry I'm pressing out my actual like I'm actually pressing the app right so now you can see it says uh upgrade because I'm not pro okay now the same applies to here so where we've got requires Pro all right so requires Pro is actually we can do inside of here so we go to action row so let's hop over to action row now I'm going to do the same thing I'm going to pull through my um here and to be fair we can just import what we need here so and then we can and then we don't need the rest of these just inside this file we just need the S pro that's all we care about right now and then what I'm going to do is I'm going to conditionally render some styling now so first things first I'm going to go ahead and say um and we're gonna have a little extra variable here saying locked for pro members is equal to if it requires Pro and if they're not a pro member so this means that if the prop that we pass through so basically I'm saying if my pastor prop saying it required Pro then it would go ahead and lock it and if they're not a pro member so if it requires Pro and you're not a pro basically then it should disable so this will be true at that point if it's locked yeah so now oh God that's so annoying I don't know why it's doing that yeah but anyway we'll work through it okay so once that happens then what we can do is we can basically say the um over here we can say the background color if it's locked for pro members the background color is going to be Gray otherwise it will be the color that we specified so let that do a sort of weird refresh and now you can see boom we get this add an exercise that's all good right everything looks good and in fact what I'm going to do is I'm just going to save it when I'm ready right so that way we don't get this weird spasm thing right and then I'm going to have locked for pro members and only show The Following um like so and then we're gonna say and I'm gonna just pop in what I would show here so I'm just gonna have a nice little lock on the screen as well yeah so after this you see now we've got the pro little lock nicely added in and that's only and that's going to be absolutely positioned in the top right if it's uh if locked Pro is that um there are many technical words to learn yeah I know it gets a little bit confusing I apologize it's just quite a big deal that's the truth um yes Moby I prepare it beforehand then I do it live yeah so in this case I'm going to also disable I think I disabled yes okay so in this case we're gonna say that these buttons for example right now if I press the button you shouldn't do that right you shouldn't say this it should instead take me to the paywall so the way that I do that is I go to here and I basically say okay if it's locked for pro members then I want to go ahead and basically navigate to the paywall instead so I'm going to navigate to the paywall else I'm gonna navigate to the screen right so basically this right so in this case here so we're saying navigation to navigate paywall otherwise navigate to the screen okay so let's go over here there we go just going to change the song a bit so now what will happen is if any of the colored ones hey you have access a you have access a you have access and if I go to a pro one whoa you need to upgrade right so it blocks us now because the navigation is going straight to paywall if you're not a pro member and you see how that works right so actually a really nice way of dealing with it and it does exactly what we wanted okay my iPad is freaking out right now so I'm just going to try and get the music back I think we're good in terms of yeah we're all good yeah awesome almost a 600 likes guys smash the light button we're doing amazing today all right let me get the music back give me my music all right there we go okay so this point now we need to go ahead and actually implement um the basically the bottom bit right so where are my hello my designs where my designs are there we are yeah so I want to implement these two things this the starter one week trial and the 46 annually and the restore purchases now the annoying thing is is where the heck is the trial right uh I I have done the trial before I'm trying to remember where I put the trial um so we will get we will find it I promise you we will find it I it has to be an app store connect right so let's go find it so App Store connect um guys downloads okay it was such a small setting I remember finding it it was Pro monthly I'm sure it was here and then it was I'll be saying without music um I can turn the music down um so see if you guys can find it before me yeah um where was it was there's a free trial option that I cannot find there's a free trial option that I cannot find for App Store connect right so in this case uh if I go back to subscriptions I believe it was and uh sort of in that purchases well I'm gonna see it on my other project if I have it so this is my other project right here I've got here so in this case this is the other one I changed the saying and I'm for the life of me I cannot find it um I believe it was pricing and availability [Music] no it's none of these in-app purchases I didn't add any in-app purchase in this one and here I had it ready I don't know why I've completely forgotten it I literally did it like before I came on this live as well and I and I found it and I've completely lost trail of thought as to where I put it um right so Json over an article I'm just going to try and find it quickly right so in this case we have um no that seems to be the old one Jay I think yeah that's not gonna work for this one um oh let's go back in-app purchases no it wasn't here no that's not okay so we'll find it we'll find it afterwards even it might have been nice it wasn't here as well I'm gonna have to find it so emotional oh it was so small and I remember being like what the hell how are you supposed to find that um okay no that's fine let's let's build out the other the part where we can still sign up that's fine I can show you how to do it and then I will implement the remind me at the end I will implement it um huh right so let's go ahead and do this now so I'm gonna go ahead and implement the rest of it so the actual sign up stuff so in the upgrade screen to the paywall we're going to go to the paywall and now I will show you so I'm gonna need my current offering that we had previously so here this one and then I need the current offering I don't care about the others in this case now for the current offering [Music] um Asian Sea cases the most relatable programming experience honestly that's why I do it live because it's so it's such rubbish when I see a tutorial and it's like everything's super perfect because it's not how it happens right this stuff goes wrong um okay so in this case let's go to um my current offering yeah what am I doing um so we're gonna have honestly current offering may take some time to load okay so in which case I'm actually going to say if there is no current offering then what I want to do is I actually want to return a loading indicator before we actually render anything so what I'm going to do here is I'm going to say um oops return and I'm going to import activity indicator from react native and this is basically going to go ahead and show a loader so now if I go here oops so I'm going to press it I'm going to press it upgrade and now you can see we've got a nice activity loader until the current offers are loaded right because it will take a little bit of time for that to happen okay so next thing that we need to do is uh Rodrigo says let me restart the iPhone layer to me so remember this isn't an emulator this is a reflector for and I don't want to do that because when I do that I've had it basically just completely break on me and I don't want to do it on stream um because I have to restream it and it didn't connect last time again it's very strange but yeah it's annoying um so now what we're going to do is we're going to say uh I'm going to firstly have a monthly purchase button okay and here what we're going to have is a touchable opacity button underneath everything so hit monthly subscribe we're going to have a touchable opacity yep like so and in this button I'm going to have a two piece of text so one saying sign up and the same thing again and we're just going to change up so basically I need the price right so I actually need the in the actual price so I wanted to basically say free trial for one week blah blah blah and then I want it to say the actual price afterwards so I'm going to say current offering dot monthly so you see how we can get we can actually access it the product itself price string so this will actually give me the price forward slash per month as it's a monthly month after now the reason why I'm doing this is if I show you it will say free trial for one week 20 Dirhams a month after okay that's nice let's go ahead and do that right now so let's start this up so what I'm actually going to do I'm going to pop The Styling in so I'm going to apply the Styles I've already explained a bunch of style like what we're doing we're giving a bunch of styling here I'm going to give this one some text white here so text white and then for the touchable opacity I'm going to go ahead and give it the following Styles so I'm going to give it a nice little button style so let's go ahead and pop this one here hit save and now we've got a nice little button at the bottom okay and we basically want to handle the purchase of this right so right now we don't have the free trial implemented I will do that but if I was to click this right now it doesn't do anything if I do on press I want to do a handle monthly monthly purchase and I'm gonna have two very similar functions here which you can go ahead and feel free to actually refactor yourself and make it your own like you know neater version um because you can actually do that quite easily after this and so we're going to go and say const and do a monthly purchase and it's going to be an asynchronous function yeah and then here what we're going to do is we're going to say if there is no current offer or if there's no monthly offer then we're going to Simply return right and then again when we optional chain this because it could be null which is why we're protecting ourselves and then what I'm going to say is I'm going to say purchase info so basically this is where we carry out the execution of the purchasing part I say await purchases so wait purchases that just is and we import that from react native yeah and then we say dot purchase package and in this case what we do is we pass in the monthly package right oops sorry guys they messed up yeah handle monthly purchase we pass in the monthly package and what this is going to do it's gonna tell Revenue cat that hang on you want to basically go ahead and purchase this package okay then what I'm going to do is I'm going to add a debug here saying you bought the um basically uh you bought looks like I'm moving on here purchase info um yeah there we go purchase uh in fact we'll just say monthly sub purchased yep just like that okay and um what I'm gonna do is you know what I'm gonna maybe okay it's fine keep it I'll just won't save you we'll say and then I'm basically gonna say an Allah right so if you're active afterwards so if you've got a subscription then it all went well we're gonna say if purchaser basically the customer's information right so in this case purchaser info would be the customer's information that is returned if their customer entitlements active Pro basically entitlements remember basically okay so that's very important actually remember we did have entitlements which was levels of access right and we included in that Pro monthly and pro yearly right so in this case Pro monthly will be active right I actually want to double check this to be sure of something I want to go ahead and see what the console log will return but let's go ahead and Dot Pro because the identifier for our annual was I believe it was here so let's go and see so entitlements so I called it oh bloody oh I called it pro monthly okay so let's delete this one let's just get rid of this to the end time and yes I forget that yes we actually want Pro instead it should be Pro access yeah and the Hope okay this makes so much sense now this is how we actually get the entire one to use the thing okay so in this case now what we can do is we can attach the entitlement of pro monthly and pro yearly and then we can check against that in the actual thing okay if that makes sense now all right bro really right so at this point that's good um and now we can do dot Pro that's fine yeah oh sorry so I just want to show one more then if you've got the pro in time which which wall you will have because you purchased the monthly okay then we're gonna say navigation to go back so you should close it afterwards and then what's amazing is that because the users will then become Pro our listener should then fire off and then it should work in the way that we expect it right because then this will say is pro and it will basically allow us through access and that will also say Pro after we've successfully done it so let's go ahead and say handle monthly purchase just go and attach that to the correct thing handle monthly purchase okay and let's try this out right so I'm going to go ahead and do it give this a go so I'm going to click on add an exercise and boom we get that which is great that's what we wanted and then I'm going to click on free trial for one as in we haven't got the free trial yep I'm going to click it so I've pressed the button and let's see what happened did I press it yeah okay there we go okay so that's good that's a very good sign and then you see the accounts popped up and then we can click on subscribe and also by the way in your settings it will say sandbox account you would put the test sandbox user that you set up in app store connect previously put that in which is why I'm seeing Sony Saga plus test at gmail.com right so that's the name and then you want to put in the passcode that you set for that test user so I'm going to pop that in right now so I'm doing that just now as we speak and then I'm going to go ahead and hit sign in okay so I'm signing in and now if all has done well what we should see is my purchase has gone through now you should say purchase is complete in a second okay so give it a second obviously this is a Sandbox it's going to take a little bit of time and then what we should see is that this will navigation go back to kick in and then it should say oh there we go we're pro amazing look at that we said Pro and now we have a pro membership hey look at that we have a pro membership and just to prove to you that that actually worked right I'm gonna go over to my Revenue count now so let's go to overview and we are in the correct project I believe yeah we are in YouTube Revenue count demo yes I click into that project and then click on overview sandbox data and basically bear in mind guys this has all of my other projects in but the one that we want to pay attention is pro monthly that's the one we just set up Pro monthly and pro yearly are the ones that we set up okay and then um okay and then what we're gonna do is you see where we've got Pro monthly we're going to click that and as you can see it's going to show that I subscribed from monthly for 19.99 durhams which is correct yeah and now by the way it's showing total spent zero because one we're in sandbox and two because it's in a different currency you can test that and I will show you if you did USD right so now what you can do is you can go ahead and see the user in here right so and this is again another really amazing reason to use whatever to use Revenue cap it shows when they first saw the app it first shows when they opened the app and it first shows when they started the subscription whoa thank you Adamo proper fam remember just donated ten dollars dude I appreciate you man thank you so much that's what the pop-up comes about I love you man thank you dude all right I appreciate you being here man right so one thing you'll find as well is that your subscriptions in sandbox mode I think it's every five minutes will renew monthly right so every minute or so it renews monthly so that way you can test everything out otherwise obviously you're gonna wait an entire month right that's why you could see purple purple Pro because it's basically going to renew and if we click here indicates this it was a renewal subscript it was a subscription renewal on us that's not the renewal yet these are all renewals all right so in that case there we go we can see it and obviously as I mentioned before it's it's because one we're in test and two where we're doing durhams not us right if you're charging us you would see US Dollars okay so that's great we're working now how do we test this and actually get to the point where I want to deactivate my Pro again right so my Pro subscription well I'm going to show you right now well basically all you need to do is go to delete user go ahead and confirm and then what we can do is restart the server so in this case if I restart my app what you'll see is that we're locked out okay now what you should see Pedro what is up gun covers it's good to see you dude now as you can see if I click it I'm no longer a pro member because I deleted it right but really what you want to do is if I was to go into my app right now and click restore purchases which we're going to implement I would be able to actually restore it because technically on Apple my sandbox user has still got access to it but if you really want to do it correctly so if I was to go ahead and press free trial so I press free trial again you'll see that it's going to basically tell me that I'm already subscribed yeah you see that I'm already subscribed right and the reason being is is Because unless I go to my sandbox testers and I go to edit and I clear purchase history now you've basically reset that test user okay so now what we've got to do is if we want to test this out properly so you see it just restored my purchase for me so in this case yes restore that again so now it's basically gone to revenue cap so basically what you have to do in tandem is delete the clear purchase history here OT Revenue cap and delete the user from here so go to overview sandbox go to this user and delete them so go to your user and basically remove them and that's how you do a full test right and now if we refresh so R to refresh you'll see that now this one should yeah there we go right it gets deactivated and then if we do it now upgrade cool and obviously you can handle it you can put a loader in at that point right so you can have a smash screen while it's doing that I'm just showing you obviously without any of that stuff if I now click here you'll see it will offer me the opportunity to upgrade and I think Jay actually found what I was looking for yeah there we go perfect that's amazing right so now what I'm going to do is I'm going to add the annual let's go ahead and get the annual in um so let's go ahead and do this now so the annual subscribe so I'm going to do the same thing for annual subscribe and to be honest with you what I'm going to do here is I'm just going to pop in the snippet of code for The Styling um so actually now I'll do it properly I'll show you fully so I will say uh for annual I'm only going to include annual if annual actually existed so it's a if current offering door annual exists then we'll basically have a touchable opacity so a touchable opacity okay and then inside of here I'm going to have a piece of text saying something per year okay and this is going to be the price string okay that's so annoying but anyway we got that yeah and then we're gonna have the price string uh and then I'm gonna basically have a nice little formula to help you out here so what I'm actually doing here is I'm showing you how much you save if you sign up annually and I'll show you how I've done it it's a little formula and basically what I've said here is I've said save um this much percent annually and all I've done here is a little formula where I'm basically calculating the percentage of if you were to pay monthly for 12 months uh the difference basically how much percent would you save if you simply paid a annual right so this is a simple mathematical formula volume one minus the difference here and then I at times about 100 to get the percent and I just do it to Precision two to give me a two decimal um a two character so I never went to over 100 for his own boy then I hit save and check this out okay now you can see save 46 annually right so that's nice so now we're saving 46 to be able to do that okay so now what I'm going to do is add in The Styling so let's go ahead and do that right now I'm going to add in the touchable opacity styling last name there we go beautiful and then I'm also while we're here I'm going to add in a touchable restore purchases button right so I'm going to obviously implement this but again the actual UI part of it is going to be here right so for this bit I'm going to have an on press for handle annual purchases so I need to create my restore purchases and handle annual purchases and I'll show you the difference between the two and how we're going to implement them so going back up now let's create our handle annual and the handle annual is honestly the exact same in many ways except we're basically changing the annual so obviously you can see there's a room to refactor here I'm not going to go through it all but you can definitely refactor it here and say if it's monthly handle it this way if it's annual do it this way so we're simply going to go into here and we're going to change the monthly monthly monthly to your annual okay and in this case the entitlement would still be the same because annual and monthly still get the entitlement of pro okay and um and then yeah so in that case now we should see the annual so once I hit save we can get a little flickery witness and then restore purchases okay so I forgot to do that um so let me move this over here so restore purchases is going to be the last one and the restore purchases actually believe it or not a lot easier than you think restore purchases and this for example is perfect for let's imagine I pay for my monthly subscription but I got a new phone and I downloaded the app and for some reason it doesn't think I'm a pro member and that that's happened in a lot of cases I guarantee you it's happened with me a lot of the time when I've gone on to a new device and I'm like well hang on a minute I pay for pro why am I not a pro member and that's simply because it hasn't done a little fetch to the back end or to App Store connect or Google Play to say is this person actually paying a subscription to us or not um so in that case you just have to restore purchase it restores that connection and then it knows that you're still a pro member so I'll show you how we do that right now we simply have an asynchronous function and again all of this is made this simple because of Revenue caps so it is actually really nice nicely done we'll say info equals and it is going to be restore it's not restore transactions it's restore purchases okay and then what we do is we're going to do a simple check and we're going to align the screen we're going to say if your active subscriptions that length was actually greater than zero then then you definitely did you were subscribed before and it's going to say you are now restored but if it wasn't and you wasn't actually you know you didn't pay for anything before and you just try to click restore then it will actually catch you and it'll say no purchases to restore and what we're going to do is we're going to carry in the alert from react native which is just a simple pop-up right so that's like an easy lazy way of doing it okay so now if I go into upgrade so in the top right upgrade now you can see we've got the restore purchases and we've got that so in this case now I'm going to go ahead and do annual and I'll show you how we can test so firstly we're going to test the annual membership we've already tested monthly it works but we're going to do the free trial afterwards we're going to try the annual membership and then we're going to basically I'm going to show you how we test the disconnection so imagine you went onto a new font and then we can restore the purchase okay so get ready for this and remember we're going to smash the 550 like Mark in just a second so just keep going strong guys right so I'm going to click on Save 46 annually and the price so I'm pressing it now and you can see boom we get the price for the year pop up I'm gonna go ahead and do that right now so I'm gonna go ahead and buy this on my sandbox account so I'm doing it right now so I'm popping it in like so sign in and in just a second boom hey hey right that's good and then it will process it in the App Store and this will go ahead and give us our Pro entitlement which will then get detected which means that we will now see a pro right awesome stuff that also reminds me right so firstly that worked amazing stuff so you have now access to those features but it also reminds me that in our actual code we could have probably also done just in hindsight in the use Revenue cap to detect if the user was a pro um just as a FYI you could probably go ahead and also do entitlements here and do active dot Pro right so this is probably a cleaner way of doing it yeah so if we were to go ahead and refactor this right now let's see if that works yeah so you see that's actually a lot cleaner so that's exactly the way we need to do it so I hope this makes sense now the entitlement is grouped under so that way once you're a pro member you can you basically include the products that are offered in there and then your offering is your paywall right makes sense okay so now it works right if everything works the way I expect you but what if I go into a new device and you know for some reason it doesn't detect that I've done it so the way you can test this by the way is you go into your sandbox there you go into your user profile in Revenue Camp not in app store connect so according to Apple now this user is a fully paid member he's paying monthly um but what I'm going to do is I'm going to delete the user on Revenue cap okay and I'll show you what happens so I'm going to delete them on Revenue cap and now what we should see I'm just going to quickly restart this up so refresh now what you see is that this user no longer has their Pro membership right but hang on a minute I've paid my Pro membership and according to Apple I am paying a bloody monthly subscription which I should be enabled for so I click here and now I go down to bottom and I click on uh purchase uh what's it called I go down to the people and I'm basically click on the restore purchases which you can do that so right now I'm pressing on restore purchase under the annual button so I'm pressing over here right so I'm pressing restore purchases and now you can see your purchases have been restored okay and then what we'll find is I can go ahead and swipe down and now I'm still a pro member right so I need I think at this point you could have just had navigation go back off to this so we could potentially just go ahead and pop it in afterwards for ReStore purchases like so again same thing um entitlements yep you could you could do that basically right um and that will give you the same thing okay and then that will basically rather than me having to manually swipe down it will work so I hope that Bloody helped that was that's actually really cool like how that works right so now we've got our Pro membership so I'm just clicked on Pro just to show I've left that as an option so I can demo it but if you've got the free week the annual the restore purchases amazing stuff if I was to try and go ahead and do this it would go ahead and tell me that I'm already subscribed I'm already doing this thing so why am I doing it again um why is my music again gone off gone down yeah and the iPad is not doing me today right um so at this point now I want to do the free trial so that's the final step is the free trial right this has been a banger of the build right let's go ahead and get the free trial in so we're gonna go to the App Store yeah so Rihanna so okay so YouTube demo app is the one all right now I want a free trial so I'm gonna go to and I think Jay actually found a nice little article which I'm just going to go ahead and see okay so what we can do now is we can go into and this one's right we can go into select our app in the sidebar in-app purchases and we should click manage so I I don't think it's yeah though that's the thing it was it's not this one I know I've been here before um I'm trying to find this so in this case all right this is the one we're gonna do you know let's debug it together screw it I'm actually going to show you how I would find it right so entrance and introductory office so the introductory offers that we're looking for right now are here so no so it's basically I'm just literally trying to find where the hell I put it because it's not here it's um App Store introductory a free trial App Store connect we need seven days free tryiness here okay so oh thank you bite bound let me check that so bite bound says it's in my apps features my apps feature why am I looking features why am I going so like okay so subscriptions I'm in subscriptions subscription pricing [Music] oh you know what yo I think you're right actually so we're going to monthly I think it is in here [Music] yes dude thank you bye bud that's what I'm talking about it's there I was wondering I knew it I knew it yeah because basically I did it in here as well so I'll show you in Pro monthly I was thinking I was like where is this thank you so much dude I was actually bugging me so much all right introductory office there you go bam free for the first video right so in this case this is a YouTube app memo oh man that is MVP right there all right set up the introductory offer and in this case we've got all of the uh this is why I love live streams honestly it's so exciting we can solve it together whereas in this case we are going to enable it for everyone click next the start day we're actually going to go ahead and say like it's today and the end day is no ending right we're just gonna have this ongoing free trial offer right so in this case click next and we're gonna say um uh free trade though I'm ready to charge pay as you go pay up front or type of entruster it's going to be a free introductory offer free for three days one week two week and so forth so I'm gonna say free for a week all right free for the first week next and then there you go it's free for the first week confirm and now this will actually have a free um offer inside right and basically what's amazing about this is that Revenue cap would simply pass this through the offering object that we've already hooked up okay so now if I show you the um if I was to refresh the app I'm just going to show you if I console log the paywall so console log the current offering right I'm gonna basically move this and boom I'm going to press on Pro and we should see in here in a second current offering or is it uh okay sorry yeah that's the current offering we can see here in the debugger remember you have to shake the phone enable remote debugger in order to get that up and then here we can see monthly offering type product intro price intro um discounts per monthly okay so in this case because I've already got it it's not going to show me an intro price however uh is it here actually I don't think it is here I think it's um in this one maybe product [Music] s okay I'll tell you what we'll do in that case I'm gonna restart my basically I'm gonna assume my user actually never got that price because remember they've already signed up which means they won't get the price again so what we're going to do is we're going to do a refresh of that user so we're going to assume they clear their purchase history we're going to remove them and obviously you should only do this when you're testing right like don't do this for live users because you're literally going to wipe your live user off the off your apps and mess up everything Pro yearly and then we're going to click on delete confirm there we go yeah and now okay yeah uh and now if I go back to my app people it was a phone yeah if I refresh we shouldn't be Pro okay so I didn't delete the right user or delete the wrong user because this is where it gets a bit annoying so what you should really ideally have is a separate account for every single project that's what they recommend otherwise you get this headache well your users are merged um so in this case we've got the pro user here [Music] clear purchase history um okay and now let's go back here refresh okay there we go okay so in this case now I want to go ahead and see the log and I want to press upgrade and then once I have an annual monthly product Enterprise um Okay so did I add it for okay that's interesting I think I might have had it for the wrong bloody thing let's see uh up YouTube app store free for the first week cool subscription pricing go back Pro monthly did I save it or not okay so this is pro monthly fine it could simply be cashed I think maybe I don't know um let's do free for the first Jan 26th to no end date three for the first week cool and I want to show you how I actually find it so in inside of yeah so it is intro price it's an intro price yeah so we should see an Enterprise so the last final leg of debugging and then we are literally going in okay so let's go into uh thank you so much for the kind words guys um let's go to paywall uh and let's go to the bottom and I want to show you something quickly um I think also I'm showing the wrong thing here so let's go down to here where we have the button so free trial form we I'll show you the actual code that we use so I'm going to say start a something for so in this case what you do is you say start a current offering monthly product oops come on start a monthly product intro price number of units so like one times so I've got X Space Week free trial so then in this formula it would say like start a one uh or it'll be a start a three day three times day free trial or so forth right so in this case this works James what's up he goes yeah I made the last stop let's go let's see proper fam OG members in the house guys I'm going to click on uh upgrade and let's see I'm not sure why it's not pulling through start Ax free trial so we're not we're simply not getting it passed through which is a bit strange right now which we just need to debug and figure out what the hell is happening um apps I am in the correct app subscriptions Pro subscription I have a feeling it's like not cached or something or it's caching or I don't know some weirdness is happening um because the introductory offer is right there I see it unless I've completely added it in to yeah it's not like I can add it like a day before or anything that's fine okay [Music] um it's definitely introduction offer let's go back to our uh account oh let's go back to the project so YouTube revenue account number yeah and then we've got the internals offering products So Pro monthly Pro monthly and the thing is as well even in here it would be per monthly I think what's happened is let me delete this product for a second and re-attach the product so now let's go ahead and create a new product called Pro monthly create product I have a feeling what's happened is it's it's not pulled the latest thing in like the latest edition and so let's add in the additional go back add in a new entitlement so if you've got Pro monthly you have access to Pro entitlements that's what we want and then in the offerings we've got the packages and monthly is going to be connected to our Pro monthly our amazing stuff James love this idea wait cosine team thank you so much we try super hard dude he's talking about the proper Farm new Community website it's absolutely awesome so make sure you guys if you want to join a zero to full secure check our Link in the description join us right so now I think that would have reported it back in okay so now if we try to basically go ahead we just this we debase it a hard disconnect here and then let's do a refresh okay uh ignore that that's fine for now we haven't got a splash screen so add an exercise yes that's exactly it oh my God we actually figured it out let's go right so basically what would happen is revenue cat hadn't yet refetched the new introductory offer that I had added in okay so that was the issue and then um yeah basically by removing the product and re-outing the product to be honest with you I think it would have refreshed off the amount of time but I didn't want to be it did it it did refresh for me when I did it myself but um I didn't want to wait because we're live right now but yeah that's actually incredible so I think with that guys we're actually done oh my God that was incredible three-hour build let's go ahead and go through all of the things that we've done in the today's build so I'm going to show you right now and just to let you know James this is running on a real device right now in front of you so I'm demoing on a device right now that you can see um I don't know why is this cutting out it's so annoying I really want to listen to some bloody music what is going on okay that's so like sleepy feelings I'm gonna try and get something planned because it's super annoying right okay there we go that's good okay would have worked without refresh without linger yeah I know it would have probably worked it would have it definitely would have worked right it would have refreshed um or is there a refresh button am I being so silly right now oh my God I think there is a refresh button I think I know what you're talking about Pro monthly no okay so it's not right anyway it would have refreshed after some point it definitely would have refreshed right um but okay on that note Yeah so basically what we went ahead and built today was an awesome application with um I taught you so many different elements today I taught you the EAS app service how to go ahead and deploy development builds internally and then test them on real devices and actually have this connected to your live developer environment which is nuts we connected we created our first in-app subscription on App Store connect and we then went ahead and connected it to revenue cap we've got certain screens which are basically allowed for all users and then we've got the some screens which are behind the paywall so in case I tried to create a new routine it was going to say whoa whoa whoa you need to upgrade and then we can go ahead and do annual we can restore our purchases if we have done before or we can start a free trial which I'm going to go ahead and show you right now because we've actually confidently gone ahead and implemented that so now this will go ahead and actually pop up and notice how I didn't have to change anything right so this is the reason why I didn't get the free trials because I didn't correctly wipe my user uh I'll show you how we actually do this um so to test this properly I want to out because I want to show you this actually in a full test fashion so let's go back to yeah and let's go to our overview and I need to basically completely clear that customer so clear customer purchase history [Music] thank you bite band James says I will be watching the replay I hope so did amazing stuff let's go ahead and say sandbox data and these are all renewals anyway so in that case let's go ahead and try this again so I'm gonna oh to refresh okay so ignore this flash screen that's fine let's go ahead and try now I have a feeling it's just simple it's quite a simple reason to be honest it's because it's it's got me a little bit confused in a weird state right now where I've got my so I'm going to go ahead and enable this and then I'm going to come to my user entirely and then we can try again but basically in the beginning of the video I did show you how this does work and because right now we're trying to provide this test scenario in the perfect way probably messed up one little step there so in that case I'm done it's gone ahead and that will go ahead and upgrade me if I show you here so let that good answer now I am a pro that's fine and then you can see now I've got a pro membership so if we go ahead and do pro this is a pro monthly membership so if we go to sandbox there we should see a pro monthly there we go all right there we are so that's why it was there so I need to cancel both of these users right so in this case and remember obviously what you would really want to check is that if they're if they're an annual customer don't show them the bloody buy button for the the other one right obviously I haven't I haven't covered all the corner cases but that's this common sense you wouldn't show the upgrade option again like once you've got annual um and then also here I'm going to delete this user so basically I'm deleting all the user states where I've signed up so now if I go here there's no user I was in there oh there that's a completely different app but I've done that and then here I go to clear purchase history cool so now I basically said to Apple that this guy is not built like bought at all and I've cut him off from revenue cap in which case now you can see we've we've lost our Pro we click on add an exercise for pro and now if I click Start a one week free trial we should get an introductory offer for new as we're a new member technically um if you currently subscribe to pro ball a lot okay so I've I'm attached somewhere bloody oh I'm attached um it keeps reinstating me so where is my customer for YouTube Revenue card okay so I definitely have a customer here still left over which I can't seem to find come on I need to find it I have to show you this I have to show you it before we've ever finished that so renewal two minutes ago okay so it's not it seems to not be killing the user so yes he is confirm delete all right and then let's refresh again sandbox data okay let's go to here clear purchase history and I just want to double check one more time sandbox data okay so if I refresh now sandbox they are okay so now we should see our introductory price basically I just I just I haven't got the I'm not resetting my user in the correct way if it shows again yeah so I'm actually bloody subscribed okay so in this case I just can't seem to find my user here but basically what would happen is if I deleted the user you would see exactly what I'm saying to you right so in that case it would work so sandbox oh wait a second I can see him yes yeah I don't actually have a access it's just a case of it's just taking a little bit of time um what's purchase okay that's fine but bear in mind guys I do also have um a few my sandbox account is attached to a few different builds here so wherever you can maybe it's this one yeah so okay so I have got a user in another app that's probably why actually let's delete this user as well I just want I have to try and fix it honestly it's bothering me so much on my life I'm gonna try and wrap this up and then we're gonna do it okay so now [Music] okay so I think that was died out anyway [Music] okay now that's good and then let's try this one more time oh no that's not this one okay so let's go ahead and I was about to touch my buddy laptop screen okay anyway if it doesn't work you know it's you know how to basically replicate okay you know what I'm not even finding the bloody user right now so at some point I've just the demo gods are against me and I think it's just renewing my test day or my samples day as a bit of a and they're caught in a bit of a loop yeah see it just keeps on doing it thinking I'm bloody renewed okay let's just do it one more time and let's just go ahead and back to overview let's just try one more time if not it's completely fine I've shown you how to do it and you can do it yourself it will work on yours I've got like so much random test data and random things in the app that is it's definitely messing this up where I've constantly tried to break it let's do this again okay so if I click on add an exercise and then I click on start a one week free trial if this doesn't pop up then we know that it's just okay I mean yeah for me that was you currently subscribed okay so it's just the rainbow okay that's fine so in this case yeah basically if on your devices I'm telling you your work I've got like three different projects loads of test data where I've been testing this thing out that's why if you had one project it really never gave me an issue so make sure you definitely give that a try because that's how you get the free trial method working and as you can see we can definitely sign up which is the main thing right and then basically that intro offer doesn't require anything special it just means that if it detects a new user has come onto the platform then it would be like oh okay it's your first time buying monthly here's a free week and then afterwards you'll get charged the full amount but otherwise guys that was absolutely incredible we covered so much in today's build it was nuts well almost at 600 likes I'm just gonna run through finally we had different screens different we made a custom hook we used typescript in a bunch of different ways you learn how to deploy to Eis service you have things running on your local device so much stuff has happened and you can finally add in-app purchases to your react native apps which is a damn amazing and incredible so I hope you've enjoyed that it's been a lot of fun on today's stream as well to go ahead and host um let me find our rap Out song I can't I can't actually see my where why is the pop fun song over here there we go all right you know how we got there we're going to end it the right way right thank you so much guys for tuning in this has been your boy Paparazzi as I mentioned if any of this one went over your head and you want more practice more experience make sure you check out zero to full stack hero our Flagship course right this is where we carry out everything you know we teach you tons and tons of stuff we've got an amazing new community app that is absolutely incredible some of the members are right now in the uh Papa Farm here and then if you haven't already checked out check out the University of code it's our new daily newsletter absolutely sick by the way right so the University of code is absolutely awesome you basically get coding problems delivered to your inbox every single day so you're basically getting a coding Challenge and then the next day you get a solution to the challenge and it's just a monthly subscription you can join it and we already have over a thousand members inside of this by the way and they love it so make sure you check it out uh the University of coaches Papa react.com forward slash universal code James tuttle's literally loving the daily code emails in the chat right now so definitely go check that out out and as I mentioned that before guys if you want to join us over the full course make sure you go check out forward slash paparia.com and I will see you inside you can hear from some of our members in the video and yeah as always guys it's been an absolute blessing to teach you guys and this was your introduction into in-app purchases in react native as always guys I will see you in the next video thanks for tuning in Smash the like button subscribe and turn on your notifications because I'm dropping more content more frequently crazy amount of stuff's happening this year I'll see you in the next one peace [Music]

Channel: Sonny Sangha

Views: 55,353

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: bE6eyZcU89U

Length: 207min 10sec (12430 seconds)

Published: Thu Jan 26 2023