react-native-applovin-max 6.4.2 → 7.0.0

package/package.json

@@ -1,39 +1,112 @@
 {
   "name": "react-native-applovin-max",
-  "author": "AppLovin Corporation",
-  "version": "6.4.2",
+  "author": "AppLovin Corporation <support@applovin.com> (https://applovin.com)",
+  "version": "7.0.0",
   "description": "AppLovin MAX React Native Plugin for Android and iOS",
-  "homepage": "https://github.com/AppLovin/AppLovin-MAX-React-Native",
-  "license": "MIT",
-  "main": "src/index",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/src/index.d.ts",
   "react-native": "src/index",
   "source": "src/index",
-  "module": "lib/module/index",
   "files": [
     "src",
+    "lib",
     "android",
     "ios",
     "react-native-applovin-max.podspec",
-    "package.json"
-  ],
-  "scripts": {},
-  "keywords": [
-    "react-native",
-    "applovin",
-    "max"
+    "package.json",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
   ],
-  "repository": "https://github.com/AppLovin/AppLovin-MAX-React-Native",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AppLovin/AppLovin-MAX-React-Native.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/AppLovin/AppLovin-MAX-React-Native/issues"
+  },
+  "homepage": "https://github.com/AppLovin/AppLovin-MAX-React-Native#readme",
   "devDependencies": {
-    "@types/react-native": "^0.63.1",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
-    "eslint": "^8.53.0",
-    "eslint-plugin-react": "^7.33.2",
-    "react": "^16.13.1",
-    "react-native": "^0.63.1"
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.73.1",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.44",
+    "commitlint": "^17.0.2",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "18.2.0",
+    "react-native": "0.73.6",
+    "typescript": "^5.2.2"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 4,
+          "trailingComma": "es5",
+          "useTabs": false,
+          "printWidth": 180,
+          "endOfLine": "auto"
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "es5",
+    "useTabs": false,
+    "printWidth": 180,
+    "endOfLine": "auto"
   }
 }

package/react-native-applovin-max.podspec

@@ -1,6 +1,7 @@
 require "json"
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
 
 Pod::Spec.new do |s|
   s.name         = "react-native-applovin-max"
@@ -10,11 +11,34 @@ Pod::Spec.new do |s|
   s.license      = package["license"]
   s.authors      = package["author"]
 
-  s.platforms    = { :ios => "10.0" }
-  s.source       = { :git => "https://github.com/AppLovin/AppLovin-MAX-React-Native.git", :tag => "release_6_4_2" }
-  
-  s.source_files  = "ios/AppLovinMAX*.{h,m}"
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/AppLovin/AppLovin-MAX-React-Native.git", :tag => "release_7_0_0" }
 
-  s.dependency "React"
-  s.dependency "AppLovinSDK", "12.4.1"
+  s.source_files = "ios/AppLovinMAX*.{h,m}"
+
+  s.dependency "AppLovinSDK", "12.5.0"
+
+  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+  s.dependency "React-Core"
+
+  # Don't install the dependencies when we run `pod install` in the old architecture.
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+    s.pod_target_xcconfig    = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+    }
+    s.dependency "React-RCTFabric"
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+   end
+  end    
 end

package/src/AdView.tsx

@@ -1,17 +1,11 @@
 import * as React from 'react';
 import { useEffect, useState, useRef, useCallback, useImperativeHandle, useReducer, forwardRef } from 'react';
-import {
-    NativeModules,
-    requireNativeComponent,
-    StyleSheet,
-    UIManager,
-    findNodeHandle,
-    useWindowDimensions,
-} from 'react-native';
+import { NativeModules, requireNativeComponent, StyleSheet, UIManager, findNodeHandle, useWindowDimensions } from 'react-native';
 import type { ViewProps, ViewStyle, StyleProp, NativeMethods, DimensionValue } from 'react-native';
 import type { AdDisplayFailedInfo, AdInfo, AdLoadFailedInfo, AdRevenueInfo } from './types/AdInfo';
 import type { AdNativeEvent } from './types/AdEvent';
