i had create an android mobile application with react native and expo framework. i did the code to add a banner ads in the home component of my application. i used react-native-google-mobile-ads package. when i'm in development mode the banner appear correctly in my emulator but when i publish my application on google play store and i download my app on my smartphone, the banner don't appear. Please, someone know why ?
import React, { useState, useRef, useEffect } from 'react';
import { Pressable, Modal, TextInput, StyleSheet, View, Text, Button, Share, Alert } from 'react-native';
import * as Location from 'expo-location';
import i18n from '../i18n.js';
import mobileAds, { AdsConsent, AdsConsentStatus, BannerAd, TestIds, BannerAdSize } from 'react-native-google-mobile-ads';
import { firestore } from '../FirebaseConfig.js';
import { doc, setDoc } from "firebase/firestore";
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as Network from 'expo-network';
function Home() {
//define variables and state
const adUnitId = __DEV__ ? TestIds.BANNER : "ca-app-pub-7771306695979114/8272761826";
const [location, setLocation] = React.useState(null);
const [errorMSG, setErrorMSG] = React.useState(null);
const [modalVisible, setModalVisible] = useState(true);
const [name, setName] = React.useState("");
const [firstname, setFirstname] = React.useState("");
const [consent, setConsent] = React.useState(null);
const consentInfo = React.useRef();
const formAvailable = React.useRef();
const status = React.useRef();
const [docId, setDocId] = useState(null);
let latitude = null;
let longitude = null;
let altitude = null;
useEffect(() => {
const docIds = async () => {
try {
const value = await AsyncStorage.getItem('docId');
if (value !== null) {
// value previously store
setDocId(value);
} else {
console.log('they is not doc id for now');
}
} catch (e) {
// error reading value
console.error(e);
}
};
docIds();
//function to clear the async storage. uncomment if you need it
//AsyncStorage.clear();
//AdsConsent.reset();
}, []);
//function to add consent status
async function addUsersConsentInfos() {
formAvailable.current = await consentInfo.current.isConsentFormAvailable;
status.current = await consentInfo.current.status;
};
//function to add users consent
async function adsUserConsent() {
//request user info status
consentInfo.current = await AdsConsent.requestInfoUpdate();
addUsersConsentInfos();
if (consentInfo.current.isConsentFormAvailable !== undefined && consentInfo.current.status !== undefined) {
if (consentInfo.current.isConsentFormAvailable && consentInfo.current.status === AdsConsentStatus.REQUIRED) {
const formResult = await AdsConsent.showForm();
}
const {storeAndAccessInformationOnDevice} = await AdsConsent.getUserChoices();
//verify the store and acces device info status (true or false)
if (storeAndAccessInformationOnDevice === false) {
setConsent(false);
/**
* The user declined consent for purpose 1,
* the Google Mobile Ads SDK won't serve ads.
*/
} else if (storeAndAccessInformationOnDevice === true) {
//modify consent variable state
setConsent(true);
//initialize the ad load
await mobileAds()
.setRequestConfiguration({
// Indicates that you want your content treated as child-directed for purposes of COPPA.
tagForChildDirectedTreatment: true,
// Indicates that you want the ad request to be handled in a
// manner suitable for users under the age of consent.
tagForUnderAgeOfConsent: true,
})
//initialize the mobile ads
mobileAds().initialize();
} else if (storeAndAccessInformationOnDevice === undefined ) {
console.log('store access status is undefined');
} else if (storeAndAccessInformationOnDevice === null) {
console.log('store access status is null');
} else {
console.log('on ne sait pas');
}
} else {
console.log('consent info undefined');
const formResult = await AdsConsent.showForm();
};
};
//call the adsUserConsent function
adsUserConsent();
return (
<View style={styles.container}>
{ docId === null ?
<Modal
animationType="slide"
visible={modalVisible}
>
<TextInput style={styles.input} placeholder={i18n('name')} onChangeText={setName} value={name}/>
<TextInput style={styles.input} placeholder={i18n('firstname')} onChangeText={setFirstname} value={firstname}/>
<Pressable style={styles.submit} onPress={onPress}>
<Text style={styles.textPressable}>{i18n('validate')}</Text>
</Pressable>
</Modal>
: null
}
<Button title={i18n('addPosition')} onPress={getUserLocation}/>
<Text style={styles.text}>{text}</Text>
<Button title={i18n('sharePosition')} onPress={sharePosition}/>
<Text>{"\n\n\n\n"}</Text>
{ consent === true ?
<BannerAd
unitId={adUnitId}
size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
/>
: null }
</View>
)
};
export default Home;
i have a dev web site with app-ads.txt. my app is ready and approuve by google mobile ads and google play store. all the annexe file like app.json was correctly configure as you can see next :
app.json
{
"expo": {
"owner": "mg_production",
"name": "my position",
"slug": "my-position",
"version": "1.0.7",
"orientation": "portrait",
"icon": "./assets/ic_launcher.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/ic_launcher.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/ic_launcher.png",
"backgroundColor": "#ffffff"
},
"package": "com.mg_production.myposition",
"versionCode": 8
},
"web": {
"favicon": "./assets/ic_launcher.png"
},
"plugins": [
"expo-localization",
[
"expo-build-properties",
{
"android": {
"extraProguardRules": "-keep class com.google.android.gms.internal.consent_sdk.** { *; }"
}
}
]
],
"extra": {
"eas": {
"projectId": "c7ead926-a6f3-4db9-80ef-3596f30d421c"
}
}
},
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-7771306695979114~3792830459",
"delay_app_measurement_init": true
}
}