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

Подписаться 262 тыс.

Просмотров 95 тыс.

50% 1

🚨 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

Опубликовано:

28 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 68

@PattyBeautCode Год назад

This RU-vid 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 🤙🏽

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

@muhammadzubair6105 22 дня назад

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

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

@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 5 месяцев назад

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 ?

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

@facelessdev107 Год назад

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

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

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?

@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

@PattyBeautCode Год назад

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

@danielayesnu2537 Год назад

where is the android version papa?

@muhammadzubair6105 21 день назад

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

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