@osano/osano-cmp-react-native 0.14.0 → 0.15.0

package/src/services/consent.ts

@@ -1,29 +1,25 @@
+import { sha512 } from 'js-sha512';
+import { Platform, NativeModules } from 'react-native';
+import { TextEncoder } from 'text-encoding';
+import type { ConsentManager } from '../ConsentManager';
 import {
 	ConsentCategory,
 	ConsentCategory as ConsentCategoryType,
 	env,
 } from '../constants';
-import { NativeModules, Platform } from 'react-native';
 import { clearStorage, getStorage, setStorage } from '../native/OsanoCmp';
-
-import API from '../utils/API';
 import type { Config } from '../types/consent-config';
-import type { ConsentManager } from '../ConsentManager';
-import { TextEncoder } from 'text-encoding';
 import { merge } from '../utils';
+import API from '../utils/API';
 import { osanoLogger } from '../utils/OsanoLogger';
-import { sha512 } from 'js-sha512';
 
 const Buffer = require('buffer').Buffer;
 
 const { CONSENT_URI, LOOKUPS_URI, OSANO_ORIGIN } = env;
 
-const IS_OFFICIAL_SAMPLE: boolean = (NativeModules as any)?.OsanoCmpSdk
-	?.IS_OFFICIAL_SAMPLE;
+const IS_OFFICIAL_SAMPLE: boolean = (NativeModules as any)?.OsanoCmpSdk?.IS_OFFICIAL_SAMPLE;
 
-const CONSENTING_PLATFORM_TAG = IS_OFFICIAL_SAMPLE
-	? `${Platform.OS}.sample-react-native`
-	: `${Platform.OS}.react-native`;
+const CONSENTING_PLATFORM_TAG = IS_OFFICIAL_SAMPLE ? `${Platform.OS}.sample-react-native` : `${Platform.OS}.react-native`;
 
 const overrideConfig: Partial<Config> = {
 	// Override config here
@@ -109,19 +105,24 @@ const storeConsent = async (
 			resolve(cmp.consent ?? []);
 			return cmp.consent;
 		};
-		setStorage(
-			`${STORAGE_KEY}_last_recorded_consent_date`,
-			JSON.stringify(new Date()),
-		)
-			.then(() => {
+		switch (Platform.OS) {
+			case 'ios':
+			case 'android':
 				setStorage(
-					`${STORAGE_KEY}_${cmp.configId}`,
-					JSON.stringify(cmp.consent),
+					`${STORAGE_KEY}_last_recorded_consent_date`,
+					JSON.stringify(new Date()),
 				)
-					.then(resConsent)
+					.then(() => {
+						setStorage(
+							`${STORAGE_KEY}_${cmp.configId}`,
+							JSON.stringify(cmp.consent),
+						)
+							.then(resConsent)
+							.catch(reject);
+					})
 					.catch(reject);
-			})
-			.catch(reject);
+				break;
+		}
 	});
 };
 
@@ -132,7 +133,15 @@ export const clearConsent = async (cmp: ConsentManager) => {
 			resolve([ConsentCategory.ESSENTIAL]);
 			return cmp.consent;
 		};
-		clearStorage(`${STORAGE_KEY}_${cmp.configId}`).then(resConsent);
+		switch (Platform.OS) {
+			case 'android':
+			case 'ios':
+				clearStorage(`${STORAGE_KEY}_${cmp.configId}`).then(resConsent);
+				break;
+			default:
+				resConsent();
+				break;
+		}
 	});
 };
 
@@ -151,12 +160,19 @@ const retrieveConsent = async (cmp: ConsentManager) => {
 			}
 			throw new Error('Consent not found');
 		};
-		getStorage(`${STORAGE_KEY}_${cmp.configId}`)
-			.then(resConsent)
-			.catch(() => {
-				// Consent not found
-				clearConsent(cmp).then(resolve);
-			});
+		switch (Platform.OS) {
+			case 'ios':
+			case 'android':
+				getStorage(`${STORAGE_KEY}_${cmp.configId}`)
+					.then(resConsent)
+					.catch(() => {
+						// Consent not found
+						clearConsent(cmp).then(resolve);
+					});
+				break;
+			default:
+				break;
+		}
 	});
 };
 
@@ -172,7 +188,15 @@ const retrieveLastConsentTimestamp = async () => {
 				return '';
 			}
 		};
