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

  Переглядів 92,436

Sonny Sangha

Sonny Sangha

День тому

🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course
🫂 Join my Community, "University of Code" for FREE: www.universityofcode.com
🔴 LOOKING FOR THE CODE? 🛠️
links.papareact.com/github
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
Join me as show you how to build in-app subscriptions with React Native. You'll learn the following in this build:
👉 How to add in-app subscriptions to ANY React Native App
👉 How to add Monthly & Annual in-app Subscriptions with localised pricing!
👉 How to integrate RevenueCat into an Expo app to easily manage your in-app subscriptions!
👉 How to set up App Store Connect
👉 How to set up Expo Application Services (EAS) using the EAS-CLI tools! (including how to deploy a development build to a LIVE iOS device!)
👉 How to add Tailwind CSS to your React Native app to seamlessly elevate your design!
👉 Add Expo Icons to level up your app's UI!
👉 How to add React Native Navigation to your application
👉 How to use TypeScript to reduce the overall number of Bugs and Errors
👉 How to write a custom hook in React
+ So Much More!
🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 links.papareact.com/newsletter
👇🏻 FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPA Merch: links.papareact.com/merch
🕐 TIMESTAMPS:
00:00 Introduction
01:25 Build Tech & Showcase
06:22 RevenueCat Sponsorship
9:41 Zero to Full Stack Hero
10:31 Initialising the Build (1/2)
11:37 Setting Up Expo
17:27 Initialising the Build (2/2)
18:47 Setting Up Native Wind & Tailwind CSS
24:14 Setting Up a Temporary iOS Simulator
35:05 Setting Up RevenueCat
37:25 Setting Up React Native Navigation
42:26 Building the Home Screen (1/2)
47:25 Building the Image in the Home Screen
49:20 Building the Pro / Upgrade Button in the Home Screen
55:06 Building the Action Row Component (1/2)
1:09:53 Creating the Demo Screen
1:11:16: Creating a Navigation React Hook
1:12:43 Setting up Type Definitions
1:13:54 Building the Action Row Component (2/2)
1:15:34 Building the Demo Screen
1:20:35 Creating the Paywall Screen
1:22:06 Building the Home Screen (2/2)
1:24:36 Building the Paywall Screen (1/2)
1:27:34 Building the Content Section of the Paywall Screen
1:31:22 Explaining RevenueCat
1:32:33 Setting Up App Store Connect
1:47:53 Creating Subscriptions using App Store Connect
1:58:00 Linking App Store Connect to RevenueCat
2:09:57 Creating a Custom React Hook for RevenueCat
2:22:04 Creating a Development Build
2:31:16 Testing the Development Build
2:32:01 Implementing Monthly Subscription Tier
2:37:23 Trying to Implement a Free Trial Functionality
2:40:35 Building the Paywall Screen (2/2)
2:48:25 Testing the Monthly Subscription
2:54:08 Implementing Annual Subscription Tier
2:57:17 Implementing Restore Purchases Functionality
2:58:58 Testing the Annual Subscription
3:03:10 Implementing the Free Trial Functionality
3:16:06 Final Build Demo
3:24:37 Final Build Summary
3:25:18 Outro
Let’s get it PAPAFAM 🔥.
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with FASTFIT and it's subsidiaries in any form. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes.
#reactnative #appdevelopment #typescript #javascript #tailwindcss #revenuecat #tutorial #ios #android #reactjs

