[🐛] Fluid size not correctly

[ricardodolnl]

The banner size 'FLUID' does not work correctly. It does not take the parent width, it takes the full device/screen with. I have a container around the ad with padding left and right. But the banner does not fit inside this container. Instead it goes outside the right side of the container.

<View style={styles.container}>
      <GAMBannerAd
        unitId={__DEV__ ? TestIds.GAM_NATIVE : adUnitId}
        sizes={[BannerAdSize.FLUID]}
        requestOptions={{
          requestNonPersonalizedAdsOnly: !allowTracking,
        }}
      />
</View>

[mikehardy]

Hi there! Can you include the information we would need to reproduce this? That is, versions of things in dependencies, build toolchain, and test execution environment?

[sedatb]

@mikehardy, I am trying to show fluid ads. I give width and height but Ads is extended to screen width. BannerAd is not using container's width and height. I tried to give style={{width: 100, height:100}} to <BannerAd but id didn't work. Can you help me about this problem. Thanks

return ( <View style={{ flex: 1}}> <View style={{ width: 100, height:100 }}> <BannerAd unitId={myUnitId} size={BannerAdSize.FLUID} requestOptions={{ requestNonPersonalizedAdsOnly: true, }} /> </View> </View> );

[DoctorJohn]

There is a TODO in the code suggesting the fluid size probably never worked:

https://github.com/invertase/react-native-google-mobile-ads/blob/e7ec4ed669ee05a0db2ae9c81ee23b5e01f8f901/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsBannerAdViewManager.java#L173

You can make your own fluid banner though. This can be done by requesting an that has the size you need. Would look roughtly like this:

// Get these values dynamically:
const parentWidth = 320;
const parentHeight = 60;

<BannerAd uniId="" size={`${parentWidth}x${parentHeight}`} />

You can use react state and the onLayout event handler to get the parent containers size.