-		getStorage(`${STORAGE_KEY}_last_recorded_consent_date`).then(resValue);
+		switch (Platform.OS) {
+			case 'ios':
+			case 'android':
+				getStorage(`${STORAGE_KEY}_last_recorded_consent_date`).then(resValue);
+				break;
+			default:
+				// nothing
+				break;
+		}
 	});
 };
 

package/src/types/index.d.ts

@@ -27,9 +27,9 @@ export interface OsanoProps {
 	hideUI?: boolean;
 	hideDisclosures?: boolean;
 	onConfigLoadSuccess?: () => void;
-	onConfigLoadFailure?: (err: Error) => void;
+	onConfigLoadFailure?: () => void;
 	onLangLoadSuccess?: () => void;
-	onLangLoadFailure?: (err: Error) => void;
+	onLangLoadFailure?: () => void;
 	onGoogleConsentUpdate?: GoogleConsentModeCallback;
 	overrides?: OsanoOverrides;
 	extUsrData?: string;

package/src/utils/ExpoDetector.ts

@@ -0,0 +1,114 @@
+import { Platform } from 'react-native';
+import { osanoLogger as OsanoLogger } from './OsanoLogger';
+
+interface ExpoDetectionResult {
+	isExpo: boolean;
+	isExpoGo: boolean;
+}
+
+export class ExpoDetector {
+	private static _detectionResult: ExpoDetectionResult | null = null;
+	
+	/**
+	 * Detect Expo environment and cache result
+	 */
+	public static detect(): ExpoDetectionResult {
+		// Return cached result if available
+		if (this._detectionResult) {
+			return this._detectionResult;
+		}
+
+		const result: ExpoDetectionResult = {
+			isExpo: false,
+			isExpoGo: false,
+		};
+
+		// Check for Expo runtime via globals
+		try {
+			const hasExpoGlobalProp = !!(global as any).expo;
+			
+			if (hasExpoGlobalProp) {
+				result.isExpo = true;
+				
+				// Analyze global.expo to distinguish Expo Go from dev builds
+				const globalExpoContent = (global as any).expo;
+				
+				if (globalExpoContent && typeof globalExpoContent === 'object') {
+					const documentsDir = globalExpoContent.documentsDir || '';
+					const cacheDir = globalExpoContent.cacheDir || '';
+					
+					// Check execution environment
+					const exponentConstants = globalExpoContent.modules?.ExponentConstants;
+					const executionEnvironment = exponentConstants?.executionEnvironment;
+					
+					// Check for Expo Go app ID
+					const expoApplication = globalExpoContent.modules?.ExpoApplication;
+					const applicationId = expoApplication?.applicationId;
+					
+					// Expo Go indicators: package name, execution env, app ID
+					const hasExpoGoPackageName = documentsDir.includes('host.exp.exponent') || 
+						cacheDir.includes('host.exp.exponent');
+					const isStoreClient = executionEnvironment === 'storeClient';
+					const hasExpoGoAppId = applicationId === 'host.exp.exponent';
+					
+					if (hasExpoGoPackageName || isStoreClient || hasExpoGoAppId) {
+						result.isExpoGo = true;
+					} else {
+						result.isExpoGo = false;
+					}
+				} else {
+					// Assume dev build for safety
+					result.isExpoGo = false;
+				}
+			}
+		} catch (error) {
+			OsanoLogger.debug(`Expo detection failed: ${String(error)}`);
+		}
+
+		// Cache the result
+		this._detectionResult = result;
+		
+		return result;
+	}
+
+	/**
+	 * Check if running in Expo Go
+	 */
+	public static isExpoGo(): boolean {
+		const result = this.detect();
+		return result.isExpoGo;
+	}
+
+	/**
+	 * Check if any Expo environment
+	 */
+	public static isExpo(): boolean {
+		const result = this.detect();
+		return result.isExpo;
+	}
+
+	/**
+	 * Get environment description
+	 */
+	public static getEnvironmentDescription(): string {
+		const result = this.detect();
+		
+		if (!result.isExpo) {
+			return 'Bare React Native';
+		}
+
+		if (result.isExpoGo) {
+			return 'Expo Go';
+		}
+
+		return 'Expo Development Build';
+	}
+
+	/**
+	 * Reset cached result for testing
+	 */
+	public static resetCache(): void {
+		this._detectionResult = null;
+	}
+}
+

package/src/utils/ExpoGoMemoryStorage.ts

@@ -0,0 +1,61 @@
+/**
+ * In-memory storage fallback for Expo Go environment
+ * Provides storage functionality when native modules are not available
+ */
+export class ExpoGoMemoryStorage {
+	private static storage = new Map<string, string>();
+	private static defaultStorage = new Map<string, string | number | boolean>();
+
+	static setStorage(key: string, value: string): Promise<string> {
+		this.storage.set(key, value);
+		return Promise.resolve(value);
+	}
+
+	static getStorage(key: string): Promise<string | null> {
+		const value = this.storage.get(key) || null;
+		return Promise.resolve(value);
+	}
+
+	static clearStorage(key: string): Promise<void> {
+		this.storage.delete(key);
+		return Promise.resolve();
+	}
+
+	static setStorageToDefault(key: string, value: string): Promise<string> {
+		this.defaultStorage.set(key, value);
+		return Promise.resolve(value);
+	}
+
+	static setIntStorageToDefault(key: string, value: number): Promise<number> {
+		this.defaultStorage.set(key, value);
+		return Promise.resolve(value);
+	}
+
+	static setBoolStorageToDefault(key: string, value: boolean): Promise<boolean> {
+		this.defaultStorage.set(key, value);
+		return Promise.resolve(value);
+	}
+
+	static clearStorageFromDefault(key: string): Promise<void> {
+		this.defaultStorage.delete(key);
+		return Promise.resolve();
+	}
+
+	static getDeviceId(): Promise<string> {
+		// Generate a consistent device ID for Expo Go session
+		let deviceId = this.storage.get('__expo_device_id');
+		if (!deviceId) {
+			deviceId = `expo_go_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+			this.storage.set('__expo_device_id', deviceId);
+		}
+		return Promise.resolve(deviceId);
+	}
+
+	/**
+	 * Clear all storage for testing purposes
+	 */
+	static clearAll(): void {
+		this.storage.clear();
+		this.defaultStorage.clear();
+	}
+}

package/src/utils/Translator.ts

@@ -103,7 +103,7 @@ export default class Translator extends EventEmitter {
 	load(
 		desiredLocale?: string,
 		onLangLoadSuccess?: () => void,
-		onLangLoadFailure?: (err: Error) => void,
+		onLangLoadFailure?: () => void,
 	): Promise<PromiseSettledResult<string | undefined>[]> {
 		const allLocales = desiredLocale
 			? Translator.fallbackLanguages(

package/src/views/Dialog/Buttons.tsx

@@ -78,4 +78,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default Buttons;
+export default Buttons;

package/src/views/Dialog/index.tsx

@@ -122,38 +122,28 @@ export const Dialog = (): ReactElement<Modal> => {
 					{
 						minHeight: dialogType === 'box' ? 32 : 0,
 					},
-					displayPosition.indexOf('bottom') === 0 ? styles.grow : undefined,
+					displayPosition.indexOf('bottom') >= 0 ? styles.grow : undefined,
 				].filter(Boolean),
 				[
 					styles.row,
 					{
 						minHeight: dialogType === 'box' ? 32 : 0,
 					},
-					displayPosition.indexOf('top') === 0 ? styles.grow : undefined,
+					displayPosition.indexOf('top') >= 0 ? styles.grow : undefined,
 				],
 			],
 			[displayPosition, dialogType],
 		);
 	const dialogStyles: StyleProp<ViewStyle>[] = [
 		{
-			alignItems: 'stretch',
 			backgroundColor: dialogBackgroundColor,
-			justifyContent: 'center',
-			flex: 1,
-			// flexGrow: 1,
-			// flexShrink: 1,
+			maxWidth: 1024,
+			width: '100%',
+			borderRadius: dialogType === 'box' ? 8 : 0,
+			padding: 28,
 		},
 	];
 
-	dialogStyles.push(
-		Platform.OS === 'web' && dialogType === 'box'
-			? styles.dialogBox
-			: styles.dialogBar,
-	);
-	dialogStyles.push(
-		windowWidth >= 768 ? (isRTL ? styles.rowReverse : styles.row) : styles.col,
-	);
-
 	useEffect(() => {
 		if (!open) {
 			return;
@@ -190,121 +180,95 @@ export const Dialog = (): ReactElement<Modal> => {
 			presentationStyle="overFullScreen"
 			supportedOrientations={['portrait', 'landscape']}
 		>
-			<SafeAreaView style={[styles.container, dialogOverlay]}>
-				<View
-					style={vDialogTop}
-					onPointerUp={handleClose}
-					onTouchEnd={handleClose}
-					onResponderRelease={handleClose}
-				/>
-				<View style={[styles.row, styles.fullWidth, styles.fitContent]}>
-					<View
-						style={hDialogLeft}
-						onPointerUp={handleClose}
-						onTouchEnd={handleClose}
-						onResponderRelease={handleClose}
-					/>
-					<View style={dialogStyles}>
-						<View style={styles.dialogContent}>
-							<View style={[styles.row, styles.fitContent]}>
-								<Text style={dialogForeground} testID="dialog-message">
-									<Message />
-									<Text> </Text>
-									<StoragePolicyLink
-										testID="dialog-policy-link-1"
-										policyLinkText={config?.policyLinkText}
-										href={config?.storagePolicyHref}
-									/>
-									{config?.additionalLinks &&
-									config?.additionalLinks?.length >= 1 ? (
-										<Text> | </Text>
-									) : null}
-									<StoragePolicyLink
-										testID="dialog-policy-link-2"
-										policyLinkText={config?.additionalLinks?.at(0)?.at(0)}
-										href={config?.additionalLinks?.at(0)?.at(1)}
-									/>
-								</Text>
-							</View>
-							{isFirstLayerUsageRequired ? (
-								<View
-									testID="first-layer-usage"
-									style={[
-										styles.row,
-										styles.categories,
-										isRTL ? styles.hRight : styles.hLeft,
-									]}
-								>
-									<FirstLayerUsage />
-								</View>
-							) : null}
-							{useTcf || config?.showManagePreferencesLinkInDialog ? (
-								<View
-									testID="preference-management-deep-links"
-									style={[
-										styles.row,
-										styles.categories,
-										isRTL ? styles.hRight : styles.hLeft,
-									]}
-								>
-									<PreferenceManagementDeepLinks />
-								</View>
-							) : null}
-							{(useTcf && !config?.showManagePreferencesButtonInDialog) ||
-							config?.showFirstLayerCategories ? (
-								<View
-									testID="show-first-layer-categories"
-									style={[
-										styles.col,
-										styles.categories,
-										isRTL ? styles.hRight : styles.hLeft,
-									]}
-								>
-									{categories.map((category) => (
-										<Toggle
-											align="left"
-											key={category}
-											onValueChange={handleToggleCategory(category)}
-											value={getConsent(state, category)}
-										>
-											<Text style={dialogForeground}>
-												<Locale path={`categories.${category}.label`} />
-											</Text>
-										</Toggle>
-									))}
-								</View>
-							) : null}
+			<View style={[styles.modalContainer, dialogOverlay]}>
+				<View style={dialogStyles}>
+					<View style={styles.dialogContent}>
+						<View style={[styles.row, styles.fitContent]}>
+							<Text style={dialogForeground} testID="dialog-message">
+								<Message />
+								<Text> </Text>
+								<StoragePolicyLink
+									testID="dialog-policy-link-1"
+									policyLinkText={config?.policyLinkText}
+									href={config?.storagePolicyHref}
+								/>
+								{config?.additionalLinks &&
+								config?.additionalLinks?.length >= 1 ? (
+									<Text> | </Text>
+								) : null}
+								<StoragePolicyLink
+									testID="dialog-policy-link-2"
+									policyLinkText={config?.additionalLinks?.at(0)?.at(0)}
+									href={config?.additionalLinks?.at(0)?.at(1)}
+								/>
+							</Text>
 						</View>
-						<Buttons
-							style={windowWidth >= 768 ? styles.dialogRow : styles.dialogCol}
-							buttonStyle={
-								windowWidth >= 768 ? styles.buttonRow : styles.buttonCol
-							}
-						/>
-						<CloseButton
-							testID="close-dialog"
-							onPress={handleClose}
-							style={[
-								styles.close,
-								isRTL ? styles.closeLeft : styles.closeRight,
-							]}
-							color={dialogForegroundColor}
-						/>
+						{isFirstLayerUsageRequired ? (
+							<View
+								testID="first-layer-usage"
+								style={[
+									styles.row,
+									styles.categories,
+									isRTL ? styles.hRight : styles.hLeft,
+								]}
+							>
+								<FirstLayerUsage />
+							</View>
+						) : null}
+						{useTcf || config?.showManagePreferencesLinkInDialog ? (
+							<View
+								testID="preference-management-deep-links"
+								style={[
+									styles.row,
+									styles.categories,
+									isRTL ? styles.hRight : styles.hLeft,
+								]}
+							>
+								<PreferenceManagementDeepLinks />
+							</View>
+						) : null}
+						{(useTcf && !config?.showManagePreferencesButtonInDialog) ||
+						config?.showFirstLayerCategories ? (
+							<View
+								testID="show-first-layer-categories"
+								style={[
+									styles.col,
+									styles.categories,
+									isRTL ? styles.hRight : styles.hLeft,
+								]}
+							>
+								{categories.map((category) => (
+									<Toggle
+										align="left"
+										key={category}
+										onValueChange={handleToggleCategory(category)}
+										value={getConsent(state, category)}
+									>
+										<Text style={dialogForeground}>
+											<Locale path={`categories.${category}.label`} />
+										</Text>
+									</Toggle>
+								))}
+							</View>
+						) : null}
 					</View>
-					<View
-						style={hDialogRight}
-						onPointerUp={handleClose}
-						onTouchEnd={handleClose}
-						onResponderRelease={handleClose}
+					<Buttons
+						style={windowWidth >= 768 ? styles.dialogRow : styles.dialogCol}
+						buttonStyle={
+							windowWidth >= 768 ? styles.buttonRow : styles.buttonCol
+						}
+					/>
+					<CloseButton
+						testID="close-dialog"
+						onPress={handleClose}
+						style={[
+							styles.close,
+							isRTL ? styles.closeLeft : styles.closeRight,
+						]}
+						color={dialogForegroundColor}
 					/>
 				</View>
-				<View
-					style={vDialogBottom}
-					onPointerUp={handleClose}
-					onTouchEnd={handleClose}
-					onResponderRelease={handleClose}
-				/>
-			</SafeAreaView>
+			</View>
 		</Modal>
 	);
 };
@@ -312,6 +276,14 @@ export const Dialog = (): ReactElement<Modal> => {
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+	},
+	modalContainer: {
+		flex: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+		padding: 20,
 	},
 	close: {
 		margin: 4,
@@ -329,11 +301,13 @@ const styles = StyleSheet.create({
 		justifyContent: 'center',
 		width: '100%',
 	},
-	dialogContent: {
-		flexGrow: 1,
-		flexShrink: 1,
+	dialogWrapper: {
+		flex: 1,
+		alignItems: 'center',
 		justifyContent: 'center',
-		maxWidth: 1024,
+	},
+	dialogContent: {
+		marginBottom: 16,
 	},
 	buttonCol: {
 		maxWidth: Number.MAX_SAFE_INTEGER,
@@ -368,12 +342,11 @@ const styles = StyleSheet.create({
 	dialogBox: {
 		display: 'flex',
 		gap: 16,
-		flex: 1,
 		alignItems: 'center',
 		justifyContent: 'center',
-		margin: 'auto',
 		maxWidth: 1024,
 		padding: 28,
+		borderRadius: 8,
 	},
 	dialogRow: {
 		display: 'flex',
@@ -418,4 +391,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default Dialog;
+export default Dialog;

package/src/views/Drawer/Drawer.Header.tsx

@@ -136,4 +136,4 @@ const styles = StyleSheet.create({
 		writingDirection: 'rtl',
 		flexDirection: 'row-reverse',
 	},
-});
+});

package/src/views/Drawer/Drawer.Iab.Disclosures.tsx

@@ -164,7 +164,7 @@ const IabDisclosureListHeader: React.FC<{ style: StyleProp<ViewStyle> }> = ({
 const ListItemRenderer = ({
 	item,
 }: ListRenderItemInfo<
-	(IabDisclosureType & { id: number; type: string }) | number
+	(IabDisclosureType & { id: number; type: string; key: string }) | number
 >) => {
 	if (typeof item === 'number') {
 		return (
@@ -174,7 +174,9 @@ const ListItemRenderer = ({
 		);
 	}
 
-	return <IabDisclosureItem {...item} />;
+	// Extract key from item and pass other props
+	const { key, ...itemProps } = item;
+	return <IabDisclosureItem key={key} {...itemProps} />;
 };
 
 const termAssign = (
@@ -196,6 +198,7 @@ export const IabDisclosuresDrawer: React.FC = () => {
 			| (IabDisclosureType & {
 					id: number;
 					type: string;
+					key: string;
 			  })
 		>
 	> | null = useRef(null);
@@ -321,7 +324,7 @@ export const IabDisclosuresDrawer: React.FC = () => {
 	]);
 
 	const disclosures: (
-		| (IabDisclosureType & { id: number; type: string })
+		| (IabDisclosureType & { id: number; type: string; key: string })
 		| number
 	)[] = useMemo(() => {
 		return [