Monetize Your React Native & Expo Mobile Apps With Google Admob | Full Set Up Project Tutorial

Monetize Your React Native & Expo Mobile Apps With Google Admob | Full Set Up Project Tutorial | JS

Рет қаралды 26,335

Жыл бұрын

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.com/l/codetoco...
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

Пікірлер: 129

@cyb3rhunt3r097 Жыл бұрын

Bro , ive been getting errors since but after following your tutorial it finally works!! Thanks a lot man , God bless you !

@BugNinza Жыл бұрын

Glad I could help

@lrajoo11 Жыл бұрын

just what we needed, and so updated. thank you!

@BugNinza Жыл бұрын

I'm glad it helped

@PabloDoebber Жыл бұрын

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.

@BugNinza Жыл бұрын

Thanks a lot! By the way, I like Brazil's game in this World Cup😉

@phillip6746 9 ай бұрын

Perfect explained. The ad displayed in the app as expected. Thanks :)

@BugNinza 9 ай бұрын

Glad it was helpful! Keep Supporting

@thomasyost8665 Ай бұрын

Excellent advice man! Best tutorial I've seen on this.

@BugNinza Ай бұрын

Glad it was helpful!

@luisedwards3534 4 ай бұрын

Ty for the video man, is way easier to see it thant to read all the documentation

@BugNinza 4 ай бұрын

Happy coding 🤜🏻🤛🏻

@TechForSkillsEarning Жыл бұрын

Thanks Sir, Finally it's work ❤ Please Make videos "How to publish Our App On Plystore? "

@BugNinza Жыл бұрын

Ok soon

@calebcadainoo 5 ай бұрын

Thanks a lot bro. It really helped me

@BugNinza 5 ай бұрын

Happy coding 🤜🤛

@Usuario_jejeje Жыл бұрын

Incredible tutorial. Thanks!!

@BugNinza Жыл бұрын

Glad it helped! Keep Supporting

@Usuario_jejeje Жыл бұрын

@@BugNinza can you do a video with the AdsConsent library for de Europe Union Users??

@piotrrodzen772 Жыл бұрын

Thank you so much for it!

@BugNinza Жыл бұрын

You're welcome!

@SoapCS2 Жыл бұрын

Nicely Explained bro Good Work

@BugNinza Жыл бұрын

Glad it helped! Keep supporting!!

@ElderDesignConcepts Жыл бұрын

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?

@BugNinza Жыл бұрын

You are right in place. Check this out: kzfaq.info/get/bejne/pshmgtmnuM-cgZ8.html

@muhammadrabbi2211 Жыл бұрын

Awesome Video 😍 Thanks for this

@BugNinza Жыл бұрын

Glad you liked it!

@vruyrsaribekyan3379 Жыл бұрын

@@BugNinza where i can clone this code? Please upload to git

@vruyrsaribekyan3379 Жыл бұрын

@@BugNinza bottom tabs not working i dont know why

@phongnguyentrung6219 Жыл бұрын

Thank you for the great video !

@BugNinza Жыл бұрын

My pleasure!

@phongnguyentrung6219 Жыл бұрын

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

@Ethiotone 4 ай бұрын

great, it worked for me! can you do a part to of submitting the app to the play store?

@BugNinza 4 ай бұрын

Check this: kzfaq.info/get/bejne/pshmgtmnuM-cgZ8.html

@Ethiotone 4 ай бұрын

thanks, after i've implemented the test ads how do you make the real ad ids work @@BugNinza

@simuladosetecaplicativo6090 Жыл бұрын

I love it

@faithesthersagbohan2305 Жыл бұрын

Thank u bro

@zerodegreecoder Жыл бұрын

Thanks Man

@BugNinza Жыл бұрын

Happy to help

@sbmusic244 Жыл бұрын

Thaks Bor

@geovanesilva1110 10 ай бұрын

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 .

@BugNinza 10 ай бұрын

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.

@potatostories Жыл бұрын

thank you!

@BugNinza Жыл бұрын

You're welcome!

@cairoribeiro1886 Жыл бұрын

muito obrigado! Que O SENHOR o abençoe!!!

@BugNinza Жыл бұрын

Fico feliz que tenha ajudado!

@ahmedparbes Жыл бұрын

great. Its work

@BugNinza Жыл бұрын

Enjoy. Keep supporting

@igorito01 Жыл бұрын

So this Invariant Violation error is coming back: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.

@BugNinza Жыл бұрын

Don't test your code in the expo go app

@harmonyhaven01 Жыл бұрын

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 ?

@BugNinza Жыл бұрын

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)

@nguyenhuynh6769 Жыл бұрын

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?

@BugNinza Жыл бұрын

Yes, you need to add a valid adUnitId

@nguyenhuynh6769 Жыл бұрын

@@BugNinza Thanks pro. I did it.

@conflictoftheorders 7 ай бұрын

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?

@BugNinza 7 ай бұрын

optimize your code and do error handling well

@crashereryolo8310 Жыл бұрын

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?

@BugNinza Жыл бұрын

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.

@crashereryolo8310 Жыл бұрын

@@BugNinza my android app is currently ready to show ads but still can’t load them, does it have to be necessarily on production?

@wofan1000 Жыл бұрын

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?

