@momo-kits/native-ads/src/ImageView.js

A simple and robust library for creating & displaying Admob Native Ads in your React Native App using Native Views

import React, { useContext, useEffect, useRef, useCallback } from "react";
import { findNodeHandle } from "react-native";
import { NativeAdContext } from "./context";
import { Image } from "@momo-kits/foundation";

const ImageView = (props) => {
  const { nativeAd, nativeAdView } = useContext(NativeAdContext);
  const imageViewRef = useRef();
  const _onLayout = useCallback(() => {
    if (!nativeAdView) return;

    let handle = findNodeHandle(imageViewRef.current);
    nativeAdView.setNativeProps({
      image: handle,
    });
  }, [nativeAdView, imageViewRef]);

  useEffect(() => {
    _onLayout();
  }, [nativeAd, nativeAdView]);
  return nativeAd?.images?.[0]?.url ? (
    <Image
      {...props}
      ref={imageViewRef}
      onLayout={_onLayout}
      source={{ uri: nativeAd.images[0].url }}
    />
  ) : null;
};

export default ImageView;