🔴 Let’s build IN-APP SUBSCRIPTIONS with REACT NATIVE (RevenueCat, Tailwind CSS, Paywall, TypeScript)
ฝัง
- เผยแพร่เมื่อ 13 พ.ค. 2024
- 🚨 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
![[Full Episode] Hell's Kitchen Thailand EP.14 | 12 พ.ค. 67](http://i.ytimg.com/vi/MNspIlqlJcc/mqdefault.jpg)
This TH-cam 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.💯💥💥
Oh my, this is huge.. you're a blessing Sonny. 💓
finally finish with a very interesting react native tutorials, love it!
you have the best energy of anyone on youtube!! Everyone else's tutorials always make me fall asleep haha. Thanks for the quality content
Hahahaha thank you so much 🤙🏽
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!
Me too literally i also comment many youtubers but sonny sangha made this video and took my heart.
Thanks for making this! I love your videos and would love to see an Android version!
This tutorial was so helpful! I can't even describe
I’m so glad it helped you dude!! #PAPAFAM
Great stuff!
great tutorial again
I like how his energy is, its just hype me up and forget this is a 3 hours live 😂
You are the best
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.
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?
Hey Sonny, what do you use for your mock-ups?
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 ?
How are you casting your iPhone to Mac with the bezels ?
What do you use to do your mockup's?
THE MAANNN, nice tutorial.
big fan bro
Rad stuff
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.
Sonny... Thank you very much. I really do appreciate.
Would love to see you do google pay or paypal with react native.
how can I trigger a function on auto renewal
About Modal, is there a way to make it work on android?
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
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 ?
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
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?
2:27:37 scanned and it just opens the app regurarly not in development mode... any solution please?
Would be amazing if you could show the Android site of In app purchases aswell
How long has it been?
oh shit i missed this stream but im here now
Anyone Knows one for Expo and Google Playstore? I cant find any recent on youtube.
im watching from argentina
Bro you got ro he the happiest developer out here 😂
Why not stripe subscriptions? :(
where is the android version papa?
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
hi are you done this Project??
@@hubesh716 yes
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 🙏🙏
Yeah most the old videos are outdated and tons of red line errors.
className is not working for me😐 any solutions?
ihave same error did u solve?
@@hubesh716 thx bro if u write import "nativewind/types" it resolves
Still waiting, for Google Play tutorial.. 😢
when will this be posted ;-;
its been a year....
Is there anyone wait for React Native EXPO + RevenueCat on Play Store like me ?
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)
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.
bro, sync sound with lips properly
mon poth son suppe de meegs et mot eri❤
Can't understand why such a hight music ? hihi we hear music more than your voice really :)
allah yj3al rabbi ysahal 3alik a5ouya hhhhhh
I wish people wouldn't use Expo, its bloat code central
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
wouldn't it be better to use react native cli?
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
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;
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
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.