-import type { AdViewProps, AdViewHandler } from './types/AdViewProps';
+import type { AdViewProps, AdViewHandler, NativeUIComponentAdViewOptions } from './types/AdViewProps';
+import { addEventListener, removeEventListener } from './EventEmitter';
 
 const { AppLovinMAX } = NativeModules;
 
@@ -28,6 +22,9 @@ const {
     BOTTOM_LEFT_POSITION,
     BOTTOM_CENTER_POSITION,
     BOTTOM_RIGHT_POSITION,
+
+    ON_NATIVE_UI_COMPONENT_ADVIEW_AD_LOADED_EVENT,
+    ON_NATIVE_UI_COMPONENT_ADVIEW_AD_LOAD_FAILED_EVENT,
 } = AppLovinMAX.getConstants();
 
 /**
@@ -89,12 +86,7 @@ const getOutlineViewSize = (style: StyleProp<ViewStyle>) => {
     return [viewStyle?.width ?? 'auto', viewStyle?.height ?? 'auto'];
 };
 
-const sizeBannerDimensions = (
-    sizeProps: SizeRecord,
-    adaptiveBannerEnabled: boolean,
-    screenWidth: number,
-    bannerFormatSize: SizeRecord
-): Promise<SizeRecord> => {
+const sizeBannerDimensions = (sizeProps: SizeRecord, adaptiveBannerEnabled: boolean, screenWidth: number, bannerFormatSize: SizeRecord): Promise<SizeRecord> => {
     const sizeForBannerFormat = async () => {
         const width = sizeProps.width === 'auto' ? screenWidth : sizeProps.width;
 
@@ -207,7 +199,7 @@ export const AdView = forwardRef<AdViewHandler, AdViewProps & ViewProps>(functio
                 console.warn('AdView is mounted before the initialization of the AppLovin MAX React Native module');
             }
         });
-    }, []); // Run once when mounted
+    }, [adFormat]); // Run once when mounted
 
     useEffect(() => {
         if (!isInitialized) return;
@@ -219,17 +211,12 @@ export const AdView = forwardRef<AdViewHandler, AdViewProps & ViewProps>(functio
         sizeProps.current = { width: width, height: height };
 
         if (adFormat === AdFormat.BANNER) {
-            sizeBannerDimensions(sizeProps.current, adaptiveBannerEnabled, screenWidth, adFormatSize.current).then(
-                (adaptedSize: SizeRecord) => {
-                    if (
-                        dimensions.current.width !== adaptedSize.width ||
-                        dimensions.current.height !== adaptedSize.height
-                    ) {
-                        dimensions.current = adaptedSize;
-                        forceUpdate();
-                    }
+            sizeBannerDimensions(sizeProps.current, adaptiveBannerEnabled, screenWidth, adFormatSize.current).then((adaptedSize: SizeRecord) => {
+                if (dimensions.current.width !== adaptedSize.width || dimensions.current.height !== adaptedSize.height) {
+                    dimensions.current = adaptedSize;
+                    forceUpdate();
                 }
-            );
+            });
         } else {
             dimensions.current = {
                 width: width === 'auto' ? adFormatSize.current.width : width,
@@ -303,3 +290,73 @@ export const AdView = forwardRef<AdViewHandler, AdViewProps & ViewProps>(functio
         />
     );
 });
+
+/**
+ * Preloads a native UI component for {@link AdView}. When you mount {@link AdView} with the Ad Unit
+ * ID you preloaded, it will be constructed with the preloaded native UI component, allowing the ads
+ * to be displayed quickly. When you unmount {@link AdView}, the preloaded native UI component won't
+ * be destroyed. Instead, it will be reused for the next mount. You must manually destroy it when it
+ * is no longer needed.
+ *
+ * You can preload only one native UI component for a single Ad Unit ID. If you mount two of
+ * {@link AdView} with the same Ad Unit ID, the first {@link AdView} will be constructed with the
+ * preloaded native UI component, but the second {@link AdView} will create its own native UI
+ * component and destroy it when unmounting.
+ *
+ * @param adUnitId The Ad Unit ID to load ads for.
+ * @param adFormat An enum value representing the ad format to load ads for. Should be either
+ * {@link AdFormat.BANNER} or {@link AdFormat.MREC}.
+ * @param options Optional props used to construct a native UI component.
+ * @returns A promise that resolves when preload starts. The resolved object contains void.
+ * @throws Throws an error if the request fails.
+ */
+export const preloadNativeUIComponentAdView = async (adUnitId: string, adFormat: AdFormat, options?: NativeUIComponentAdViewOptions): Promise<void> => {
+    return AppLovinMAX.preloadNativeUIComponentAdView(adUnitId, adFormat, options?.placement, options?.customData, options?.extraParameters, options?.localExtraParameters);
+};
+
+/**
+ * Destroys the native UI component.
+ *
+ * @param adUnitId The ad unit ID of the native UI component to destroy.
+ * @returns A promise that resolves upon the destruction of the native UI component. The resolved
+ * object contains void.
+ * @throws Throws an error if the request fails.
+ */
+export const destroyNativeUIComponentAdView = async (adUnitId: string): Promise<void> => {
+    return AppLovinMAX.destroyNativeUIComponentAdView(adUnitId);
+};
+
+/**
+ * Adds the specified event listener to receive {@link AdInfo} when a native UI component loads a
+ * new ad.
+ *
+ * @param listener Listener to be notified.
+ */
+export const addNativeUIComponentAdViewAdLoadedEventListener = (listener: (adInfo: AdInfo) => void) => {
+    addEventListener(ON_NATIVE_UI_COMPONENT_ADVIEW_AD_LOADED_EVENT, (adInfo: AdInfo) => listener(adInfo));
+};
+
+/**
+ * Removes the event listener to receive {@link AdInfo} when a native UI component loads a new ad.
+ */
+export const removeNativeUIComponentAdViewAdLoadedEventListener = () => {
+    removeEventListener(ON_NATIVE_UI_COMPONENT_ADVIEW_AD_LOADED_EVENT);
+};
+
+/**
+ * Adds the specified event listener to receive {@link AdLoadFailedInfo} when a native UI component
+ * could not load a new ad.
+ *
+ * @param listener Listener to be notified.
+ */
+export const addNativeUIComponentAdViewAdLoadFailedEventListener = (listener: (errorInfo: AdLoadFailedInfo) => void) => {
+    addEventListener(ON_NATIVE_UI_COMPONENT_ADVIEW_AD_LOAD_FAILED_EVENT, (errorInfo: AdLoadFailedInfo) => listener(errorInfo));
+};
+
+/**
+ * Removes the event listener to receive {@link AdLoadFailedInfo} when a native UI component could
+ * not load a new ad.
+ */
+export const removeNativeUIComponentAdViewAdLoadFailedEventListener = () => {
+    removeEventListener(ON_NATIVE_UI_COMPONENT_ADVIEW_AD_LOAD_FAILED_EVENT);
+};

