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

Рет қаралды 94,813

Күн бұрын

🚨 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

@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 Жыл бұрын

Me too literally i also comment many youtubers but sonny sangha made this video and took my heart.

@PattyBeautCode Жыл бұрын

This KZfaq 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.💯💥💥

@dje7382 Жыл бұрын

Oh my, this is huge.. you're a blessing Sonny. 💓

@Usq7213 Жыл бұрын

finally finish with a very interesting react native tutorials, love it!

@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 Жыл бұрын

Hahahaha thank you so much 🤙🏽

@CTBell-uy7ri Жыл бұрын

This tutorial was so helpful! I can't even describe

@SonnySangha Жыл бұрын

I’m so glad it helped you dude!! #PAPAFAM

@lopo889 Жыл бұрын

I like how his energy is, its just hype me up and forget this is a 3 hours live 😂

@muhammadzubair6105 21 күн бұрын

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

@kevinwang6066 Жыл бұрын

Thanks for making this! I love your videos and would love to see an Android version!

@chrisciampoli Жыл бұрын

Great stuff!

@jesserijke1359 Жыл бұрын

great tutorial again

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

@iconpem5764 4 ай бұрын

Sonny... Thank you very much. I really do appreciate. Would love to see you do google pay or paypal with react native.

@kherraaminembarek2150 Жыл бұрын

You are the best

@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 ?

@facelessdev107 Жыл бұрын

How are you casting your iPhone to Mac with the bezels ?

@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?

@chrisciampoli Жыл бұрын

What do you use to do your mockup's?

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

@ChrisCiampoli-sl3gk Жыл бұрын

Rad stuff

@Clytax 9 ай бұрын

Would be amazing if you could show the Android site of In app purchases aswell

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

@GuilhermeSantos-fz9us Жыл бұрын

THE MAANNN, nice tutorial.

@user-gt9fi8wd1z 6 ай бұрын

how can I trigger a function on auto renewal

@sethheinzman5823 11 ай бұрын

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 Жыл бұрын

big fan bro

@matysw Жыл бұрын

2:27:37 scanned and it just opens the app regurarly not in development mode... any solution please?

@tinytrickz 9 ай бұрын

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

@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 ?

@hkcheung1217 Жыл бұрын

About Modal, is there a way to make it work on android?

@ogt1407gabriel Жыл бұрын

oh shit i missed this stream but im here now

@hamammsoleman9099 Жыл бұрын

How long has it been?

@enz1222 9 ай бұрын

Bro you got ro he the happiest developer out here 😂

@felixmilome 10 ай бұрын

Anyone Knows one for Expo and Google Playstore? I cant find any recent on youtube.

@ogt1407gabriel Жыл бұрын

im watching from argentina

@chrisciampoli Жыл бұрын

Hey Sonny, what do you use for your mock-ups?

@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 Жыл бұрын

Yeah most the old videos are outdated and tons of red line errors.

@marcinmaj3609 Жыл бұрын

Why not stripe subscriptions? :(

@basi05 11 ай бұрын

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 11 ай бұрын

hi are you done this Project??

@basi05 11 ай бұрын

@@hubesh716 yes

@muhammadzubair6105 20 күн бұрын

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

@PattyBeautCode Жыл бұрын

Is there anyone wait for React Native EXPO + RevenueCat on Play Store like me ?

@danielayesnu2537 Жыл бұрын

where is the android version papa?

@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 Жыл бұрын

className is not working for me😐 any solutions?

@alihankuru3496 Жыл бұрын

ihave same error did u solve?

@alihankuru3496 Жыл бұрын

@@hubesh716 thx bro if u write import "nativewind/types" it resolves

@beastnighttv 8 ай бұрын

Still waiting, for Google Play tutorial.. 😢

@beastnighttv 7 ай бұрын

when will this be posted ;-;

@beastnighttv 2 ай бұрын

its been a year....

@aymaneabarri Жыл бұрын

allah yj3al rabbi ysahal 3alik a5ouya hhhhhh

@abdulrafay1951 Жыл бұрын

bro, sync sound with lips properly

@adamkarlsson6815 Жыл бұрын

Can't understand why such a hight music ? hihi we hear music more than your voice really :)

@user-sq7si4jz5h 3 ай бұрын

mon poth son suppe de meegs et mot eri❤

$@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;

@ghouston2712 Жыл бұрын

I wish people wouldn't use Expo, its bloat code central

@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 Жыл бұрын

wouldn't it be better to use react native cli?

@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 Жыл бұрын

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.