Android style is broken with call to action button covering everything

[rogerkerse]

I am on the latest library.
This is what I get

but when I remove some line in code for style, hit save, re-add the line and hit save, it shows exactly like on iOS:

Tried adding another view inside NativeAdView with flexDirection: 'row', but it didn't help.

There is similar issue that got marked as "resolved/closed" but tried its solution and no luck. There is something broken in Android styling or hierarchy on native side I guess.

Here is the code:

       (
		<View style={{ height: 100 }}>
			<NativeAdView
				adUnitID={AD_UNIT_ID}
				// enableTestMode={__DEV__}
				style={styles.ad}
			>
				<View style={[styles.adImageContainer, { height: 100, aspectRatio: 1 }]}>
					<ImageView
						style={{
							height: '100%',
							width: '100%',
						}}
					/>
					<AdBadge style={styles.adBadge} textStyle={styles.adBadgeText} />
				</View>
				<View style={styles.adInfoColumn}>
					<HeadlineView style={styles.adTitle} numberOfLines={2} />
					<TaglineView style={styles.adDescription} numberOfLines={4} />
					<CallToActionView
						style={styles.adCallToActionButton}
						textStyle={styles.adCallToActionButtonText}
					/>
				</View>
			</NativeAdView>
		</View>
	)



        ad: {
		alignItems: 'center',
		flexDirection: 'row',
	},
	adImageContainer: {
		borderRadius: 12,
		marginRight: 20,
		overflow: 'hidden',
	},
	adBadge: {
		width: 26,
		height: 16,
		borderRadius: 8,
		backgroundColor: 'white',
		borderWidth: 0,
		justifyContent: 'center',
		alignItems: 'center',
		position: 'absolute',
		top: 4,
		left: 4,
	},
	adBadgeText: {
		color: 'lightblue',
		fontSize: 12,
                 fontWeight: 'bold',
	},
	adInfoColumn: {
		flex: 1,
	},
	adTitle: {
		color: 'white',
		fontSize: 13,
		marginBottom: 6,
	},
	adDescription: {
		color: 'white',
		fontSize: 12,
	},
	adCallToActionButton: {
		height: 34,
		backgroundColor: 'lightblue',
		justifyContent: 'center',
		alignItems: 'center',
		borderRadius: 34 / 2,
		marginTop: 22,
		alignSelf: 'flex-start',
		paddingHorizontal: 26,
	},
	adCallToActionButtonText: {
		color: 'white',
		fontSize: 14,
	},

[ammarahm-ed]

Do not add flexbox styling to the NativeAdView. See the example app to notice what you are doing wrong. NativeAdView should only have backgroundColor & width or height properties. Add another View inside the NativeAdView and put your flexbox styling to that.

[rogerkerse]

There is weird anomaly in the library that when the inner view doesn't have a background color, then layout on Android goes haywire. You can just replace the App.js file in the example project with this and see it yourself (i modified the example a bit to be left to right kind of ad).

import React, { useState } from 'react';
import {View, Platform, Modal, ScrollView} from 'react-native';
import NativeAdView, {
  CallToActionView,
  IconView,
  HeadlineView,
  TaglineView,
  AdvertiserView,
  MediaView,
  ImageView,
  AdBadge,
} from 'react-native-admob-native-ads';

const NATIVE_AD_ID =
  Platform.OS === 'ios'
    ? 'ca-app-pub-3940256099942544/3986624511'
    : 'ca-app-pub-3940256099942544/2247696110';

const NATIVE_AD_VIDEO_ID =
  Platform.OS === 'ios'
    ? 'ca-app-pub-3940256099942544/2521693316'
    : 'ca-app-pub-3940256099942544/1044960115';

const App = () => {
  const [aspectRatio,setAspectRatio] = useState(1);
  const _onAdFailedToLoad = event => {
    console.log(event.nativeEvent);
  };

  const _onAdLoaded = () => {
    console.log('Ad has loaded');
  };

  return (
    <View
      style={{
        height: 200,
      }}>
      <ScrollView>
        <NativeAdView
          onAdLoaded={_onAdLoaded}
          onAdFailedToLoad={_onAdFailedToLoad}
          onUnifiedNativeAdLoaded={event => {
            setAspectRatio(event.aspectRatio);
          }}
          style={{
            

            marginTop: 50,
          }}
          adUnitID={NATIVE_AD_VIDEO_ID} // REPLACE WITH NATIVE_AD_VIDEO_ID for video ads.
        >
          <View
            style={{
              
              alignItems: 'center',
              flexDirection: 'row',

              height: 200,
              width: '100%',
              backgroundColor: 'rgba(0, 0, 0, 0)', // IF YOU COMMENT THIS OUT, THEN CALL TO ACTION BUTTON COVERS THE WHOLE AD!!
            }}>
            <View style={{ borderRadius: 12, height: '100%', aspectRatio: 1 }}>
              <ImageView
                style={{ width: '100%', height: '100%' }}
              />
              <AdBadge
                style={{ width: 26, height: 16, position: 'absolute', top: 0, left: 0 }}
              />
            </View>
            <View style={{ flex: 1 }}>
              <HeadlineView style={{}} numberOfLines={2} />
              <TaglineView style={{}} numberOfLines={4} />
              <CallToActionView
                style={{ height: 30, borderRadius: 15 }}
                textStyle={{}}
              />
            </View>
          </View>
        </NativeAdView>
       

      </ScrollView>
    </View>
  );
};

export default App;

There is only 1 backgroundColor in this code and with this commented out, you should see the button covering everything (only on Android)

and

[ammarahm-ed]

I think you are right. Without using the backgroundColor the Views are not layed out properly. I think its related to Native Android not detecting that it needs to render the initial styles etc.

This is not fixable by me, the best way would be to just use a backgroundColor to fix this. This is the case with not backgroundColor only but any color related the style value.

[rogerkerse]

Can't this library add default transparent colors as a workaround so it is less likely to pop up again?

[ammarahm-ed]

It will in the next version @rogerkerse

[ammarahm-ed]

fixed in for v0.3.0