package/src/AppLovinMAX.ts

@@ -4,7 +4,7 @@ import type { Configuration } from './types/Configuration';
 
 const NativeAppLovinMAX = NativeModules.AppLovinMAX;
 
-const VERSION = '6.4.2';
+const VERSION = '7.0.0';
 
 /**
  * This enum represents the user's geography used to determine the type of consent flow shown to the

package/src/InterstitialAd.ts

@@ -69,9 +69,7 @@ const removeAdDisplayedEventListener = () => {
 };
 
 const addAdFailedToDisplayEventListener = (listener: (errorInfo: AdDisplayFailedInfo) => void) => {
-    addEventListener(ON_INTERSTITIAL_AD_FAILED_TO_DISPLAY_EVENT, (errorInfo: AdDisplayFailedInfo) =>
-        listener(errorInfo)
-    );
+    addEventListener(ON_INTERSTITIAL_AD_FAILED_TO_DISPLAY_EVENT, (errorInfo: AdDisplayFailedInfo) => listener(errorInfo));
 };
 
 const removeAdFailedToDisplayEventListener = () => {

package/src/MRecAd.ts

@@ -7,14 +7,8 @@ import type { AdViewPosition } from './AdView';
 
 const { AppLovinMAX } = NativeModules;
 
-const {
-    ON_MREC_AD_LOADED_EVENT,
-    ON_MREC_AD_LOAD_FAILED_EVENT,
-    ON_MREC_AD_CLICKED_EVENT,
-    ON_MREC_AD_COLLAPSED_EVENT,
-    ON_MREC_AD_EXPANDED_EVENT,
-    ON_MREC_AD_REVENUE_PAID,
-} = AppLovinMAX.getConstants();
+const { ON_MREC_AD_LOADED_EVENT, ON_MREC_AD_LOAD_FAILED_EVENT, ON_MREC_AD_CLICKED_EVENT, ON_MREC_AD_COLLAPSED_EVENT, ON_MREC_AD_EXPANDED_EVENT, ON_MREC_AD_REVENUE_PAID } =
+    AppLovinMAX.getConstants();
 
 const createAd = (adUnitId: string, position: AdViewPosition): void => {
     AppLovinMAX.createMRec(adUnitId, position);

package/src/TargetingData.ts

@@ -71,12 +71,7 @@ export const TargetingData: TargetingDataType = {
      * Sets the gender of the user. Set this to {@link UserGender.Unknown} to clear this value.
      */
     set gender(value: UserGender | Promise<UserGender>) {
-        if (
-            value === UserGender.UNKNOWN ||
-            value === UserGender.FEMALE ||
-            value === UserGender.MALE ||
-            value === UserGender.OTHER
-        ) {
+        if (value === UserGender.UNKNOWN || value === UserGender.FEMALE || value === UserGender.MALE || value === UserGender.OTHER) {
             nativeMethods.setTargetingDataGender(value);
         } else {
             printError('TargetingData.gender', 'UserGender', typeof value);
@@ -213,13 +208,5 @@ const isStringArray = (strs: object): boolean => {
 };
 
 const printError = (fieldName: string, correctType: string, wrongType: string) => {
-    console.error(
-        'Cannot set value to ' +
-            fieldName +
-            ' with unsupported type: ' +
-            wrongType +
-            '.  Value has to be of type ' +
-            correctType +
-            '.'
-    );
+    console.error('Cannot set value to ' + fieldName + ' with unsupported type: ' + wrongType + '.  Value has to be of type ' + correctType + '.');
 };

package/src/index.ts

@@ -7,15 +7,14 @@ export { AppOpenAd } from './AppOpenAd';
 export { BannerAd } from './BannerAd';
 export { MRecAd } from './MRecAd';
 export { AdView, AdFormat, AdViewPosition } from './AdView';
-export { NativeAdView } from './nativeAd/NativeAdView';
 export {
-    TitleView,
-    AdvertiserView,
-    BodyView,
-    CallToActionView,
-    IconView,
-    OptionsView,
-    MediaView,
-    StarRatingView,
-} from './nativeAd/NativeAdViewComponents';
+    preloadNativeUIComponentAdView,
+    destroyNativeUIComponentAdView,
+    addNativeUIComponentAdViewAdLoadFailedEventListener,
+    removeNativeUIComponentAdViewAdLoadedEventListener,
+    addNativeUIComponentAdViewAdLoadedEventListener,
+    removeNativeUIComponentAdViewAdLoadFailedEventListener,
+} from './AdView';
+export { NativeAdView } from './nativeAd/NativeAdView';
+export { TitleView, AdvertiserView, BodyView, CallToActionView, IconView, OptionsView, MediaView, StarRatingView } from './nativeAd/NativeAdViewComponents';
 export * from './types';

package/src/nativeAd/NativeAdView.tsx

@@ -18,9 +18,7 @@ type NativeAdViewNativeEvents = {
     onAdRevenuePaidEvent(event: AdNativeEvent<AdRevenueInfo>): void;
 };
 
-const NativeAdViewComponent = requireNativeComponent<NativeAdViewProps & ViewProps & NativeAdViewNativeEvents>(
-    'AppLovinMAXNativeAdView'
-);
+const NativeAdViewComponent = requireNativeComponent<NativeAdViewProps & ViewProps & NativeAdViewNativeEvents>('AppLovinMAXNativeAdView');
 
 /**
  * The {@link NativeAdView} component that you use building a native ad. This loads a native ad and
@@ -59,50 +57,33 @@ const NativeAdViewComponent = requireNativeComponent<NativeAdViewProps & ViewPro
  * </NativeAdView>
  * ```
  */
-export const NativeAdView = forwardRef<NativeAdViewHandler, NativeAdViewProps & ViewProps>(
-    function NativeAdView(props, ref) {
-        const [isInitialized, setIsInitialized] = useState<boolean>(false);
-
-        useEffect(() => {
-            // check that AppLovinMAX has been initialized
-            AppLovinMAX.isInitialized().then((result: boolean) => {
-                setIsInitialized(result);
-                if (!result) {
-                    console.warn(
-                        'NativeAdView is mounted before the initialization of the AppLovin MAX React Native module'
-                    );
-                }
-            });
-        }, []);
-
-        // Not ready to render NativeAdView
-        if (!isInitialized) {
-            return null;
-        }
+export const NativeAdView = forwardRef<NativeAdViewHandler, NativeAdViewProps & ViewProps>(function NativeAdView(props, ref) {
+    const [isInitialized, setIsInitialized] = useState<boolean>(false);
+
+    useEffect(() => {
+        // check that AppLovinMAX has been initialized
+        AppLovinMAX.isInitialized().then((result: boolean) => {
+            setIsInitialized(result);
+            if (!result) {
+                console.warn('NativeAdView is mounted before the initialization of the AppLovin MAX React Native module');
+            }
+        });
+    }, []);
 
-        return (
-            <NativeAdViewProvider>
-                <NativeAdViewImpl {...props} ref={ref} />
-            </NativeAdViewProvider>
-        );
+    // Not ready to render NativeAdView
+    if (!isInitialized) {
+        return null;
     }
-);
+
+    return (
+        <NativeAdViewProvider>
+            <NativeAdViewImpl {...props} ref={ref} />
+        </NativeAdViewProvider>
+    );
+});
 
 const NativeAdViewImpl = forwardRef<NativeAdViewHandler, NativeAdViewProps & ViewProps>(function NativeAdViewImpl(
-    {
-        adUnitId,
-        placement,
-        customData,
-        extraParameters,
-        localExtraParameters,
-        onAdLoaded,
-        onAdLoadFailed,
-        onAdClicked,
-        onAdRevenuePaid,
-        children,
-        style,
-        ...otherProps
-    },
+    { adUnitId, placement, customData, extraParameters, localExtraParameters, onAdLoaded, onAdLoadFailed, onAdClicked, onAdRevenuePaid, children, style, ...otherProps },
     ref
 ) {
     // context from NativeAdViewProvider
@@ -127,12 +108,15 @@ const NativeAdViewImpl = forwardRef<NativeAdViewHandler, NativeAdViewProps & Vie
     useImperativeHandle(ref, () => ({ loadAd }), []);
 
     // save the DOM element via the ref callback
-    const saveElement = useCallback((element: NativeAdViewType | null) => {
-        if (element) {
-            nativeAdViewRef.current = element;
-            setNativeAdView(element);
-        }
-    }, []);
+    const saveElement = useCallback(
+        (element: NativeAdViewType | null) => {
+            if (element) {
+                nativeAdViewRef.current = element;
+                setNativeAdView(element);
+            }
+        },
+        [setNativeAdView]
+    );
 
     const onAdLoadedEvent = (event: { nativeEvent: { nativeAd: NativeAd; adInfo: AdInfo } }) => {
         setNativeAd(event.nativeEvent.nativeAd);

package/src/nativeAd/NativeAdViewComponents.tsx

@@ -15,7 +15,7 @@ export const TitleView = (props: TextProps) => {
         nativeAdView?.setNativeProps({
             titleView: findNodeHandle(titleRef.current),
         });
-    }, [nativeAd]);
+    }, [nativeAd, nativeAdView]);
 
     return (
         <Text {...props} ref={titleRef}>
@@ -34,7 +34,7 @@ export const AdvertiserView = (props: TextProps) => {
         nativeAdView?.setNativeProps({
             advertiserView: findNodeHandle(advertiserRef.current),
         });
-    }, [nativeAd]);
+    }, [nativeAd, nativeAdView]);
 
     return (
         <Text {...props} ref={advertiserRef}>
@@ -53,7 +53,7 @@ export const BodyView = (props: TextProps) => {
         nativeAdView?.setNativeProps({
             bodyView: findNodeHandle(bodyRef.current),
         });
-    }, [nativeAd]);
+    }, [nativeAd, nativeAdView]);
 
     return (
         <Text {...props} ref={bodyRef}>
@@ -72,7 +72,7 @@ export const CallToActionView = (props: TextProps) => {
         nativeAdView?.setNativeProps({
             callToActionView: findNodeHandle(callToActionRef.current),
         });
-    }, [nativeAd]);
+    }, [nativeAd, nativeAdView]);
 
     return (
         <TouchableOpacity>
@@ -93,7 +93,7 @@ export const IconView = (props: Omit<ImageProps, 'source'>) => {
         nativeAdView?.setNativeProps({
             iconView: findNodeHandle(imageRef.current),
         });
-    }, [nativeAd]);
+    }, [nativeAd, nativeAdView]);
 
     return nativeAd.url ? (
         <Image {...props} ref={imageRef} source={{ uri: nativeAd.url }} />
@@ -113,7 +113,7 @@ export const OptionsView = (props: ViewProps) => {
         nativeAdView?.setNativeProps({
             optionsView: findNodeHandle(viewRef.current),
         });
-    }, [nativeAd]);
+    }, [nativeAd, nativeAdView]);
 
     return <View {...props} ref={viewRef} />;
 };
