Monetize Your React Native & Expo Mobile Apps With Google Admob | Full Set Up Project Tutorial | JS
HTML-код
- Опубликовано: 26 сен 2024
- Hello guys, My name is Rohit Kumar Thakur. In this video, I will show you, how to use react native google admob in the react native & expo mobile apps.
Expo AdMob is depracted for the SDK version and above. So, you have to upgrade your application to this react native mobile ads package. In this video, I am working on the SDK version 46 of react native expo. I am using development build to get our job done beacuse the expo go does not support the classic react native package.
React Native Expo is a cross-platform framework, which gonna helps you to build mobile apps for both Android & iOS devices.
The code part is not that much tough. You just have to follow the video to get the desired output. Happy Hacking
𝐁𝐨𝐨𝐤 ( 𝐅𝐫𝐨𝐦 𝐂𝐨𝐝𝐞 𝐓𝐨 𝐂𝐨𝐧𝐧𝐞𝐜𝐭𝐢𝐨𝐧𝐬: 𝐀 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫’𝐬 𝐠𝐮𝐢𝐝𝐞 𝐭𝐨 𝐛𝐮𝐢𝐥𝐝𝐢𝐧𝐠 𝐚 𝐬𝐨𝐜𝐢𝐚𝐥 𝐜𝐚𝐫𝐞𝐞𝐫 )
Amazon India: amzn.eu/d/axYh0B4
Amazon Worldwide: a.co/d/acqJOYR
Gumroad (pdf): ninza7.gumroad...
Topics covered:
✅ Use of react native google mobile ads package
✅ Set-up of Google Admob Account For Android & iOS
✅ Use of expo dev client
✅ Use of development build method to build expo mobile apps
✅ How to show banner ads in react native & expo mobile apps using Google Admob
✅ How to show Interstitial ads in react native & expo mobile apps using Google Admob
✅ How to show Reward ads in react native & expo mobile apps using Google Admob
My social Links:
Instagram: / _ninza7
Twitter: / _ninza7
Website: ninza7.me
Video widgets edited by: / kaushal_2319
Music Source: NCS
Tags: react native, react native tutorial, react native app, react native project, react native tutorial for beginners, react native navigation, react native expo, react native full course, react native animation, react native crash course, react native app development, react native app tutorial, react native app project, react native android, react native ios, react native android app, react native developer, react native CLI, react native crash course, create react native app, code step by step react native, react native design, deploy react native app, react native tutorial in Hindi, react native navigation, what is react native, react native projects, learn react native, react native setup, react native expo tutorial for beginners, react native UI, react native expo, expo react native, react native expo tutorial, small projects in react native, admob, react native admob, expo admob, admob sign in, admob sign up
#reactjs #javascript #reactnative #ios #android #react
Bro , ive been getting errors since but after following your tutorial it finally works!! Thanks a lot man , God bless you !
Glad I could help
just what we needed, and so updated. thank you!
I'm glad it helped
Thank you very much for this video. I wish much success with the channel and as a programmer. I hadn't found any Brazilian videos teaching this.
Thanks a lot! By the way, I like Brazil's game in this World Cup😉
Perfect explained. The ad displayed in the app as expected. Thanks :)
Glad it was helpful! Keep Supporting
Excellent advice man! Best tutorial I've seen on this.
Glad it was helpful!
Ty for the video man, is way easier to see it thant to read all the documentation
Happy coding 🤜🏻🤛🏻
Please also make admob integration video for react native cli.
Thanks Sir, Finally it's work ❤ Please Make videos "How to publish Our App On Plystore? "
Ok soon
Nicely Explained bro Good Work
Glad it helped! Keep supporting!!
my test ad is not showing!
[googleMobileAds/error-code-internal-error] Something happened internally; for instance, an invalid response was received from the ad server.
at node_modules
eact-native-google-mobile-ads\src\ads\BaseAd.tsx:null in onNativeEvent
at node_modules
eact-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in invokeGuardedCallbackProd
- ... 7 more stack frames from framework internals
getting this error ? any update how to fix it ?
Follow the video properly and don't test your code in the expo go app. It won't work. Because for ads, I am using the native code.( As per latest expo SDK updates)
Do you have any estimates of how much we can earn per view depending on the type of ad?
Yes! Go to the official website of Google AdMob:
admob.google.com/home/
Scroll down Go the to section "See how much you could earn from AdMob" Select your region, select devices, select ad type. And BOOM!!!!
@@BugNinza thanks!
Hi Bro,
i know how to develop ios and android apps also how to submit in App store, Playstore successfully. already done. (newly entered in mobile apps development dimension)
Simple Question ... how to receive money from customers in my account ? when they buy my app the money should come in my PayPal account.
This is the area which i have't try yet ...
Thanks in advance
Brother, is it still working today? because I really can't get it to work
Thanks a lot bro. It really helped me
Happy coding 🤜🤛
Hi friend, good evening! All good? I hope so. I'm a newbie in the field of programming and I saw your tutorial that clarified a lot of things for me. But I would like to ask what actually changes between adding ads to my project with expo using the development build for a project with expo go, I don't know if there is any difference or if it changes something?, if you can give a direction I would be very grateful, thank you .
First, they began using Expo and created individual packages for Expo components. However, the team eventually realized that the basic React Native approach was more dependable and strong. To enhance this strength, they figured out how to include React Native package code within Expo. But these changes weren't compatible with Expo Go. To make these adjustments, you'll require Android Studio, correct? As a solution, they introduced a development build and preview mode to test the Expo code.
So this Invariant Violation error is coming back: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.
Don't test your code in the expo go app
great, it worked for me! can you do a part to of submitting the app to the play store?
Check this: ruclips.net/video/pb6OvvSi8Qk/видео.html
thanks, after i've implemented the test ads how do you make the real ad ids work
@@BugNinza
brother what's the SDK version your working with
Awesome Video 😍 Thanks for this
Glad you liked it!
@@BugNinza where i can clone this code? Please upload to git
@@BugNinza bottom tabs not working i dont know why
How to resolve build error of::
Android build failed:
Gradle build failed with unknown error. See logs for the "...
This happens at the end of development build.
Check your app.json , if everything is good then retry. Make sure to follow the video carefully
same error
Did you found any solution?
I get your same error generating the build
and I got " 'RNGoogleMobileAdsModule' could not be found." when testing in my expo
Thank you so much for it!
You're welcome!
Thanks for your video. It's very useful for me. But I have a question for you. When public on play store. I need to change android_app_id and adUnitId for possible as on admob account?
Yes, you need to add a valid adUnitId
@@BugNinza Thanks pro. I did it.
I have to publish an android app but for now I am in the “internal testing” process. Test ads are working fine but in this process if I set the adunit id the ad wont show. Do I have to publish the app for the ads to work?
Your app may not be approved for production yet. If your app is still in the review process, it won't be able to show ads.
@@BugNinza my android app is currently ready to show ads but still can’t load them, does it have to be necessarily on production?
Hi, so i followed the totorial and no mater what I do I keep getting "This property name is not allowed by the Scheme" when I add the react-native-google-moble-ads. How do I fix it?
This app won't work on expo go. So, what build you are using?
@@BugNinza the package.json file says expo: 47.0.6 and expo dev client:2.0.0
I have followed everything correctly but no luck, ads are not being displayed at all, not even test ads, just a blank space there
Use your Ad Unit Id properly. And revise your code once. Let me know if this works. Otherwise I will update this video.
Make sure you are not using an adBlocker or DNS service that blocks ads on your device that you are using to test. I deactivated my adBlocker DNS and it worked
Thank you for the great video !
My pleasure!
@@BugNinza I have a problem using expo-dev-client. When I add the library it doesn't run. For example, adding the expo-clipboard library will display an error when using it. Help me please
Thanks for these tutorials they seem to be the only ones that work for me. However with the admob I am noticing that it causes my app to freeze on the emulator when switching from one screen to the next screen that has the ad (after pushing a button). If I remove the admob code and save it, the app works fine, if I input the code while the app is on the particular screen I want the ad on, it will display the ad. If I start from the beginning with the admob code again, its back to freezing. Any ideas?
optimize your code and do error handling well
If I deploy app in playstore any change in admob account is needed ?
setup your app for production. check rules and upgrade it
hi bro , im challenging with this error for 2 days : ERROR Invariant Violation: requireNativeComponent: "RNGoogleMobileAdsBannerView" was not found in the UIManager.
i did all things in the video. How can i solve it?
This error usually occurs in React Native when the required native module is not properly linked or installed. Start fresh and follow the video properly
Bro I have the same issue. I app was already published in play store. so I can't start a new project. How can I solve this issue for the current project?
muito obrigado! Que O SENHOR o abençoe!!!
Fico feliz que tenha ajudado!
I love it
I face a problem, when i click on the button first time ad loaded successfully..
>> But, if i again press on the button then it's not working!
>> If you have enough time then please make a new video about my problem..
NOTE: it's not only my problem but also many persons face the same problem.
If you wanna show ads on button press. Then make an arrow function and pass the "ad" code to it.
Now how do I generate the .apk of my app with the ads??
follow the docs: docs.expo.dev/build/setup/
Cant we try this with expo app?
But it won't work on expo go app
@@BugNinza so we have to use emulator right?
Sir can I follow this process without Android studio using, actual device android phone
I'm not using Android studio in this video
@Bug Ninza वो क्यो कहता है git install करने ? Why does he say ? to install git ? Can I not work without git?
Thank you for the great video! Work, but when i build for AAB or APK, return: ERROR Invariant Violation: requireNativeComponent: "RNGoogleMobileAdsBannerView" was not found in the UIManager.
It seems that the RNGoogleMobileAdsBannerView component is not available in your production build.
To resolve this issue, you need to make sure that the necessary native modules are properly linked in your app's production build.
If you wanna know how to build the APK and AAB for production then check this video: ruclips.net/video/pb6OvvSi8Qk/видео.html
Hi Lucas! Did you solve the problem? I have the same.
@@ClaudiaTenorio-ic2xs Hi Claudia! Yes, i maked a new project follow the instructions in this video and the other video (link: ruclips.net/video/pb6OvvSi8Qk/видео.html)
and work! 😁
@@ClaudiaTenorio-ic2xs My app is short, that's why i achieved make a new project. Copied the files, and work
@@LucasPereira-fz9of Thank you Lucas! I'm trying with the video but I can't find what's happening to me :'(
i get this error when i try to build app after installing
react-native-google-mobile-ads
[stderr] FAILURE: Build completed with 2 failures.
[stderr] 1: Task failed with an exception.
[stderr] -----------
[stderr] * Where:
[stderr] Build file '/home/expo/workingdir/build/node_modules/react-native-google-mobile-ads/android/build.gradle' line: 75
[stderr] * What went wrong:
[stderr] A problem occurred evaluating project ':react-native-google-mobile-ads'.
[stderr] > Cannot get property 'googleMobileAdsJson' on extra properties extension as it does not exist
[stderr] * Try:
[stderr] > Run with --stacktrace option to get the stack trace.
[stderr] > Run with --info
[stderr] or --debug option to get more log output.
[stderr] > Run with
[stderr] --scan
[stderr] to get full insights.
[stderr] ==============================================================================
[stderr] 2: Task failed with an exception.
[stderr] -----------
[stderr] * What went wrong:
[stderr] A problem occurred configuring project ':react-native-google-mobile-ads'.
[stderr] > compileSdkVersion is not specified. Please add it to build.gradle
[stderr] * Try:
[stderr] > Run with --stacktrace option to get the stack trace.
[stderr] > Run with --info or --debug option to get more log output.
[stderr] > Run with --scan to get full insights.
[stderr] ==============================================================================
[stderr] * Get more help at help.gradle.org
Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.
You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.
See docs.gradle.org/7.5.1/userguide/command_line_interface.html#sec:command_line_warnings
5 actionable tasks: 5 executed
[stderr] BUILD FAILED in 2m 10s
Error: Gradle build failed with unknown error. See logs for the "Run gradlew" phase for more information.
Sometimes the build fails. Due to internet or internal issue. Retry.
Thank u bro
when publishing these ads to a real app, do I need to get user consent?
Does it matter which countries the users are from for consent?
Yes, when using AdMob to serve ads in your app, you may need to obtain user consent for the collection, sharing, and use of personal data for ads personalization.
@@BugNinza can you please make a tutorial for this?
Thaks Bor
After putting Ads , what next , (I have to reupload up) which command to use
Follow the video and test the ad (use your own ad unit id)
@@BugNinza after everything in the video , what next
If your ad is running fine (real ad not test ad). Then use it in your application. Make AAB or APK. Publish it in playstore or app store. Make fortune
thank you bro
Thanks Man
Happy to help
thank you!
You're welcome!
How to add react native cli
The process is the same. But you have to customize a little bit for the bare react native code
Bro that is showing only test ads not real
For real ads you need to intialize your google admob account
How to initialise admob account
thank you🪄🪄
Keep supporting..!!
frustrating!
thanks dear, i was wrong, thanks a lot!
you saved my life
Hihi😁 happy coding 🥳
TypeError: null is not an object (evaluating 'RNAppModule.eventsNotifyReady') getting when rewarded.load()
It's a type error. Check your code. Build your application correctly. You can send me a snap of your error on my social media handle.
@@BugNinza i got the same error. did you solve it?
Same here! Any solution?
Hi Bro I have followed and done everything but how to change my test ads to production ads
const adUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-****************/**********';
this is my adUnitId so should I remove __DEV__ ? TestIds.BANNER : to run my production ads
If you have adUnitId then replace _DEV_ with your id.
@@BugNinza adUnitId = 'ca-app-pub-****************/**********'; like this right ?
Pls reply bro
@@nithinmon5416bro it’s work or not
@@nithinmon5416 hello dude, did you resolve the problem?
This is great information! I've built several apps this same way. Do you happen to have any information on how to fill out Google Play's Data Safety questions to release an app using Expo and AdMob?
You are right in place. Check this out: ruclips.net/video/pb6OvvSi8Qk/видео.html
great. Its work
Enjoy. Keep supporting
Incredible tutorial. Thanks!!
Glad it helped! Keep Supporting
@@BugNinza can you do a video with the AdsConsent library for de Europe Union Users??