Adverts shift to the left on iOS

[walker-mick]

Advert.mp4

Please see video attached:

React Native: 0.79.5
Expo: 53.0.22
Appodeal: 3.10.0

As shown in the video, both the banner and the MREC shift to the left after loading. This issue occurs only on iOS devices, and oddly, it doesn’t happen in the simulator where everything works as expected.

[da2gl]

@walker-mick Hello, thanks for your request.
We will start working on it.

[walker-mick]

@walker-mick Hello, thanks for your request.
We will start working on it.

Any update on this? Is it a bug?

[da2gl]

@walker-mick Hi, we can’t reproduce this logic.
Could you provide a code snippet of your markup and logic for displaying it so that we can reproduce the issue?
Do you observe the same behavior in our demo?
Thanks.

[walker-mick]

@walker-mick Hi, we can’t reproduce this logic.
Could you provide a code snippet of your markup and logic for displaying it so that we can reproduce the issue?
Do you observe the same behavior in our demo?
Thanks.

I will provide you a reproducible example over the weekend.

Can I confirm you are running on device? This issue only seems to occur on a device, it doesn't impact the simulator.

[walker-mick]

Ok so I dug into this a little further.

In RNAppodealBannerView.m line 141, when the ad loads, the banner is positioned at:

self.bannerView.frame = CGRectMake(0, 0, bannerSize.width, bannerSize.height);

The critical issue is in the layoutSubviews method (lines 89-111). The centering logic DOES exist:

...
CGRect bannerFrame = CGRectMake(
    (self.bounds.size.width - bannerSize.width) / 2.0,
    (self.bounds.size.height - bannerSize.height) / 2.0,
    bannerSize.width,
    bannerSize.height
);
...

However, this centering only works if the container width is larger than the banner width. Since I'm setting width: "100%" and banners are typically 320px wide (or less), the condition at line 95 may not be met consistently.

Additionally, when the ad loads (bannerViewDidLoadAd at line 141), it resets the frame to (0, 0), overriding any centering from layoutSubviews.

Android sets the banner to full screen width and uses FrameLayout, which naturally centers content.

Fix:

The fix wraps the AppodealBanner in a full-width container View that uses flexbox alignItems: "center" to center its children. The banner itself has a fixed width of 320px (standard IAB phone banner size) instead of 100%, which allows the flexbox centering to work, since the banner is narrower than its container, equal padding is created on both sides. Additionally, usesSmartSizing={false} positions the banner's frame within the container, overriding the iOS native code's hardcoded (0, 0) positioning that occurs when the ad loads.

return (
    <View
      style={{
        width: "100%",
        height: 50,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: backgroundColor || "transparent",
      }}
    >
      <AppodealBanner
        style={{
          height: 50,
          width: 320, // Standard banner width - don't use 100%
          backgroundColor: "transparent",
        }}
        adSize={"phone"}
        usesSmartSizing={false} // Disable smart sizing to prevent layout shifts
      />
    </View>
  );