@@ -128,7 +128,7 @@ export const MediaView = (props: ViewProps) => {
         nativeAdView?.setNativeProps({
             mediaView: findNodeHandle(viewRef.current),
         });
-    }, [nativeAd]);
+    }, [nativeAd, nativeAdView]);
 
     return <View {...props} ref={viewRef} />;
 };
@@ -142,22 +142,8 @@ export const StarRatingView = (props: ViewProps) => {
 
     const { nativeAd } = useContext(NativeAdViewContext);
 
-    const FilledStar = () => {
-        return (
-            // black star in unicode
-            <Text style={{ fontSize: starSize, color: starColor }}>{String.fromCodePoint(0x2605)}</Text>
-        );
-    };
-
-    const EmptyStar = () => {
-        return (
-            // white star in unicode
-            <Text style={{ fontSize: starSize, color: starColor }}>{String.fromCodePoint(0x2606)}</Text>
-        );
-    };
-
     return (
-        <View {...restProps} style={[style, { flexDirection: 'row', alignItems: 'center' }]}>
+        <View {...restProps} style={[style, styles.starRatingContainer]}>
             {(() => {
                 const stars: ReactNode[] = [];
                 for (let index = 0; index < maxStarCount; index++) {
@@ -165,16 +151,10 @@ export const StarRatingView = (props: ViewProps) => {
                         const width = (nativeAd.starRating - index) * starSize;
                         stars.push(
                             <View key={index}>
-                                <EmptyStar />
+                                <Text style={{ fontSize: starSize, color: starColor }}>{String.fromCodePoint(0x2606)}</Text>
                                 {nativeAd.starRating > index && (
-                                    <View
-                                        style={{
-                                            width: width,
-                                            overflow: 'hidden',
-                                            position: 'absolute',
-                                        }}
-                                    >
-                                        <FilledStar />
+                                    <View style={[{ width: width }, styles.starRating]}>
+                                        <Text style={{ fontSize: starSize, color: starColor }}>{String.fromCodePoint(0x2605)}</Text>
                                     </View>
                                 )}
                             </View>
@@ -192,3 +172,14 @@ export const StarRatingView = (props: ViewProps) => {
         </View>
     );
 };
+
+const styles = StyleSheet.create({
+    starRatingContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    starRating: {
+        overflow: 'hidden',
+        position: 'absolute',
+    },
+});