@BugNinza Жыл бұрын

This app won't work on expo go. So, what build you are using?

@wofan1000 Жыл бұрын

@@BugNinza the package.json file says expo: 47.0.6 and expo dev client:2.0.0

@ody3666 Жыл бұрын

Do you have any estimates of how much we can earn per view depending on the type of ad?

@BugNinza Жыл бұрын

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!!!!

@ody3666 Жыл бұрын

@@BugNinza thanks!

@dev_M-ahmed 5 ай бұрын

If I deploy app in playstore any change in admob account is needed ?

@BugNinza 5 ай бұрын

setup your app for production. check rules and upgrade it

@rkcoder Жыл бұрын

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?

@BugNinza Жыл бұрын

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.

@rkcoder Жыл бұрын

@@BugNinza can you please make a tutorial for this?

@musameric8671 Жыл бұрын

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?

@BugNinza Жыл бұрын

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

@southredmondtoxik1885 Жыл бұрын

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?

@LucasPereira-fz9of Жыл бұрын

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.

@BugNinza Жыл бұрын

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: kzfaq.info/get/bejne/pshmgtmnuM-cgZ8.html

@ClaudiaTenorio-ic2xs Жыл бұрын

Hi Lucas! Did you solve the problem? I have the same.

@LucasPereira-fz9of Жыл бұрын

@@ClaudiaTenorio-ic2xs Hi Claudia! Yes, i maked a new project follow the instructions in this video and the other video (link: kzfaq.info/get/bejne/pshmgtmnuM-cgZ8.html) and work! 😁

@LucasPereira-fz9of Жыл бұрын

@@ClaudiaTenorio-ic2xs My app is short, that's why i achieved make a new project. Copied the files, and work

@ClaudiaTenorio-ic2xs Жыл бұрын

@@LucasPereira-fz9of Thank you Lucas! I'm trying with the video but I can't find what's happening to me :'(

@jeffk388 Жыл бұрын

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.

@BugNinza Жыл бұрын

Check your app.json , if everything is good then retry. Make sure to follow the video carefully

@arte_de_ouvir 6 ай бұрын

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

@meandmydodge 6 күн бұрын

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

@TechForSkillsEarning Жыл бұрын

Sir can I follow this process without Android studio using, actual device android phone

@BugNinza Жыл бұрын

I'm not using Android studio in this video

@TechForSkillsEarning Жыл бұрын

@Bug Ninza वो क्यो कहता है git install करने ? Why does he say ? to install git ? Can I not work without git?

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

Now how do I generate the .apk of my app with the ads??

@BugNinza 6 ай бұрын

follow the docs: docs.expo.dev/build/setup/

@theDayisToday01 Жыл бұрын

After putting Ads , what next , (I have to reupload up) which command to use

@BugNinza Жыл бұрын

Follow the video and test the ad (use your own ad unit id)

@theDayisToday01 Жыл бұрын

@@BugNinza after everything in the video , what next

@BugNinza Жыл бұрын

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

@theDayisToday01 Жыл бұрын

thank you bro

@idohan4513 Жыл бұрын

thank you🪄🪄

@BugNinza Жыл бұрын

Keep supporting..!!

@vishalchincholi4490 Жыл бұрын

I have followed everything correctly but no luck, ads are not being displayed at all, not even test ads, just a blank space there

@BugNinza Жыл бұрын

Use your Ad Unit Id properly. And revise your code once. Let me know if this works. Otherwise I will update this video.

@anaturuchii1389 Жыл бұрын

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

@muhammadrabbi2211 Жыл бұрын

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.

@BugNinza Жыл бұрын

If you wanna show ads on button press. Then make an arrow function and pass the "ad" code to it.

@kvanca2330 Жыл бұрын

Cant we try this with expo app?

@BugNinza Жыл бұрын

But it won't work on expo go app

@kvanca2330 Жыл бұрын

@@BugNinza so we have to use emulator right?

@ShortLife2645N Жыл бұрын

How to add react native cli

@BugNinza Жыл бұрын

The process is the same. But you have to customize a little bit for the bare react native code

@rajeshkrchaudhary3245 Жыл бұрын

Bro that is showing only test ads not real

@BugNinza Жыл бұрын

For real ads you need to intialize your google admob account

@rajeshkrchaudhary3245 Жыл бұрын

How to initialise admob account

@devapk9555 Жыл бұрын

frustrating!

@devapk9555 Жыл бұрын

thanks dear, i was wrong, thanks a lot! you saved my life

@BugNinza Жыл бұрын

Hihi😁 happy coding 🥳

@celebritycloud3410 Жыл бұрын

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.

@BugNinza Жыл бұрын

Sometimes the build fails. Due to internet or internal issue. Retry.

@nithinmon5416 Жыл бұрын

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

@BugNinza Жыл бұрын

If you have adUnitId then replace _DEV_ with your id.

@nithinmon5416 Жыл бұрын

@@BugNinza adUnitId = 'ca-app-pub-****************/**********'; like this right ?

@nithinmon5416 Жыл бұрын

Pls reply bro

@rajeshkrchaudhary3245 Жыл бұрын

@@nithinmon5416bro it’s work or not

@JessperTV 6 ай бұрын

@@nithinmon5416 hello dude, did you resolve the problem?