КОМЕНТАРІ: 68
@PattyBeautCode
@PattyBeautCode Рік тому
This UKposts CH has always bring us the best value content which we can implement it in to real world project, This is HUGEEEE ... Thank you for taking the time to do this.💯💥💥
@Usq7213
@Usq7213 Рік тому
finally finish with a very interesting react native tutorials, love it!
@dje7382
@dje7382 Рік тому
Oh my, this is huge.. you're a blessing Sonny. 💓
@kevinwang6066
@kevinwang6066 Рік тому
Thanks for making this! I love your videos and would love to see an Android version!
@FN-zg8lj
@FN-zg8lj Рік тому
you have the best energy of anyone on youtube!! Everyone else's tutorials always make me fall asleep haha. Thanks for the quality content
@SonnySangha
@SonnySangha Рік тому
Hahahaha thank you so much 🤙🏽
@needyounow453
@needyounow453 Рік тому
I’ve searched for documentations and tutorials for expo in-app purchases for a month. Then I stucked. I feel so lucky today that you’ve exactly made this super helpful content for us. Thanks always for your help Sonny! I also wish you to teach us how to use expo push notification!
@manilagoyal4135
@manilagoyal4135 Рік тому
Me too literally i also comment many youtubers but sonny sangha made this video and took my heart.
@CTBell-uy7ri
@CTBell-uy7ri Рік тому
This tutorial was so helpful! I can't even describe
@SonnySangha
@SonnySangha Рік тому
I’m so glad it helped you dude!! #PAPAFAM
@chrisciampoli
@chrisciampoli Рік тому
Great stuff!
@lopo889
@lopo889 Рік тому
I like how his energy is, its just hype me up and forget this is a 3 hours live 😂
@jesserijke1359
@jesserijke1359 Рік тому
great tutorial again
@SuperPompey77
@SuperPompey77 Рік тому
On the West coast of Canada these live builds are when it is 3am. East coast of Canada are 4.5 hours in front and so OK for them. Can you do these sometimes either 3 hours before or 3 hours after so we can all get a chance to watch live. 3am is right in the middle of do i go to sleep or do i get up now. Thanks for your consideration.
@chrisciampoli
@chrisciampoli Рік тому
Hey Sonny, what do you use for your mock-ups?
@Clytax
@Clytax 9 місяців тому
Would be amazing if you could show the Android site of In app purchases aswell
@alexisscuderi196
@alexisscuderi196 4 місяці тому
this video helped me a lot, thanks!. Is it a bad practice if i restore purchases with a useEffect every time user logs in to the app?
@kherraaminembarek2150
@kherraaminembarek2150 Рік тому
You are the best
@chrisciampoli
@chrisciampoli Рік тому
What do you use to do your mockup's?
@facelessdev107
@facelessdev107 Рік тому
How are you casting your iPhone to Mac with the bezels ?
@iconpem5764
@iconpem5764 4 місяці тому
Sonny... Thank you very much. I really do appreciate. Would love to see you do google pay or paypal with react native.
@junenouh5404
@junenouh5404 Рік тому
Hello And Thank you for the wonderful Tut...unbeliveable nice... in the minut 2:17:33 it shows error that the apikey is const and we pass a string ... what's wrong with taht ? any idea ?
@tinytrickz
@tinytrickz 8 місяців тому
My Response in log can't show and this message, [Error: There is an issue with your configuration. Check the underlying error for more details. There's a problem with your configuration. None of the products registered in the RevenueCat dashboard could be fetched from App Store Connect (or the StoreKit Configuration file if one is being used). How to solve it? please
@GuilhermeSantos-fz9us
@GuilhermeSantos-fz9us Рік тому
THE MAANNN, nice tutorial.
@ChrisCiampoli-sl3gk
@ChrisCiampoli-sl3gk Рік тому
Rad stuff
@muhammadzubair6105
@muhammadzubair6105 5 днів тому
for those who have this classname error in the start , just create the app.d.ts file with the name of nativewind.d.ts, further read the documentation in typescript for it
@AIaskedAI
@AIaskedAI Рік тому
Hey sonny how can I create multiple Monthly subscription products for a single app? I tried creating two monthly subscription products and revenue cat doesn't allow me to create.
@sethheinzman5823
@sethheinzman5823 10 місяців тому
I’m using revenue car in my own application and right now if the user is subscribed to a standard subscription or premium they receive a certain amount of coins every month. However I’m doing that manually and storing the coins in firestore, and calculating how much the user is owed based on last expiration date vs expiration date that the user is now so I calculate the months in between and multiply that by the coins received each month. Is there a way to add coins every month with revenuecat without having to do it manually? Also how do you handle upgrades, so for example I have two subscriptions in my subscription group on Apple connect and one is standard the other is premium. I’m not sure if the user is refunded the standard and then upgraded to premium when they upgrade. Do you have a link to revenuecat at explaining how to do this?
@SaadiiiSaadiii
@SaadiiiSaadiii Рік тому
big fan bro
@matysw
@matysw Рік тому
2:27:37 scanned and it just opens the app regurarly not in development mode... any solution please?
@hkcheung1217
@hkcheung1217 Рік тому
About Modal, is there a way to make it work on android?
@yassinederkaoui5307
@yassinederkaoui5307 Рік тому
Hello. I don't have the developer mode on my iphone 12 with ios 16.3. I don't have xcode because i dont have a mac, how can i do please ?
@hamammsoleman9099
@hamammsoleman9099 Рік тому
How long has it been?
@enz1222
@enz1222 8 місяців тому
Bro you got ro he the happiest developer out here 😂
@alicodes22
@alicodes22 Рік тому
For icon prop type, you can do something like icon?: keyof typeof Ionicons.glyphMap (gives you back all the types for the icons :) ) Also for the screen prop type, screen: keyof RootStackParamList (is going to give all the options for the screens we created) so if we pass any incorrect screen name in our ActionRow component such as (This is goin to error out as it doesn’t match Demo)
@user-gt9fi8wd1z
@user-gt9fi8wd1z 5 місяців тому
how can I trigger a function on auto renewal
@ogt1407gabriel
@ogt1407gabriel Рік тому
oh shit i missed this stream but im here now
@beastnighttv
@beastnighttv 8 місяців тому
Still waiting, for Google Play tutorial.. 😢
@beastnighttv
@beastnighttv 6 місяців тому
when will this be posted ;-;
@beastnighttv
@beastnighttv Місяць тому
its been a year....
@felixmilome
@felixmilome 10 місяців тому
Anyone Knows one for Expo and Google Playstore? I cant find any recent on youtube.
@ogt1407gabriel
@ogt1407gabriel Рік тому
im watching from argentina
@marcinmaj3609
@marcinmaj3609 Рік тому
Why not stripe subscriptions? :(
@amankumar-zu3nh
@amankumar-zu3nh Рік тому
In your tinder clone video authentication and firebase commands are outdated. Can you make a new video with new commands just for that as an addition? Please Sonny. We are getting many errors 🙏🙏
@jackmullin8962
@jackmullin8962 Рік тому
Yeah most the old videos are outdated and tons of red line errors.
@PattyBeautCode
@PattyBeautCode Рік тому
Is there anyone wait for React Native EXPO + RevenueCat on Play Store like me ?
@danielayesnu2537
@danielayesnu2537 Рік тому
where is the android version papa?
@basi05
@basi05 10 місяців тому
Hi every one, I'm implementing revenueCat with REACT NATIVE, I'm getting stuck, after uploading Service Account Credentials JSON file for android , I see " Could not validate Subscription API Permission", and Per doucmentation I waited more then 36 hours, But on IOS is working fine. Any help would be appreciated , Thanks
@hubesh716
@hubesh716 10 місяців тому
hi are you done this Project??
@basi05
@basi05 10 місяців тому
@@hubesh716 yes
@developerbeck1619
@developerbeck1619 Рік тому
My friend Sonny we only have Windows operating system, i don't have Mac. I did as you wrote but I'm getting an error. Please make content easier for Windows users as well.
@srirams4310
@srirams4310 Рік тому
className is not working for me😐 any solutions?
@alihankuru3496
@alihankuru3496 Рік тому
ihave same error did u solve?
@alihankuru3496
@alihankuru3496 Рік тому
@@hubesh716 thx bro if u write import "nativewind/types" it resolves
@abdulrafay1951
@abdulrafay1951 Рік тому
bro, sync sound with lips properly
@user-sq7si4jz5h
@user-sq7si4jz5h 3 місяці тому
mon poth son suppe de meegs et mot eri❤
@adamkarlsson6815
@adamkarlsson6815 Рік тому
Can't understand why such a hight music ? hihi we hear music more than your voice really :)
@aymaneabarri
@aymaneabarri Рік тому
allah yj3al rabbi ysahal 3alik a5ouya hhhhhh
@ghouston2712
@ghouston2712 Рік тому
I wish people wouldn't use Expo, its bloat code central
@user-pq9xy6yo4k
@user-pq9xy6yo4k 2 місяці тому
Hey, try to make a vid without this awful music Just do not be noisy I don't like to watch ur videos for this music
@kamgdy89
@kamgdy89 Рік тому
wouldn't it be better to use react native cli?
@fractionimprovement2194
@fractionimprovement2194 11 місяців тому
If you are having trouble with an error like such: Cannot read property 'includes' of undefined, try putting a optional chaining '?." on the isProMember and refresh the app - const isProMember = customerInfo?.activeSubcsriptions?.includes(typesOfMembership.weekly) || customerInfo?.activeSubcsriptions?.includes(typesOfMembership.monthly) || null;
@muhammadzubair6105
@muhammadzubair6105 4 дні тому
Instead of passing , extend the ActionComponent props from TouchableOpacityProps and then we can directly pass all of the ToucahbleOpacity Props to the Action component like this type ActionRowProps = TouchableOpacityProps & { title:string; screen:any; color:any; requiresPro?:boolean; vertical?:boolean; icon?:any } export function ActionRow({title,screen,color,requiresPro,vertical,icon,...restProps}:ActionRowProps) { return ( {title} ) } and then calling the component in our screens
@yassinederkaoui5307
@yassinederkaoui5307 Рік тому
error Failed to load configuration of your project. [!] Invalid `Podfile` file: unexpected token at 'info Run CLI with --verbose flag for more details. '. # from /Users/expo/workingdir/build/ios/Podfile:14 # ------------------------------------------- # use_expo_modules! > config = use_native_modules! please assist me
@AB011
@AB011 Рік тому
if you write this error to ChatGPT ,will give you this suggestion ==> It seems like you're encountering an error when trying to build your iOS project using CocoaPods. The error message is indicating that there is an unexpected token in your Podfile on line 14. Here are a few steps to help you resolve this issue: Check line 14 of your Podfile and make sure that there are no syntax errors or typos. Make sure the use_expo_modules! and use_native_modules! commands are placed in the correct section of the Podfile. Try running the command pod install again. If the error persists, try running the command with the --verbose flag to see more details, as suggested by the error message.
In-app Subscriptions in React Native with Adapty (tutorial)
3:37:24
notJust․dev
Переглядів 54 тис.
顔面水槽がブサイク過ぎるwwwww
00:58
はじめしゃちょー(hajime)
Переглядів 50 млн
Історія загиблого Назара Небожинського
00:54
Суспільне Рівне
Переглядів 876 тис.
The Return of Another Protoss LEGEND! (StarCraft 2)
36:27
LowkoTV
Переглядів 49 тис.
Mobile Devs Hate Servers. Expo Wants To Fix That.
16:05
Theo - t3․gg
Переглядів 66 тис.
The ARM chip race is getting wild… Apple M4 unveiled
4:07
Fireship
Переглядів 718 тис.
The Soviet Obsession With Venus Revealed
16:15
The Space Race
Переглядів 28 тис.
Unveiling My Secret To Charging Software Clients | Vlog #8
13:26
Sonny Sangha
Переглядів 8 тис.
Top 9 React Native UI Component Libraries in 2023
10:12
Simon Grimm
Переглядів 64 тис.
Python + JavaScript - Full Stack App Tutorial
1:29:25
Tech With Tim
Переглядів 139 тис.