I am new to react native and I wants to monetize my app, so I am integrating Admob in react native, i created my app using npx create-react-native-app
command, i tried to see youtube ,google, chatgpt, bard but nothing's working and this is my last hope please help me here is my code,
app.json
Copybase.js --- the file where I am testing my ads but nothing showed up from last 2 days
import { Animated, Dimensions, Image, Pressable, StyleSheet, Text, View } from 'react-native';
import React, { useRef } from 'react';
import Header from '../components/Header';
import { useThContext } from '../reducon/context';
import { Linking } from 'react-native';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
const adUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx';
export default Copybase = ({ navigation }) => {
const animation = useRef(new Animated.Value(1)).current;
const bgColor = useRef(new Animated.Value(0)).current;
const handlePressIn = () => {
Animated.spring(animation, {
toValue: 0.97,
duration: 200,
useNativeDriver: true,
}).start();
Animated.timing(bgColor, {
toValue: 1,
duration: 200,
useNativeDriver: true,
}).start();
}
const handlePressOut = () => {
Animated.spring(animation, {
toValue: 1,
duration: 200,
useNativeDriver: true,
}).start();
Animated.timing(bgColor, {
toValue: 0,
duration: 200,
useNativeDriver: true,
}).start();
Linking.openURL(info.link);
}
const { info } = useThContext();
const backgroundColor = bgColor.interpolate({
inputRange: [0, 1],
outputRange: ['#749b38', '#648630'],
})
return (
<View>
<Header navi={navigation} text={'BASE LAYOUT'} BackButton={true} />
<View style={styles.container}>
<Image style={styles.image} source={info.image} />
<Pressable onPressIn={() => { handlePressIn() }} onPressOut={() => { handlePressOut() }}>
<Animated.View style={[styles.copyButton, { transform: [{ scale: animation }], backgroundColor: backgroundColor }]}>
<Text style={styles.copyButtonText}>COPY LAYOUT</Text>
</Animated.View>
</Pressable>
</View>
<BannerAd
unitId={TestIds.BANNER}
size={BannerAdSize.BANNER}
requestOptions={{
requestNonPersonalizedAdsOnly: true,
}}
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
height: '100%',
alignItems: 'center',
backgroundColor: '#f9f9f9',
},
image: {
width: Dimensions.get('window').width,
height: 300,
resizeMode: 'contain',
},
copyButton: {
marginTop: 40,
backgroundColor: '#749b38',
padding: 12,
borderRadius: 3,
shadowColor: "#000000",
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.16,
shadowRadius: 1.51,
elevation: 6,
},
copyButtonText: {
color: '#fff',
fontWeight: '700',
fontSize: 18,
}
});
the error that i am facing ----
Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleMobileAdsModule' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:null in handleError
at node_modules\expo\build\errors\ExpoErrorManager.js:null in createErrorHandler
at node_modules\expo\build\errors\ExpoErrorManager.js:null in <anonymous>
at node_modules\@react-native\js-polyfills\error-guard.js:null in ErrorUtils.applyWithGuard
at node_modules\metro-runtime\src\polyfills\require.js:null in guardedLoadModule
at http://192.168.29.76:19000/index.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:null in metroRequire
at http://192.168.29.76:19000/index.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:null in global
The issue is because react-native-google-mobile-ads is not compatible with Expo. As per the official documentation:
"This module contains custom native code which is NOT supported by Expo Go"
More info here
Another easy way to fix the problem is to execute a build with:
npx expo run:android
After that, you can use expo normally