only white screen is displayed when app is initialised

Question

when i aunch the app the only thing i see is a big white screen , there is not UI displayed , can anyone please provide me with the solution of it . I have coded on React Native . i had serched a lot on internet but there is not a single solution regarding it... Best Regards

App.js:-

import React, {useEffect, useState} from 'react';
import {Button} from 'react-native';
import admob, {MaxAdContentRating} from '@react-native-firebase/admob';
import {
  BannerAd,
  BannerAdSize,
  InterstitialAd,
  AdEventType,
} from '@react-native-firebase/admob';
import firebase from 'firebase';

const BanneradUnitId = 'ca-app-pub-7184661797309439/5996869501';

const InterstetialadUnitId = ' ca-app-pub-7184661797309439/5399949611';

const interstitial = InterstitialAd.createForAdRequest(InterstetialadUnitId, {
  requestNonPersonalizedAdsOnly: true,
  keywords: ['fashion', 'clothing'],
});

const App = () => {
  // ______________________ Request Configuration ___________________
  useEffect(() => {
    admob()
      .setRequestConfiguration({
        // Update all future requests suitable for parental guidance
        maxAdContentRating: MaxAdContentRating.PG,

        // 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,
      })
      .then(() => {
        // Request config successfully set!
      });
    firebase.initializeApp();
  });

  // ____________ Interstetial Ads setup ________________________
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const eventListener = interstitial.onAdEvent((type) => {
      if (type === AdEventType.LOADED) {
        setLoaded(true);
      }
    });

    // Start loading the interstitial straight away
    interstitial.load();

    // Unsubscribe from events on unmount
    return () => {
      eventListener();
    };
  }, []);

  // No advert ready to show yet
  if (!loaded) {
    return null;
  }

  return (
    <div className={styles.main}>
      <h1>Hello World</h1>
      <BannerAd
        unitId={BanneradUnitId}
        size={BannerAdSize.FULL_BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
        }}
      />
      <BannerAd
        unitId={BanneradUnitId}
        size={BannerAdSize.FULL_BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
        }}
      />
      <BannerAd
        unitId={BanneradUnitId}
        size={BannerAdSize.FULL_BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
        }}
      />
      <BannerAd
        unitId={BanneradUnitId}
        size={BannerAdSize.FULL_BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
        }}
      />
      <Button
        title="Show Interstitial"
        onPress={() => {
          interstitial.show();
        }}
      />
    </div>
  );
};

const styles = StyleSheet.create({
  main: {
    textAlign: 'center',
  },
});

export default App;

build.gradle:-

// Top-level build file where you can add configuration options common to all sub-projects/modules.
// apply plugin: 'com.google.gms.google-services'  // Google Services plugin

buildscript {
    ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 16
        compileSdkVersion = 29
        targetSdkVersion = 29
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.5.3")
        // classpath 'com.google.gms:google-services:4.3.4'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        google()
        jcenter()
        maven { url 'https://www.jitpack.io' }
    }
}

firebase.json:-

{
  "react-native": {
    "admob_android_app_id": "ca-app-pub-7184661797309439~8217684640"
  }
}

Answer 1

You must be getting some errors as div is not supported in react-native. Replace div with the View which you can import from the "react-native" package.