react-native-applovin-max 9.0.0 → 9.1.0

package/src/AppLovinMAX.ts

@@ -2,93 +2,100 @@ import type { AppLovinMAXType } from './types/AppLovinMAX';
 import type { Configuration } from './types/Configuration';
 import NativeAppLovinMAX from './specs/NativeAppLovinMAXModule';
 
-const VERSION = '9.0.0';
+const VERSION = '9.1.0';
 
 /**
- * This enum represents the user's geography used to determine the type of consent flow shown to the
- * user.
+ * Represents the user's geography, used to determine which type of consent flow to display.
  */
 export enum ConsentFlowUserGeography {
     /**
-     * User's geography is unknown.
+     * The user's geography could not be determined.
      */
     UNKNOWN = 'U',
 
     /**
-     * The user is in GDPR region.
+     * The user is located in a GDPR region.
      */
     GDPR = 'G',
 
     /**
-     * The user is in a non-GDPR region.
+     * The user is not in a GDPR region.
      */
     OTHER = 'O',
 }
 
 /**
- * AppLovin SDK-defined app tracking transparency status values (extended to include "unavailable"
- * state on iOS before iOS14).
+ * App tracking transparency status values as defined by the AppLovin SDK.
+ *
+ * These values are based on Apple's AppTrackingTransparency framework (iOS 14+).
  */
 export enum AppTrackingStatus {
     /**
-     * Device is on iOS before iOS14, AppTrackingTransparency.framework is not available.
+     * Device is running an iOS version prior to iOS 14.
+     * AppTrackingTransparency is not available.
      */
     UNAVAILABLE = 'U',
 
     /**
-     * The user has not yet received an authorization request to authorize access to app-related
-     * data that can be used for tracking the user or the device.
+     * The user has not yet responded to the tracking authorization prompt.
      */
     NOT_DETERMINED = 'N',
 
     /**
-     * Authorization to access app-related data that can be used for tracking the user or the device
-     * is restricted.
+     * Tracking is restricted (e.g. due to parental controls).
      */
     RESTRICTED = 'R',
 
     /**
-     * The user denies authorization to access app-related data that can be used for tracking the
-     * user or the device.
+     * The user denied authorization for tracking.
      */
     DENIED = 'D',
 
     /**
-     * The user authorizes access to app-related data that can be used for tracking the user or the
-     * device.
+     * The user authorized tracking access.
      */
     AUTHORIZED = 'A',
 }
 
 /**
- * Represents errors for CMP flow.
+ * Error codes returned from the Consent Management Platform (CMP) flow.
  */
 export enum CMPErrorCode {
     /**
-     * Indicates that an unspecified error has occurred.
+     * An unspecified error occurred.
      */
     UNSPECIFIED = -1,
 
     /**
-     * Indicates that the CMP has not been integrated correctly.
+     * The CMP was not integrated correctly.
      */
     INTEGRATION_ERROR = 1,
 
     /**
-     * Indicates that the CMP form is unavailable.
+     * The CMP form is unavailable.
      */
     FORM_UNAVAILABLE = 2,
 
     /**
-     * Indicates that the CMP form is not required.
+     * The CMP form is not required for this user.
      */
     FORM_NOT_REQUIRED = 3,
 }
 
-const initialize = (sdkKey: string): Promise<Configuration> => {
-    return NativeAppLovinMAX.initialize(VERSION, sdkKey);
-};
+/**
+ * Initializes the AppLovin MAX SDK with the provided SDK key.
+ *
+ * @param sdkKey - Your AppLovin SDK key.
+ * @returns A promise that resolves with the SDK configuration.
+ */
+const initialize = (sdkKey: string): Promise<Configuration> => NativeAppLovinMAX.initialize(VERSION, sdkKey);
 
