Display splash ad on React Native

Android

Step 1. Add resources

Replace your init activity, unit id

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="adrop_splash_ad_next_activity" translatable="false">{your_init_activity}</string> <!-- com.company.app.MainActivity -->
    <string name="adrop_splash_ad_unit_id" translatable="false">{your_splash_unit_id}</string> <!-- PUBLIC_TEST_UNIT_ID_SPLASH for test -->
    <integer name="adrop_splash_ad_max_timeout">1000</integer> <!-- (optional) default 1s -->
</resources>

- values/theme.xml

replace parent to your application theme

<style 
    name="Theme.App.SplashTheme"
    parent="Theme.AppCompat.NoActionBar"/>

- values-v31/theme.xml

1. Add your logo image (288x288) to drawable and replace windowSplashScreenAnimatedIcon

2. Replace windowSplashScreenBackground to your splash background color

<style "Theme.App.SplashTheme" parent="Theme.SplashScreen"> 
    <item name="windowSplashScreenAnimatedIcon">@drawable/your_logo</item>
    <item name="windowSplashScreenBackground">#ffffff</item>
    <item name="windowSplashScreenAnimationDuration">200</item>
    <item name="postSplashScreenTheme">@style/Theme.App.SplashTheme.TranslucentStatus</item>
</style>

<style name="Theme.App.SplashTheme.TranslucentStatus" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowTranslucentStatus">true</item>
</style>

Step 2. Update Androidmanifest.xml

<application>
	...
	<activity
	    android:name="io.adrop.ads.splash.AdropSplashAdActivity"
	    android:exported="true"
	    android:theme="@style/Theme.App.SplashTheme"
            tools:replace="android:theme">
	    <intent-filter>
	        <action android:name="android.intent.action.MAIN"/>
	        <category android:name="android.intent.category.LAUNCHER"/>
	    </intent-filter>
	</activity>
	...
</application>

Step 3. Add layout/activity_adrop_splash_ad.xml

1. Replace your logo path and background color.

2. Do not remove adrop_splash_ad_image ImageView for splash ad

Step 4. run android (debug)

react-native run-android --main-activity io.adrop.ads.splash.AdropSplashAdActivity

iOS

Step 1. Change LaunchScreen.storyboard

Add your logo image

4KB

LaunchScreen.storyboard

Step 2. Update AppDelegate.mm

...
- (UISceneConfiguration *)application:(UIApplication *)application configurationForConnectingSceneSession:(UISceneSession *)connectingSceneSession options:(UISceneConnectionOptions *)options {
    return [[UISceneConfiguration alloc] initWithName:@"Default Configuration" sessionRole:connectingSceneSession.role];
}

- (void)application:(UIApplication *)application didDiscardSceneSessions:(NSSet<UISceneSession *> *)sceneSessions {}
...

Step 3. Create SceneDelegate

Replace your logo name, unit id. Customize background color, timeout if you want.

// SceneDelegate.h

#import <RCTAppDelegate.h>
#import <UIKit/UIKit.h>

@interface AppDelegate : RCTAppDelegate

@end

// SceneDelegate.m

#import "SceneDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTRootView.h>
#import <React/RCTBundleURLProvider.h>

@implementation SceneDelegate

- (void)scene:(UIScene*)scene
    willConnectToSession:(UISceneSession*)session
                 options:(UISceneConnectionOptions*)connectionOptions {
    if (![scene isKindOfClass:[UIWindowScene class]]) {
        return;
    }
    
    UIWindowScene *windowScene = (UIWindowScene *)scene;
    
    RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:nil];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"AdropAdsReactNativeExample" initialProperties:nil];
    
    self.window = [[UIWindow alloc] initWithWindowScene:windowScene];
    
    UIViewController *rootViewController = [UIViewController new];
    rootViewController.view = rootView;
  
    AdropSplashViewController *splashViewController = [[AdropSplashViewController alloc] initWithUnitId:@"PUBLIC_TEST_UNIT_ID_SPLASH"];
    splashViewController.backgroundColor = [UIColor colorWithWhite:1.0 alpha:1.0];
    splashViewController.logoImage = [UIImage imageNamed:@"splashLogo"];
    splashViewController.mainViewController = rootViewController;
    splashViewController.timeout = 0.5;
    splashViewController.delegate = self;
    
    self.window.rootViewController = splashViewController;
    [self.window makeKeyAndVisible];
}

- (void)sceneDidDisconnect:(UIScene *)scene { }

- (void)sceneDidBecomeActive:(UIScene *)scene { }

- (void)sceneWillResignActive:(UIScene *)scene { }

- (void)sceneWillEnterForeground:(UIScene *)scene { }

- (void)sceneDidEnterBackground:(UIScene *)scene { }

#pragma mark - AdropSplashAdDelegate

- (void)onAdReceived:(AdropSplashAd *)ad {
    NSLog(@"onAdReceived %@", ad.unitId);
}

- (void)onAdFailedToReceive:(AdropSplashAd *)ad :(AdropErrorCode)errorCode {
    NSLog(@"onAdFailedToReceive: %@ error: ", ad.unitId);
}

- (void)onAdImpression:(AdropSplashAd *)ad {
    NSLog(@"onAdImpression: %@", ad.unitId);
}

#pragma mark - RCTBridgeDelegate

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
#if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

Step 4. Update Info.plist

...
<key>UIApplicationSceneManifest</key>
<dict>
    <key>UIApplicationSupportsMultipleScenes</key>
    <true/>
    <key>UISceneConfigurations</key>
    <dict>
        <key>UIWindowSceneSessionRoleApplication</key>
        <array>
            <dict>
                <key>UISceneConfigurationName</key>
                <string>Default Configuration</string>
                <key>UISceneDelegateClassName</key>
                <string>SceneDelegate</string>
            </dict>
        </array>
    </dict>
</dict>
...