react-native-flex-grid/lib/module/components/WebAd/WebAd.web.js

🎨 A react-native flexbox grid similar to bootstap's web grid.

import React, { useEffect, useMemo } from 'react';
import { View, StyleSheet } from 'react-native';
const AD_CLIENT = 'ca-pub-5266987079964279';
const AD_SLOT = '2268797420';
const styles = StyleSheet.create({
  adContainer: {
    width: '100%',
    minHeight: 50,
    // Minimum height for the ad container
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 32,
    marginBottom: 8,
    alignSelf: 'center',
    textAlign: 'center'
    // backgroundColor: 'rgba(0,0,0,0.05)', // Optional: for debugging layout
  }
});

// Extend the Window interface to include adsbygoogle

const WebAd = () => {
  useEffect(() => {
    // The main adsbygoogle.js script is now loaded globally via preview-body.html
    // We still need to push an ad request for this specific ad unit.
    try {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    } catch (e) {
      console.error('AdSense push error:', e);
    }
  }, []); // Empty dependency array ensures this effect runs once on mount

  const adStyle = useMemo(() => ({
    display: 'block',
    width: '100%'
  }), []);

  // Render the ad unit container and the <ins> tag for the ad
  return /*#__PURE__*/React.createElement(View, {
    style: styles.adContainer
  }, /*#__PURE__*/React.createElement("ins", {
    className: "adsbygoogle",
    style: adStyle,
    "data-ad-client": AD_CLIENT,
    "data-ad-slot": AD_SLOT,
    "data-ad-format": "auto",
    "data-full-width-responsive": "true",
    key: `${AD_CLIENT}-${AD_SLOT}`
  }));
};
export default WebAd;
//# sourceMappingURL=WebAd.web.js.map