Feature: Export/Import functionality for saved tips and settings

[DevinByteX]

Summary

Implement export/import functionality allowing users to backup and restore saved tips and app settings via a header button that opens a modal with options to import from file or export current data.

Motivation

Users should be able to:

• Backup their saved tips and settings
• Transfer data between devices
• Restore data if they reinstall the app

Proposed Solution

Format Recommendation

Use JSON instead of CSV because:

• Preserves nested data structures (like perPerson in tips)
• Easily handles both tips and settings in one file
• Maintains data types correctly
• Simpler parsing and validation
• Optional: Offer CSV export for tips-only (spreadsheet compatibility)

Export Data Structure

interface ExportData {
  version: string;  // App version for compatibility
  exportDate: string;
  data: {
    savedTips?: SavedTip[];
    settings?: {
      tips: TipOptionState[];
      splits: SplitOptionState[];
      currencyConfig: CurrencyType;
      duplicatePreventionWindow: number;
    };
  };
}

Implementation Steps

1. Install required package

Add react-native-document-picker to package.json for file selection during import.

2. Create export/import hook

Add new useExportImport.ts in app/hooks/ handling:

• JSON file generation
• File sharing via existing react-native-share
• Document picking
• Validation
• State restoration using existing LOAD_PERSISTED_STATE action

3. Create StyledExportImportModal component

Build new modal in app/components/StyledExportImportModal/ with:

• Two tabs/modes (one for SavedTipsScreen, one for SettingsScreen)
• "Export Data" and "Import Data" buttons
• Use existing StyledSharePreviewModal as design reference

4. Update SavedTipsScreen header

Modify SavedTipsScreen.tsx to:

• Enable headerRightIconVisibilty
• Add export/import icon
• Connect onHeaderRightIconPress to open the modal for tips export/import

5. Update SettingsScreen header

Modify SettingsScreen.tsx similarly, opening the modal for settings export/import.

6. Export components/hooks

Update app/components/index.ts and app/hooks/index.ts to expose new modules.

Files to Create/Modify

File	Action
app/components/StyledExportImportModal/	Create - New modal component
app/components/index.ts	Modify - Export new component
app/hooks/useExportImport.ts	Create - Export/import logic
app/hooks/index.ts	Modify - Export new hook
app/screens/TipScreens/SavedTipsScreen.tsx	Modify - Add header right icon
app/screens/TipScreens/SettingsScreen.tsx	Modify - Add header right icon
package.json	Modify - Add react-native-document-picker

Design Considerations

Import Behavior

• Recommendation: Replace with confirmation prompt
• Ask user before overwriting existing data

Export Scope Per Screen

• Context-aware exports (tips from SavedTipsScreen, settings from SettingsScreen)
• Plus "Export All" option from both screens

Validation

• Validate imported JSON structure before applying
• Handle duplicate tip IDs on import
• Include version in export for future compatibility
• Show toast messages for success/failure states

Platform Testing

• Test file picker on both iOS and Android

Related Context

Existing hooks that can be referenced:

• useShareTipDetailsPDF.ts - PDF generation pattern
• useShareTipDetailsText.ts - Text sharing pattern
• useShareTipPreview.ts - Modal state management

Existing components to reference:

• StyledSharePreviewModal - Modal design template
• StyledAlert - Confirmation dialog pattern
• StyledHeader - Already supports right icon with headerRightIconVisibilty and onHeaderRightIconPress

Acceptance Criteria

• User can tap export/import button in SavedTipsScreen header
• User can tap export/import button in SettingsScreen header
• Modal opens with Export and Import options
• Export generates valid JSON file and opens share sheet
• Import allows selecting JSON file from device
• Import validates data structure before applying
• Confirmation prompt shown before replacing data
• Success/error toast messages displayed
• Works on both iOS and Android