Full screen ads about react-native-admob-native-ads

[ammarahm-ed]

I think it should work in a modal, have you tried setting the height of the NativeAdView equal to the height of the device? then adding components like any other React Native View???

[Dev-AS1]

Yes i do it,
but i can't load the Ad in Modal idk why!
before give it a full width & height it's work
and i'm sure the AdUnitsID work
and when i use onAdLoaded it's log the ad is loaded

---

ScreenShot

here's my code,

Ad Component

const {height, width} = Dimensions.get('window');
const AdComponent = props => {
  const _onAdFailedToLoad = event => {
    console.log(event.nativeEvent);
  };

  const _onAdLoaded = () => {
    console.log('Ad has loaded');
  };
  return (
    <>
      <View
        style={{
          flex: 1,
        }}>
        <NativeAdView
          onAdLoaded={_onAdLoaded}
          onAdFailedToLoad={_onAdFailedToLoad}
          style={{
            width: width,
            alignSelf: 'center',
            height: height * 0.87,
            backgroundColor: '#999',
          }}
          adUnitID="ca-app-pub-3940256099942544/2247696110" // TEST adUnitID
        />
 </View>
    </>
  );
}
export default AdComponent;

Here's a modal in Home Screen

const RenderFullAdd = props => {
  return (
    <Modal
      style={{
        margin: 0,
        alignItems: 'center',
      }}
      isVisible={props.isVisible}
      onBackdropPress={props.closeModal}
      onBackButtonPress={props.closeModal}
      useNativeDriver={true}
      animationIn="slideInUp"
      animationOut="slideOutDown"
      animationInTiming={400}
      animationOutTiming={400}
      coverScreen={true}
      backdropColor="#000">
      <View
        style={{
          backgroundColor: '#121212',
          borderRadius: 10,
          height: height * 0.9,
          width: width,
          margin: 20,
          padding: 10,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <AdComponent />
      </View>
    </Modal>
  );
};


// render it

<View>
   ....
      <RenderFullAdd
                  closeModal={() =>
                    this.setState({isVisible: false}, () =>
                      console.log('back?'),
                    )
                  }
                  isVisible={this.state.isVisible}
                />
   ...
  </View>

[anastely]

I'm trying your code, the Ad appears with me,
but yes as you say it does not take the full size.

 <NativeAdView
        style={{
          width: width,
          alignSelf: 'center',
          height: height * 0.87,
        }}
        adUnitID="ca-app-pub-3940256099942544/2247696110" // TEST adUnitID
      />

@ammarahm-ed Check this Shot

[ammarahm-ed]

@anastely @Dev-AS1 It is working for me here properly, If you want to fill the whole screen, you need to add a media view etc and set your components inside the Modal accordingly...

[anastely]

@ammarahm-ed Do you have a media view in this lib?

[ammarahm-ed]

Yea check the docs @anastely , You have to design your ad accordingly, the design in example is for a simple banner ad.