Skip to main content
Solución encontrada al planteo inicial
Origen Enlace
Raul
  • 43
  • 1
  • 7

LO QUE FINALMENTE HICE, Y ANDUVO

.\package.json

Dependencias "react-native-admob": "^2.0.0-beta.6",

.\android\settings.gradle

include ':react-native-admob'
project(':react-native-admob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-admob/android')

.\android\app\build.gradle

dependencies {
implementation 'com.google.android.gms:play-services-ads:19.7.0'
}

.\android\app\src\main\AndroidManifest.xml

<application
(...)
   <!--
   Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713
   -->
    <meta-data
      android:name="com.google.android.gms.ads.APPLICATION_ID"
      android:value="ca-app-pub-3940256099942544~3347511713" />

Llamada desde el archivo.js

import { AdMobBanner } from 'react-native-admob';
(...)
<AdMobBanner
   adSize="banner" // "largeBanner"
   adUnitID="ca-app-pub-3940256099942544/6300978111"
/>

LO QUE FINALMENTE HICE, Y ANDUVO

.\package.json

Dependencias "react-native-admob": "^2.0.0-beta.6",

.\android\settings.gradle

include ':react-native-admob'
project(':react-native-admob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-admob/android')

.\android\app\build.gradle

dependencies {
implementation 'com.google.android.gms:play-services-ads:19.7.0'
}

.\android\app\src\main\AndroidManifest.xml

<application
(...)
   <!--
   Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713
   -->
    <meta-data
      android:name="com.google.android.gms.ads.APPLICATION_ID"
      android:value="ca-app-pub-3940256099942544~3347511713" />

Llamada desde el archivo.js

import { AdMobBanner } from 'react-native-admob';
(...)
<AdMobBanner
   adSize="banner" // "largeBanner"
   adUnitID="ca-app-pub-3940256099942544/6300978111"
/>
Origen Enlace
Raul
  • 43
  • 1
  • 7

¿Cómo debería implementar la carga previa de AdMob y un banner en VS Code & React Native & Javascript?

Quiero implementar una publicidad tipo Banner de AdMob. He realizado todos los pasos sugeridos en el tutorial de AdMob ver tutorial , pero no logro interpretar cómo llamar al método inicialice(), es decir, dónde incluir el código siguiente:

    import com.google.android.gms.ads.MobileAds;
    import com.google.android.gms.ads.initialization.InitializationStatus;
    import com.google.android.gms.ads.initialization.OnInitializationCompleteListener;

    public class MainActivity extends AppCompatActivity {
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            MobileAds.initialize(this, new OnInitializationCompleteListener() {
                @Override
                public void onInitializationComplete(InitializationStatus initializationStatus) {
                }
            });
        }
    }

Esta es mi App.js para ensayos. ¿En dónde y cómo debería insertar el código anterior?

    import React from 'react';
    import { SafeAreaView, StyleSheet } from 'react-native';

    import { NavigationContainer } from '@react-navigation/native';
    import { createStackNavigator } from '@react-navigation/stack';

    import homeTest from './homeTest';
    import secondPageTestPDF from './secondPageTestPDF';

    const Stack = createStackNavigator();

    const App = () => {
      return (
        <>
          <SafeAreaView style={styles.sectionContainer}>
            <NavigationContainer>
              <Stack.Navigator initialRouteName="Home page">
                <Stack.Screen
                  name="Home page"
                  component={homeTest}
                />
                <Stack.Screen
                  name="Crear PDF"
                  component={secondPageTestPDF}
                />
              </Stack.Navigator>
            </NavigationContainer> 
          </SafeAreaView>
        </>
      );
    };

    const styles = StyleSheet.create({
      sectionContainer: {
        flex: 1,
        justifyContent: 'flex-start',
        paddingHorizontal: 15,
        textAlignVertical: 'center',
        paddingVertical: 15,
        backgroundColor:  'palegreen' //'#ffd700'
      },
      sectionTitle: {
        fontSize: 24,
        fontWeight: '600',
        marginBottom: 20,
      },
    });

    export default App;

Finalmente, en la estructura de mi proyecto dentro de Visual Studio Code no encuentro el archivo para implementar el AdView, que según el tutorial debería escribirse así:

    # main_activity.xml
    ...
      <com.google.android.gms.ads.AdView
          xmlns:ads="http://schemas.android.com/apk/res-auto"
          android:id="@+id/adView"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_centerHorizontal="true"
          android:layout_alignParentBottom="true"
          ads:adSize="BANNER"
          ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
      </com.google.android.gms.ads.AdView>
    ...

Espero haberme explicado bien y puedan orientarme.