react-native-acoustic-connect-beta 18.0.14 → 18.0.16

package/src/TLTRN.ts

@@ -12,6 +12,8 @@
 import MessageQueue from "react-native/Libraries/BatchedBridge/MessageQueue.js";
 import { Platform } from "react-native";
 import KeyboardListener from "./utils/KeyboardListener";
+import DialogListener from "./utils/DialogListener";
+import type { DialogEvent, DialogButtonClickEvent, DialogDismissEvent } from "./utils/DialogListener";
 import AcousticConnectRN from './index'; 
 
 // @ts-ignore
@@ -153,6 +155,79 @@ class TLTRN {
     return result;
   };
 
+  // New dialog event logging methods
+  static logDialogShowEvent = async (dialogId: string, dialogTitle: string, dialogType: string) => {
+    let result = false
+    try {
+      result = AcousticConnectRN.logDialogShowEvent(dialogId, dialogTitle, dialogType);
+    } catch (error: Error | any) {
+      console.log('LogDialogShowEvent error: ', error.message);
+    }
+    return result;
+  };
+
+  static logDialogDismissEvent = async (dialogId: string, dismissReason: string) => {
+    let result = false
+    try {
+      result = AcousticConnectRN.logDialogDismissEvent(dialogId, dismissReason);
+    } catch (error: Error | any) {
+      console.log('LogDialogDismissEvent error: ', error.message);
+    }
+    return result;
+  };
+
+  static logDialogButtonClickEvent = async (dialogId: string, buttonText: string, buttonIndex: number) => {
+    let result = false
+    try {
+      result = AcousticConnectRN.logDialogButtonClickEvent(dialogId, buttonText, buttonIndex);
+    } catch (error: Error | any) {
+      console.log('LogDialogButtonClickEvent error: ', error.message);
+    }
+    return result;
+  };
+
+  static logDialogCustomEvent = async (dialogId: string, eventName: string, values: Record<string, string | number | boolean>) => {
+    let result = false
+    try {
+      result = AcousticConnectRN.logDialogCustomEvent(dialogId, eventName, values);
+    } catch (error: Error | any) {
+      console.log('LogDialogCustomEvent error: ', error.message);
+    }
+    return result;
+  };
+
+  // Dialog event interceptor methods
+  static eventListenerRegistered = false;
+  static eventListenerUnsubscribe: (() => void) | null = null;
+  
+  static interceptDialogEvents = (enable: boolean) => {
+    const dialogListener = DialogListener.getInstance();
+    
+    if (enable && !TLTRN.eventListenerRegistered) {
+      dialogListener.startIntercepting();
+      TLTRN.eventListenerUnsubscribe = dialogListener.addEventListener((event: DialogEvent | DialogButtonClickEvent | DialogDismissEvent) => {
+        if ('buttonText' in event) {
+          // This is a button click event
+          TLTRN.logDialogButtonClickEvent(event.dialogId, event.buttonText, event.buttonIndex);
+        } else if ('dismissReason' in event) {
+          // This is a dialog dismiss event
+          TLTRN.logDialogDismissEvent(event.dialogId, event.dismissReason);
+        } else {
+          // This is a dialog show event
+          TLTRN.logDialogShowEvent(event.dialogId, event.dialogTitle, event.dialogType);
+        }
+      });
+      TLTRN.eventListenerRegistered = true;
+    } else if (!enable && TLTRN.eventListenerRegistered) {
+      dialogListener.stopIntercepting();
+      if (TLTRN.eventListenerUnsubscribe) {
+        TLTRN.eventListenerUnsubscribe();
+        TLTRN.eventListenerUnsubscribe = null;
+      }
+      TLTRN.eventListenerRegistered = false;
+    }
+  };
+
   static listenToBridge = (message: any) => {
     if (TLTRN.displayDebug) {
       console.log(

package/src/components/Connect.tsx

@@ -15,9 +15,10 @@ import TLTRN from '../TLTRN';
 interface ConnectProps {
     children: React.ReactNode;
     captureKeyboardEvents: boolean;
+    captureDialogEvents?: boolean; // New prop for dialog event capture
 }
 
-const Connect: React.FC<ConnectProps> = ({ children, captureKeyboardEvents }) => {
+const Connect: React.FC<ConnectProps> = ({ children, captureKeyboardEvents, captureDialogEvents = false }) => {
     const navigation = (children as any).ref; // Type assertion for children with ref
     const currentRoute = useRef<string | undefined>(undefined);
     const initial = useRef<boolean>(false);
@@ -26,6 +27,10 @@ const Connect: React.FC<ConnectProps> = ({ children, captureKeyboardEvents }) =>
         TLTRN.interceptKeyboardEvents(captureKeyboardEvents);
     }, [captureKeyboardEvents]);
 
+    useEffect(() => {
+        TLTRN.interceptDialogEvents(captureDialogEvents);
+    }, [captureDialogEvents]);
+
     useEffect(() => {
         if (
             !navigation ||

package/src/docs/DialogTracking.md

@@ -0,0 +1,252 @@
+# Dialog Event Tracking
+
+This document describes the dialog event tracking functionality added to the Acoustic Connect React Native SDK.
+
+## Overview
+
+The dialog tracking system provides automatic and manual tracking of dialog popup events and user interactions. It supports:
+
+- **Automatic tracking** of React Native's `Alert.alert()` calls
+- **Manual tracking** of custom dialog components
+- **Button click tracking** for both automatic and custom dialogs
+- **Event logging** to the Acoustic Connect backend
+
+## Features
+
+### 1. Automatic Alert.alert Interception
+
+The system automatically intercepts and tracks all `Alert.alert()` calls without requiring any code changes:
+
+```typescript
+// This will be automatically tracked
+Alert.alert(
+    'Confirmation',
+    'Are you sure?',
+    [
+        { text: 'Cancel', style: 'cancel' },
+        { text: 'OK', onPress: () => console.log('OK pressed') }
+    ]
+);
+```
+
+### 2. Manual Custom Dialog Tracking
+
+For custom dialog components, you can manually track events:
+
+```typescript
+import { useDialogTracking } from 'react-native-acoustic-connect-beta';
+
+const MyComponent = () => {
+    const { generateDialogId, trackDialogShow, trackDialogDismiss } = useDialogTracking();
+    
+    const showDialog = () => {
+        const dialogId = generateDialogId();
+        trackDialogShow(dialogId, 'My Custom Dialog', [
+            { text: 'Cancel', style: 'cancel' },
+            { text: 'OK' }
+        ]);
+        // Show your custom dialog
+    };
+    
+    const hideDialog = () => {
+        const dialogId = generateDialogId(); // Store this in your component state
+        trackDialogDismiss(dialogId, 'user_dismiss');
+        // Hide your custom dialog
+    };
+};
+```
+
+### 3. Button Click Tracking
+
+Track button clicks in custom dialogs:
+
+```typescript
+const { createTrackedButton } = useDialogTracking();
+
+const showDialogWithTrackedButtons = () => {
+    const dialogId = generateDialogId();
+    const originalButtons = [
+        { text: 'No', style: 'cancel' },
+        { text: 'Yes', onPress: () => console.log('Yes pressed') }
+    ];
+    
+    // Create tracked buttons
+    const trackedButtons = originalButtons.map((button, index) => 
+        createTrackedButton(dialogId, button, index)
+    );
+    
+    trackDialogShow(dialogId, 'Confirmation', trackedButtons);
+};
+```
+
+### 4. HOC-Based Automatic Tracking
+
+For the easiest integration, use the HOC (Higher-Order Component) approach:
+
+```typescript
+import { withAcousticAutoDialog } from 'react-native-acoustic-connect-beta';
+import { Dialog } from 'react-native-paper';
+
+// Create tracked version of your dialog component
+const TrackedDialog = withAcousticAutoDialog(Dialog);
+
+// Use normally - all events automatically tracked!
+<TrackedDialog 
+  visible={dialogVisible} 
+  onDismiss={hideDialog}
+  title="My Dialog"
+>
+  <Dialog.Content>
+    <Text>Dialog content</Text>
+  </Dialog.Content>
+  <Dialog.Actions>
+    <Button onPress={hideDialog}>Cancel</Button>
+    <Button onPress={confirmAction}>Confirm</Button>
+  </Dialog.Actions>
+</TrackedDialog>
+```
+
+The HOC automatically tracks:
+- Dialog show events
+- Dialog dismiss events  
+- Button click events within the dialog
+- Recursively scans dialog children for buttons
+
+## Setup
+
+### 1. Enable Dialog Tracking in Connect Component
+
+```typescript
+import { Connect } from 'react-native-acoustic-connect-beta';
+
+<Connect 
+    captureKeyboardEvents={true}
+    captureDialogEvents={true} // Enable dialog tracking
+>
+    <NavigationContainer ref={navigationRef}>
+        {/* Your app content */}
+    </NavigationContainer>
+</Connect>
+```
+
+### 2. Use the useDialogTracking Hook
+
+```typescript
+import { useDialogTracking } from 'react-native-acoustic-connect-beta';
+
+const MyComponent = () => {
+    const dialogTracking = useDialogTracking();
+    
+    // Use dialogTracking methods...
+};
+```
+
+## API Reference
+
+### Connect Component Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `captureDialogEvents` | `boolean` | `false` | Enable automatic dialog event tracking |
+
+### useDialogTracking Hook
+
+Returns an object with the following methods:
+
+#### `generateDialogId(): string`
+Generates a unique dialog identifier.
+
+#### `trackDialogShow(dialogId: string, title: string, buttons?: AlertButton[]): void`
+Tracks a dialog show event.
+
+#### `trackDialogDismiss(dialogId: string, reason: string): void`
+Tracks a dialog dismiss event.
+
+#### `trackDialogButtonClick(dialogId: string, buttonText: string, buttonIndex: number): void`
+Tracks a dialog button click event.
+
+#### `trackDialogCustomEvent(dialogId: string, eventName: string, values: Record<string, string \| number \| boolean>): void`
+Tracks a custom dialog event.
+
+#### `createTrackedButton(dialogId: string, button: AlertButton, buttonIndex: number): AlertButton`
+Creates a button with automatic click tracking.
+
+#### `cleanup(): void`
+Cleans up dialog tracking state.
+
+### DialogListener Class
+
+For advanced usage, you can directly use the DialogListener class:
+
+```typescript
+import { DialogListener } from 'react-native-acoustic-connect-beta';
+
+const dialogListener = DialogListener.getInstance();
+dialogListener.startIntercepting();
+dialogListener.addEventListener((event) => {
+    console.log('Dialog event:', event);
+});
+```
+
+## Event Types
+
+### DialogEvent
+```typescript
+interface DialogEvent {
+    dialogId: string;
+    dialogTitle: string;
+    dialogType: 'alert' | 'custom' | 'modal';
+    timestamp: number;
+    buttons?: AlertButton[];
+}
+```
+
+### DialogButtonClickEvent
+```typescript
+interface DialogButtonClickEvent {
+    dialogId: string;
+    buttonText: string;
+    buttonIndex: number;
+    timestamp: number;
+}
+```
+
+## Native Interface Methods
+
+The following methods are added to the AcousticConnectRN interface:
+
+- `logDialogShowEvent(dialogId: string, dialogTitle: string, dialogType: string): boolean`
+- `logDialogDismissEvent(dialogId: string, dismissReason: string): boolean`
+- `logDialogButtonClickEvent(dialogId: string, buttonText: string, buttonIndex: number): boolean`
+- `logDialogCustomEvent(dialogId: string, eventName: string, values: Record<string, string \| number \| boolean>): boolean`
+
+## Best Practices
+
+1. **Store Dialog IDs**: When manually tracking custom dialogs, store the dialog ID in your component state to properly track dismiss events.
+
+2. **Use Consistent Naming**: Use descriptive dialog titles and button text for better analytics.
+
+3. **Handle Errors**: Wrap dialog tracking calls in try-catch blocks to prevent app crashes.
+
+4. **Clean Up**: Call the cleanup method when components unmount to prevent memory leaks.
+
+## Example Implementation
+
+See `src/examples/DialogTrackingExample.tsx` for a complete example showing all features.
+
+## Troubleshooting
+
+### Dialog events not being tracked
+1. Ensure `captureDialogEvents={true}` is set on the Connect component
+2. Check that the DialogListener is properly initialized
+3. Verify that the native AcousticConnectRN interface is available
+
+### Custom dialog tracking not working
+1. Make sure you're calling `trackDialogShow` before showing the dialog
+2. Store the dialog ID and use it consistently for dismiss events
+3. Use `createTrackedButton` for automatic button click tracking
+
+### Performance considerations
+- Dialog tracking is lightweight and shouldn't impact app performance
+- The system uses efficient event delegation and cleanup
+- Dialog IDs are generated using a simple algorithm to avoid external dependencies 

package/src/docs/NativeImplementation.md

@@ -0,0 +1,176 @@
+# Native Implementation for Dialog Event Tracking
+
+This document summarizes the native implementation of the dialog event tracking functionality for both Android and iOS platforms.
+
+## Overview
+
+The dialog event tracking system has been implemented across all three layers:
+1. **TypeScript Interface** (`src/specs/react-native-acoustic-connect.nitro.ts`)
+2. **Android Implementation** (`android/src/main/java/com/acousticconnectrn/HybridAcousticConnectRN.kt`)
+3. **iOS Implementation** (`ios/HybridAcousticConnectRN.swift`)
+
+## Interface Methods Added
+
+Four new methods were added to the `AcousticConnectRN` interface:
+
+### 1. `logDialogShowEvent`
+- **Purpose**: Logs when a dialog is shown
+- **Parameters**: 
+  - `dialogId`: Unique identifier for the dialog
+  - `dialogTitle`: The title of the dialog
+  - `dialogType`: The type of dialog (alert, custom, modal)
+- **Returns**: `Boolean` indicating success/failure
+
+### 2. `logDialogDismissEvent`
+- **Purpose**: Logs when a dialog is dismissed
+- **Parameters**:
+  - `dialogId`: Unique identifier for the dialog
+  - `dismissReason`: The reason for dismissing the dialog
+- **Returns**: `Boolean` indicating success/failure
+
+### 3. `logDialogButtonClickEvent`
+- **Purpose**: Logs when a button in a dialog is clicked
+- **Parameters**:
+  - `dialogId`: Unique identifier for the dialog
+  - `buttonText`: The text of the clicked button
+  - `buttonIndex`: The index of the clicked button
+- **Returns**: `Boolean` indicating success/failure
+
+### 4. `logDialogCustomEvent`
+- **Purpose**: Logs custom dialog events with additional data
+- **Parameters**:
+  - `dialogId`: Unique identifier for the dialog
+  - `eventName`: The name of the custom event
+  - `values`: A map of values associated with the event
+- **Returns**: `Boolean` indicating success/failure
+
+## Android Implementation
+
+### File: `android/src/main/java/com/acousticconnectrn/HybridAcousticConnectRN.kt`
+
+All four methods have been implemented using the existing `Connect.logCustomEvent()` API:
+
+```kotlin
+override fun logDialogShowEvent(dialogId: String, dialogTitle: String, dialogType: String): Boolean {
+    var result = false
+    try {
+        val values = HashMap<String?, String?>()
+        values["dialogId"] = dialogId
+        values["dialogTitle"] = dialogTitle
+        values["dialogType"] = dialogType
+        values["eventType"] = "dialog_show"
+        values["timestamp"] = System.currentTimeMillis().toString()
+        
+        result = Connect.logCustomEvent("DialogShowEvent", values, EOMonitoringLevel.kEOMonitoringLevelInfo.value)
+    } catch (e: Exception) {
+        println("Error logging dialog show event: ${e.message}")
+        result = false
+    }
+    return result
+}
+```
+
+### Key Features:
+- **Error Handling**: All methods include try-catch blocks for robust error handling
+- **Consistent Logging**: Uses the same `Connect.logCustomEvent()` API as other events
+- **Timestamp**: Includes millisecond timestamps for event tracking
+- **Event Type**: Each event includes an `eventType` field for easy filtering
+- **Monitoring Level**: Uses `EOMonitoringLevel.kEOMonitoringLevelInfo.value` for consistent logging level
+
+## iOS Implementation
+
+### File: `ios/HybridAcousticConnectRN.swift`
+
+All four methods have been implemented using the existing `ConnectCustomEvent().logEvent()` API:
+
+```swift
+func logDialogShowEvent(dialogId: String, dialogTitle: String, dialogType: String) throws -> Bool {
+    let values: [String: Any] = [
+        "dialogId": dialogId,
+        "dialogTitle": dialogTitle,
+        "dialogType": dialogType,
+        "eventType": "dialog_show",
+        "timestamp": String(Int(Date().timeIntervalSince1970 * 1000))
+    ]
+    
+    let result = ConnectCustomEvent().logEvent("DialogShowEvent", values: values, level: kConnectMonitoringLevelType.connectMonitoringLevelInfo)
+    return result
+}
+```
+
+### Key Features:
+- **Error Handling**: Uses Swift's throwing mechanism for error handling
+- **Consistent Logging**: Uses the same `ConnectCustomEvent().logEvent()` API as other events
+- **Timestamp**: Includes millisecond timestamps for event tracking
+- **Event Type**: Each event includes an `eventType` field for easy filtering
+- **Monitoring Level**: Uses `kConnectMonitoringLevelType.connectMonitoringLevelInfo` for consistent logging level
+- **Type Safety**: Leverages Swift's strong typing for parameter validation
+
+## Generated Spec Files
+
+The Nitro framework automatically generated the interface specifications:
+
+### Android: `nitrogen/generated/android/kotlin/com/margelo/nitro/acousticconnectrn/HybridAcousticConnectRNSpec.kt`
+- Contains abstract method declarations for all four dialog event methods
+- Properly annotated with `@DoNotStrip` and `@Keep` for ProGuard compatibility
+
+### iOS: `nitrogen/generated/ios/swift/HybridAcousticConnectRNSpec.swift`
+- Contains protocol method declarations for all four dialog event methods
+- Includes proper Swift documentation comments
+
+## Data Structure
+
+All dialog events include consistent metadata:
+
+```json
+{
+  "dialogId": "unique_dialog_identifier",
+  "eventType": "dialog_show|dialog_dismiss|dialog_button_click|dialog_custom_event",
+  "timestamp": "1703123456789",
+  // Additional fields specific to each event type
+}
+```
+
+## Error Handling Strategy
+
+### Android:
+- Uses try-catch blocks to prevent app crashes
+- Logs error messages to console for debugging
+- Returns `false` on any exception
+
+### iOS:
+- Uses Swift's throwing mechanism
+- Errors are propagated up the call stack
+- Caller can handle errors appropriately
+
+## Performance Considerations
+
+- **Lightweight**: All methods are lightweight and don't perform heavy operations
+- **Async Safe**: Methods can be called from any thread
+- **Memory Efficient**: Uses simple data structures and minimal memory allocation
+- **Network Efficient**: Events are batched and sent according to existing Connect SDK policies
+
+## Testing
+
+The implementation can be tested using:
+
+1. **Unit Tests**: Test individual method calls
+2. **Integration Tests**: Test with actual dialog components
+3. **End-to-End Tests**: Verify events appear in Acoustic Connect dashboard
+
+## Future Enhancements
+
+Potential improvements for future versions:
+
+1. **Event Batching**: Batch multiple dialog events for better performance
+2. **Custom Event Types**: Allow developers to define custom dialog event types
+3. **Event Filtering**: Add configuration options to filter specific dialog events
+4. **Analytics Integration**: Direct integration with analytics platforms
+5. **Performance Metrics**: Track dialog performance metrics (show time, interaction time)
+
+## Compatibility
+
+- **Backward Compatible**: No breaking changes to existing functionality
+- **Platform Agnostic**: Consistent API across Android and iOS
+- **Framework Compatible**: Works with existing Connect SDK infrastructure
+- **Version Safe**: Compatible with current React Native versions 

package/src/examples/DialogTrackingExample.tsx

@@ -0,0 +1,163 @@
+/********************************************************************************************
+* Copyright (C) 2025 Acoustic, L.P. All rights reserved.
+*
+* NOTICE: This file contains material that is confidential and proprietary to
+* Acoustic, L.P. and/or other developers. No license is granted under any intellectual or
+* industrial property rights of Acoustic, L.P. except as may be provided in an agreement with
+* Acoustic, L.P. Any unauthorized copying or distribution of content from this file is
+* prohibited.
+********************************************************************************************/
+
+import React, { useState } from 'react';
+import { View, Text, Button, Alert, StyleSheet } from 'react-native';
+import { useDialogTracking } from '../utils/useDialogTracking';
+
+/**
+ * Example component demonstrating dialog event tracking
+ * Shows how to use both automatic Alert.alert interception and manual custom dialog tracking
+ */
+const DialogTrackingExample: React.FC = () => {
+    const [customDialogVisible, setCustomDialogVisible] = useState(false);
+    const { 
+        generateDialogId, 
+        trackDialogShow, 
+        trackDialogDismiss, 
+        createTrackedButton 
+    } = useDialogTracking();
+
+    // Example 1: Automatic Alert.alert tracking (no additional code needed)
+    const showAlertDialog = () => {
+        Alert.alert(
+            'Confirmation',
+            'Are you sure you want to proceed?',
+            [
+                { text: 'Cancel', style: 'cancel' },
+                { text: 'OK', onPress: () => console.log('OK pressed') }
+            ]
+        );
+    };
+
+    // Example 2: Manual custom dialog tracking
+    const showCustomDialog = () => {
+        const dialogId = generateDialogId();
+        const title = 'Custom Dialog';
+        const buttons = [
+            { text: 'Cancel', style: 'cancel' as const },
+            { text: 'Confirm', onPress: () => console.log('Confirm pressed') }
+        ];
+
+        // Track dialog show event
+        trackDialogShow(dialogId, title, buttons);
+        setCustomDialogVisible(true);
+    };
+
+    const hideCustomDialog = () => {
+        const dialogId = generateDialogId(); // In real app, you'd store this
+        trackDialogDismiss(dialogId, 'user_dismiss');
+        setCustomDialogVisible(false);
+    };
+
+    // Example 3: Custom dialog with tracked buttons
+    const showTrackedCustomDialog = () => {
+        const dialogId = generateDialogId();
+        const title = 'Tracked Custom Dialog';
+        const originalButtons = [
+            { text: 'No', style: 'cancel' as const },
+            { text: 'Yes', onPress: () => console.log('Yes pressed') }
+        ];
+
+        // Create tracked buttons
+        const trackedButtons = originalButtons.map((button, index) => 
+            createTrackedButton(dialogId, button, index)
+        );
+
+        trackDialogShow(dialogId, title, trackedButtons);
+        setCustomDialogVisible(true);
+    };
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>Dialog Tracking Examples</Text>
+            
+            <View style={styles.buttonContainer}>
+                <Button 
+                    title="Show Alert Dialog (Auto-tracked)" 
+                    onPress={showAlertDialog} 
+                />
+            </View>
+
+            <View style={styles.buttonContainer}>
+                <Button 
+                    title="Show Custom Dialog (Manual tracking)" 
+                    onPress={showCustomDialog} 
+                />
+            </View>
+
+            <View style={styles.buttonContainer}>
+                <Button 
+                    title="Show Tracked Custom Dialog" 
+                    onPress={showTrackedCustomDialog} 
+                />
+            </View>
+
+            {customDialogVisible && (
+                <View style={styles.customDialog}>
+                    <Text style={styles.dialogTitle}>Custom Dialog</Text>
+                    <Text style={styles.dialogMessage}>
+                        This is a custom dialog with manual tracking
+                    </Text>
+                    <View style={styles.dialogButtons}>
+                        <Button title="Cancel" onPress={hideCustomDialog} />
+                        <Button title="OK" onPress={hideCustomDialog} />
+                    </View>
+                </View>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 20,
+        justifyContent: 'center',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        textAlign: 'center',
+        marginBottom: 30,
+    },
+    buttonContainer: {
+        marginVertical: 10,
+    },
+    customDialog: {
+        position: 'absolute',
+        top: '50%',
+        left: 20,
+        right: 20,
+        backgroundColor: 'white',
+        borderRadius: 10,
+        padding: 20,
+        elevation: 5,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+    },
+    dialogTitle: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        marginBottom: 10,
+    },
+    dialogMessage: {
+        fontSize: 16,
+        marginBottom: 20,
+    },
+    dialogButtons: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+    },
+});
+
+export default DialogTrackingExample;