+/**
+ * Retrieves the user segments.
+ *
+ * @returns A promise resolving to a Map of segment IDs to arrays of group IDs,
+ *          or `null` if no segments are available.
+ */
 const getSegments = async (): Promise<Map<number, number[]> | null> => {
     const segments = await NativeAppLovinMAX.getSegments();
 
@@ -98,10 +105,8 @@ const getSegments = async (): Promise<Map<number, number[]> | null> => {
 
     const map = new Map<number, number[]>();
 
-    for (const key in segments) {
-        // Convert the key from a string to a number. In JavaScript, an object cannot have an
-        // integer as a key, but the Map object can have keys of any data type.
-        const value = segments[key];
+    for (const [key, value] of Object.entries(segments)) {
+        // In JavaScript, object keys are always strings, so we convert them to numbers for the Map.
         if (value) {
             map.set(Number(key), value);
         }
@@ -110,10 +115,15 @@ const getSegments = async (): Promise<Map<number, number[]> | null> => {
     return map;
 };
 
+// All native methods except those overridden here
 type NativeAppLovinMAXType = Omit<AppLovinMAXType, 'initialize' | 'getSegments'>;
 
 const nativeMethods: NativeAppLovinMAXType = NativeAppLovinMAX;
 
+/**
+ * Main AppLovin MAX module interface exposed to JavaScript.
+ * Wraps the native module and overrides `initialize()` and `getSegments()` for custom handling.
+ */
 export const AppLovinMAX: AppLovinMAXType = Object.create(nativeMethods, {
     initialize: {
         value: initialize,

package/src/ErrorCode.ts

@@ -16,85 +16,78 @@ const {
 } = AppLovinMAX.getConstants();
 
 /**
- * This enum contains various error codes that the SDK can return when a MAX ad fails to load or
- * display.
+ * Error codes returned by the AppLovin MAX SDK when an ad fails to load or display.
  */
 export enum ErrorCode {
     /**
-     * This error code represents an error that could not be categorized into one of the other defined
-     * errors. See the message field in the error object for more details.
+     * An unspecified error occurred.
+     * See the `message` field for more details.
      */
     UNSPECIFIED = MAX_ERROR_CODE_UNSPECIFIED,
 
     /**
-     * This error code indicates that MAX returned no eligible ads from any mediated networks for this
-     * app/device.
+     * No eligible ads were returned from any mediated networks.
      */
     NO_FILL = MAX_ERROR_CODE_NO_FILL,
 
     /**
-     * This error code indicates that MAX returned eligible ads from mediated networks, but all ads
-     * failed to load. See the adLoadFailureInfo field in the error object for more details.
+     * Eligible ads were returned but all failed to load.
+     * See `adLoadFailureInfo` for more details.
      */
     AD_LOAD_FAILED = MAX_ERROR_CODE_AD_LOAD_FAILED,
 
     /**
-     * This error code represents an error that was encountered when showing an ad.
+     * An error occurred while attempting to display the ad.
      */
     AD_DISPLAY_FAILED = MAX_ERROR_CODE_AD_DISPLAY_FAILED,
 
     /**
-     * This error code indicates that the ad request failed due to a generic network error. See the
-     * message field in the error object for more details.
+     * The ad request failed due to a general network issue.
+     * See the `message` field for details.
      */
     NETWORK_ERROR = MAX_ERROR_CODE_NETWORK_ERROR,
 
     /**
-     * This error code indicates that the ad request timed out due to a slow internet connection.
+     * The ad request timed out, likely due to a slow internet connection.
      */
     NETWORK_TIMEOUT = MAX_ERROR_CODE_NETWORK_TIMEOUT,
 
     /**
-     * This error code indicates that the ad request failed because the device is not connected to the
-     * internet.
+     * The ad request failed because the device was offline.
      */
     NO_NETWORK = MAX_ERROR_CODE_NO_NETWORK,
 
     /**
-     * This error code indicates that you attempted to show a fullscreen ad while another fullscreen ad
-     * is still showing.
+     * A fullscreen ad was requested while another one was already showing.
      */
     FULLSCREEN_AD_ALREADY_SHOWING = MAX_ERROR_CODE_FULLSCREEN_AD_ALREADY_SHOWING,
 
     /**
-     * This error code indicates you are attempting to show a fullscreen ad before the one has been
-     * loaded.
+     * A fullscreen ad was requested before it had finished loading.
      */
     FULLSCREEN_AD_NOT_READY = MAX_ERROR_CODE_FULLSCREEN_AD_NOT_READY,
 
     /**
-     * This error code indicates you attempted to present a fullscreen ad from an invalid view
-     * controller.
-     * **iOS ONLY**.
+     * The ad was presented from an invalid view controller.
+     * **iOS only**.
      */
     FULLSCREEN_AD_INVALID_VIEW_CONTROLLER = MAX_ERROR_CODE_FULLSCREEN_AD_INVALID_VIEW_CONTROLLER,
 
     /**
-     * This error code indicates that the SDK failed to display an ad because the user has the
-     * "Don't Keep Activities" developer setting enabled.
-     * **Android ONLY**.
+     * The SDK was unable to display the ad because the
+     * "Don't Keep Activities" developer setting is enabled.
+     * **Android only**.
      */
     DONT_KEEP_ACTIVITIES_ENABLED = MAX_ERROR_CODE_DONT_KEEP_ACTIVITIES_ENABLED,
 
     /**
-     * This error code indicates that the SDK failed to load an ad because the publisher provided an
-     * invalid ad unit identifier.
+     * The ad failed to load due to an invalid ad unit identifier.
      *
-     * Possible reasons for an invalid ad unit identifier:
-     * 1. Ad unit identifier is malformed or does not exist.
-     * 2. Ad unit is disabled.
-     * 3. Ad unit is not associated with the current app's package name.
-     * 4. Ad unit was created within the last 30-60 minutes.
+     * Possible causes:
+     * 1. The ad unit ID is malformed or does not exist.
+     * 2. The ad unit is disabled.
+     * 3. The ad unit is not linked to the current app’s package name.
+     * 4. The ad unit was recently created (less than ~30–60 minutes ago).
      */
     INVALID_AD_UNIT_ID = MAX_ERROR_CODE_INVALID_AD_UNIT_ID,
 }

package/src/EventEmitter.ts

@@ -1,15 +1,28 @@
+/**
+ * Manages AppLovin MAX ad event listeners using a shared NativeEventEmitter.
+ * Ensures only one active subscription per event type at any given time.
+ */
+
 import { NativeEventEmitter } from 'react-native';
 import type { EventSubscription } from 'react-native';
 import type { AdEventObject, AdEventListener } from './types/AdEvent';
 import AppLovinMAX from './specs/NativeAppLovinMAXModule';
 
-// Note that this is a singleton in ES6 module
+// Singleton event emitter for AppLovin MAX native events.
 const emitter = new NativeEventEmitter(AppLovinMAX);
 
+// Tracks active subscriptions by event type.
 const subscriptions: Record<string, EventSubscription> = {};
 
+/**
+ * Subscribes to a specific ad event.
+ * If a listener already exists for the event, it will be replaced.
+ *
+ * @param event - The event name to listen for.
+ * @param handler - The callback to handle the event.
+ */
 export const addEventListener = <T extends AdEventObject>(event: string, handler: AdEventListener<T>): void => {
-    const subscription: EventSubscription = emitter.addListener(event, handler);
+    const subscription = emitter.addListener(event, handler);
     const currentSubscription = subscriptions[event];
     if (currentSubscription) {
         currentSubscription.remove();
@@ -17,6 +30,11 @@ export const addEventListener = <T extends AdEventObject>(event: string, handler
     subscriptions[event] = subscription;
 };
 
+/**
+ * Unsubscribes from a specific ad event, if a listener exists.
+ *
+ * @param event - The event name to unsubscribe from.
+ */
 export const removeEventListener = (event: string): void => {
     const currentSubscription = subscriptions[event];
     if (currentSubscription) {

package/src/Utils.ts

@@ -1,6 +1,17 @@
 import type { LocalExtraParameterValue } from './types/AdProps';
 
-export const makeExtraParametersArray = (input?: Record<string, string | null>) => (input ? Object.entries(input).map(([key, value]) => ({ key, value })) : []);
+/**
+ * Converts a record of string-based extra parameters into an array of `{ key, value }` objects.
+ * Used for sending extra parameters to the native SDK.
+ *
+ * @param input - An optional map of key-value string pairs (or null values).
+ * @returns An array of `{ key, value }` objects. Returns an empty array if input is undefined.
+ */
+export const makeExtraParametersArray = (input?: Record<string, string | null>): { key: string; value: string | null }[] => {
+    if (!input) return [];
+
+    return Object.entries(input).map(([key, value]) => ({ key, value }));
+};
 
 type LocalExtraParameterType = 'str' | 'bool';
 
@@ -9,6 +20,14 @@ type LocalExtraParameterValueMap = {
     bool: boolean | null;
 };
 
+/**
+ * Converts a map of local extra parameters into a filtered array of `{ key, value }` pairs.
+ * Only values matching the specified type (`'str'` or `'bool'`) are included.
+ *
+ * @param input - A record of local extra parameters (string, boolean, or null).
+ * @param type - The expected type of each value: `'str'` for strings, `'bool'` for booleans.
+ * @returns A filtered array of `{ key, value }` objects, cast to the specified type.
+ */
 export const makeLocalExtraParametersArray = <T extends LocalExtraParameterType>(
     input: Record<string, LocalExtraParameterValue> | undefined,
     type: T

package/src/nativeAd/NativeAdView.tsx

@@ -1,3 +1,8 @@
+/**
+ * Provides the NativeAdView component, which manages loading and rendering of native ads using the
+ * AppLovin MAX SDK in React Native.
+ */
+
 import * as React from 'react';
 import { forwardRef, useContext, useImperativeHandle, useRef, useState, useEffect, useCallback } from 'react';
 import { findNodeHandle, View } from 'react-native';
@@ -11,8 +16,7 @@ import type { NativeAdViewHandler, NativeAdViewProps } from '../types/NativeAdVi
 import { makeExtraParametersArray, makeLocalExtraParametersArray } from '../Utils';
 
 /**
- * The {@link NativeAdView} component that you use building a native ad. This loads a native ad and
- * renders it with the asset views:
+ * The {@link NativeAdView} component renders a native ad and binds it to asset views:
  *
  * - {@link IconView}
  * - {@link TitleView}
@@ -22,19 +26,21 @@ import { makeExtraParametersArray, makeLocalExtraParametersArray } from '../Util
  * - {@link MediaView}
  * - {@link CallToActionView}
  *
- * {@link NativeAdView} fills each asset view with the data of a native ad as soon as it loads the native
- * ad, but you need to provide the layout and style of the asset views.
- * {@link NativeAdView} can reload a new native ad by using the ref handler.
+ * Each asset view must be manually laid out and styled.
+ * The component automatically populates content once an ad is loaded.
+ * You can reload the ad using the component’s ref via `loadAd()`.
+ *
+ * **Note:** The AppLovin SDK must be initialized before using this component.
  *
  * ### Example:
- * ```js
+ * ```tsx
  * <NativeAdView
  *   ref={nativeAdViewHandler}
  *   adUnitId={adUnitId}
  *   style={styles.nativead}
  *   onAdLoaded={(adInfo: AdInfo) => { ... }}
  * >
- *   <View style={ ... }>
+ *   <View style={...}>
  *     <IconView style={styles.icon} />
  *     <TitleView style={styles.title} />
  *     <AdvertiserView style={styles.advertiser} />
@@ -46,6 +52,9 @@ import { makeExtraParametersArray, makeLocalExtraParametersArray } from '../Util
  *   </View>
  * </NativeAdView>
  * ```
+ *
+ * For a complete implementation example, see:
+ * https://github.com/AppLovin/AppLovin-MAX-React-Native/blob/master/example/src/NativeAdViewExample.tsx
  */
 export const NativeAdView = forwardRef<NativeAdViewHandler, NativeAdViewProps & ViewProps>(function NativeAdView(props, ref) {
     const [isInitialized, setIsInitialized] = useState<boolean>(false);
@@ -72,21 +81,13 @@ export const NativeAdView = forwardRef<NativeAdViewHandler, NativeAdViewProps &
     );
 });
 
+/**
+ * Extracts native ad info from a synthetic event and invokes the provided callback, if any.
+ * Ensures optional native ad fields have fallback defaults.
+ */
 const handleNativeAdViewEvent = <T extends AdInfoEvent | AdLoadFailedEvent>(event: NativeSyntheticEvent<T>, callback?: (adInfo: T) => void) => {
     if (!callback) return;
-
-    let adInfo: any = { ...event.nativeEvent };
-
-    if ('nativeAd' in event.nativeEvent) {
-        adInfo.nativeAd = {
-            ...event.nativeEvent.nativeAd,
-            isIconImageAvailable: event.nativeEvent.nativeAd?.isIconImageAvailable ?? false,
-            isOptionsViewAvailable: event.nativeEvent.nativeAd?.isOptionsViewAvailable ?? false,
-            isMediaViewAvailable: event.nativeEvent.nativeAd?.isMediaViewAvailable ?? false,
-        };
-    }
-
-    callback(adInfo);
+    callback(event.nativeEvent);
 };
 
 const NativeAdViewImpl = forwardRef<NativeAdViewHandler, NativeAdViewProps & ViewProps>(function NativeAdViewImpl(
@@ -98,13 +99,16 @@ const NativeAdViewImpl = forwardRef<NativeAdViewHandler, NativeAdViewProps & Vie
 
     const nativeAdViewRef = useRef<React.ElementRef<typeof NativeAdViewComponent> | undefined>();
 
-    // Load a new ad
+    // Triggers a native ad load via the native command
     const loadAd = useCallback(() => {
         nativeAdViewRef.current && Commands.loadAd(nativeAdViewRef.current);
     }, []);
 
     useImperativeHandle(ref, () => ({ loadAd }), [loadAd]);
 
+    /**
+     * Updates the native asset view binding for a given view type (e.g., TitleView, MediaView).
+     */
     const updateAssetView = useCallback((assetViewRef: React.RefObject<View>, type: string) => {
         if (!nativeAdViewRef.current || !assetViewRef.current) return;
 
@@ -114,6 +118,12 @@ const NativeAdViewImpl = forwardRef<NativeAdViewHandler, NativeAdViewProps & Vie
         }
     }, []);
 
+    /**
+     * Handles native ad load event:
+     * - Updates context with the new native ad data
+     * - Notifies native module of updated asset view mappings
+     * - Triggers native rendering after all asset views are registered
+     */
     const onAdLoadedEvent = useCallback(
         (event: NativeSyntheticEvent<AdInfoEvent>) => {
             const nativeAdImpl = event.nativeEvent.nativeAdImpl;

package/src/nativeAd/NativeAdViewComponents.tsx

@@ -1,9 +1,28 @@
+/**
+ * Provides pre-styled React Native components for each native ad asset view:
+ *
+ * - TitleView
+ * - AdvertiserView
+ * - BodyView
+ * - CallToActionView
+ * - IconView
+ * - OptionsView
+ * - MediaView
+ * - StarRatingView
+ *
+ * Each component pulls ad content and view refs from NativeAdView context,
+ * and must be rendered inside a {@link NativeAdView}.
+ */
+
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
 import { Text, Image, View, TouchableOpacity, StyleSheet, Platform } from 'react-native';
-import type { ViewProps, ImageProps, TextStyle, TextProps } from 'react-native';
+import type { ViewProps, ImageProps, TextProps } from 'react-native';
 import { NativeAdViewContext } from './NativeAdViewProvider';
 
+/**
+ * Renders the native ad’s title.
+ */
 export const TitleView = (props: TextProps) => {
     const { titleRef, nativeAd } = useContext(NativeAdViewContext);
     return (
@@ -13,6 +32,9 @@ export const TitleView = (props: TextProps) => {
     );
 };
 
+/**
+ * Renders the advertiser name.
+ */
 export const AdvertiserView = (props: TextProps) => {
     const { advertiserRef, nativeAd } = useContext(NativeAdViewContext);
     return (
@@ -22,6 +44,9 @@ export const AdvertiserView = (props: TextProps) => {
     );
 };
 
+/**
+ * Renders the ad’s body text (description).
+ */
 export const BodyView = (props: TextProps) => {
     const { bodyRef, nativeAd } = useContext(NativeAdViewContext);
     return (
@@ -31,31 +56,39 @@ export const BodyView = (props: TextProps) => {
     );
 };
 
+/**
+ * Renders the call-to-action label.
+ * On iOS, wraps the text with a TouchableOpacity for better click behavior.
+ */
 export const CallToActionView = (props: TextProps) => {
     const { callToActionRef, nativeAd } = useContext(NativeAdViewContext);
-    // TouchableOpacity disables clicking on certain Android devices.
+
     if (Platform.OS === 'android') {
         return (
             <Text {...props} ref={callToActionRef}>
                 {nativeAd.callToAction ?? ''}
             </Text>
         );
-    } else {
-        return (
-            <TouchableOpacity>
-                <Text {...props} ref={callToActionRef}>
-                    {nativeAd.callToAction ?? ''}
-                </Text>
-            </TouchableOpacity>
-        );
     }
+
+    return (
+        <TouchableOpacity>
+            <Text {...props} ref={callToActionRef}>
+                {nativeAd.callToAction ?? ''}
+            </Text>
+        </TouchableOpacity>
+    );
 };
 
+/**
+ * Renders the icon image for the native ad.
+ * Falls back to a blank placeholder if not available.
+ */
 export const IconView = (props: Omit<ImageProps, 'source'>) => {
     const { imageRef, nativeAd } = useContext(NativeAdViewContext);
     const defaultIcon = require('./img/blank_icon.png');
 
-    const imageSource = (() => {
+    const imageSource = useMemo(() => {
         if (nativeAd?.url) {
             return { uri: nativeAd.url };
         }
@@ -63,60 +96,86 @@ export const IconView = (props: Omit<ImageProps, 'source'>) => {
             return { uri: `data:image/jpeg;base64,${nativeAd.imageSource}` };
         }
         return defaultIcon;
-    })();
+    }, [nativeAd.url, nativeAd.imageSource, defaultIcon]);
 
     return <Image {...props} ref={imageRef} source={imageSource} />;
 };
 
+/**
+ * Renders the native ad’s options view.
+ */
 export const OptionsView = (props: ViewProps) => {
     const { optionViewRef } = useContext(NativeAdViewContext);
     return <View {...props} ref={optionViewRef} />;
 };
 
+/**
+ * Renders the native ad’s media content.
+ */
 export const MediaView = (props: ViewProps) => {
     const { mediaViewRef } = useContext(NativeAdViewContext);
     return <View {...props} ref={mediaViewRef} />;
 };
 
-export const StarRatingView = (props: ViewProps) => {
-    const { style, ...restProps } = props;
-    const maxStarCount = 5;
-    const starTextStyle = useMemo(() => StyleSheet.flatten(style) as TextStyle, [style]);
-    const starColor = starTextStyle.color ?? '#ffe234';
-    const starSize = starTextStyle.fontSize ?? 10;
+/**
+ * Props for the {@link StarRatingView} component, which displays a star rating
+ * using Unicode stars (★ and ☆) styled with color, shadow, and size.
+ */
+type StarRatingViewProps = ViewProps & {
+    /**
+     * The color used for filled (active) stars.
+     * Defaults to gold (#ffe234).
+     */
+    color?: string;
+
+    /**
+     * The color used for empty (inactive) stars.
+     * Defaults to light gray (#dedede).
+     */
+    shadowColor?: string;
+
+    /**
+     * The size of each star, which also determines their visual size.
+     * Defaults to 10.
+     */
+    size?: number;
+};
+
+/**
+ * Renders the star rating of the ad, using Unicode stars (★ and ☆).
+ * Filled stars are rendered over hollow stars using a clipped view.
+ */
+export const StarRatingView = ({ color = '#ffe234', shadowColor = '#dedede', size = 10, style }: StarRatingViewProps) => {
     const { nativeAd } = useContext(NativeAdViewContext);
+    const maxStarCount = 5;
+
+    const containerStyle = useMemo(() => StyleSheet.flatten([style, styles.starRatingContainer]), [style]);
 
-    // Memoize the star rendering process
     const stars = useMemo(() => {
-        if (!nativeAd.starRating) {
-            return Array.from({ length: maxStarCount }).map((_, index) => (
-                <Text key={index} style={{ fontSize: starSize }}>
-                    {' '}
-                </Text>
-            ));
-        }
+        const starRating = Math.max(0, Math.min(maxStarCount, nativeAd.starRating ?? 0));
 
         return Array.from({ length: maxStarCount }).map((_, index) => {
-            const starRating = nativeAd.starRating!;
-            const width = (starRating - index) * starSize;
+            const isFull = starRating > index;
+            const width = Math.min(size, Math.max(0, (starRating - index) * size));
+
             return (
                 <View key={index}>
-                    <Text style={{ fontSize: starSize, color: starColor }}>{String.fromCodePoint(0x2606)}</Text>
-                    {starRating > index && (
-                        <View style={[{ width: width }, styles.starRating]}>
-                            <Text style={{ fontSize: starSize, color: starColor }}>{String.fromCodePoint(0x2605)}</Text>
+                    <Text style={{ fontSize: size, color: isFull ? color : shadowColor }}>{String.fromCodePoint(0x2606)}</Text>
+                    {isFull && (
+                        <View style={[{ width }, styles.starRating]}>
+                            <Text style={{ fontSize: size, color }}>{String.fromCodePoint(0x2605)}</Text>
                         </View>
                     )}
                 </View>
             );
         });
-    }, [nativeAd.starRating, starColor, starSize]);
+    }, [nativeAd.starRating, color, shadowColor, size]);
 
-    return (
-        <View {...restProps} style={[style, styles.starRatingContainer]}>
-            {stars}
-        </View>
-    );
+    if (!nativeAd.starRating) {
+        return <View style={containerStyle} />;
+    }
+
+    return <View style={containerStyle}>{stars}</View>;
 };
 
 const styles = StyleSheet.create({