🛡️ Captain Compliance Mobile App

A comprehensive React Native library for implementing privacy consent management and GDPR compliance in mobile applications. This library provides a complete solution with customizable consent banners, persistent storage, and seamless integration with the Captain Compliance platform.

✨ Features

• 🎯 Complete Consent Management - Full GDPR/CCPA compliance solution
• 🎨 Fully Customizable UI - Themeable components with extensive styling options
• 💾 Persistent Storage - Automatic consent persistence with expiration handling
• 🌐 API Integration - Seamless integration with Captain Compliance backend
• 📱 Mobile-First Design - Optimized specifically for React Native
• 🔒 TypeScript Support - Fully typed with comprehensive interfaces
• ⚡ Performance Optimized - Minimal bundle size and efficient rendering
• 🧪 Testing Ready - Built with accessibility and testing in mind

📦 Installation

npm install cc-mobile-app

Peer Dependencies

This library requires the following peer dependencies:

npm install react react-native react-native-svg @react-native-async-storage/async-storage

🚀 Quick Start

1. Wrap your app with CaptainComplianceConsent

import React from 'react';
import { CaptainComplianceConsent } from 'cc-mobile-app';
import { YourApp } from './YourApp';

export default function App() {
  return (
    <CaptainComplianceConsent 
      token="your-captain-compliance-token"
      debug={__DEV__}
      onError={(error) => console.error('Consent Error:', error)}
    >
      <YourApp />
    </CaptainComplianceConsent>
  );
}

2. Use the consent hook in your components

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useCaptainComplianceConsent } from 'cc-mobile-app';

export function YourComponent() {
  const { 
    hasConsent, 
    isInitialized, 
    acceptConsent, 
    rejectConsent,
    resetConsent 
  } = useCaptainComplianceConsent();

  if (!isInitialized) {
    return <Text>Loading consent settings...</Text>;
  }

  return (
    <View>
      <Text>Consent Status: {hasConsent ? 'Granted' : 'Not Granted'}</Text>
      <Button title="Accept" onPress={acceptConsent} />
      <Button title="Reject" onPress={rejectConsent} />
      <Button title="Reset" onPress={resetConsent} />
    </View>
  );
}

📚 API Reference

CaptainComplianceConsent

The main provider component that manages consent state and displays consent UI.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | token | string | ✅ | - | Your Captain Compliance API token | | children | ReactNode | ✅ | - | Child components to render | | style | StyleConfig | ❌ | {} | Custom styles for consent components | | onError | (error: Error) => void | ❌ | - | Error handler callback | | debug | boolean | ❌ | false | Enable debug logging | | manualConsent | boolean | ❌ | false | Disable banner by default |

Example

<CaptainComplianceConsent
  token="your-token-here"
  debug={true}
  style={{
    modalContainer: {
      backgroundColor: 'white',
      borderRadius: 12,
      margin: 20,
    },
    acceptButton: {
      backgroundColor: '#007AFF',
      borderRadius: 8,
    }
  }}
  onError={(error) => {
    console.error('Consent management error:', error);
    // Report to your error tracking service
  }}
>
  <YourApp />
</CaptainComplianceConsent>

useCaptainComplianceConsent Hook

Access consent state and actions throughout your app.

Returns

| Property | Type | Description | |----------|------|-------------| | isInitialized | boolean | Whether the consent system has been initialized | | shouldShowBanner | boolean | Whether the consent banner should be displayed | | hasConsent | boolean | Current consent status | | status | ConsentStatus | Detailed consent status (ACCEPTED, REJECTED, PENDING) | | acceptConsent | () => Promise<void> | Function to accept consent | | rejectConsent | () => Promise<void> | Function to reject consent | | resetConsent | () => Promise<void> | Function to reset consent state | | isReady | boolean | Whether the system is ready for use | | hasErrors | boolean | Whether there are any errors | | lastUpdated | Date? | When consent was last updated | | expiresAt | Date? | When current consent expires |

Example Usage

import { useCaptainComplianceConsent, ConsentStatus } from 'cc-mobile-app';

function ConsentSettings() {
  const { 
    hasConsent, 
    status, 
    lastUpdated, 
    expiresAt,
    acceptConsent,
    rejectConsent,
    resetConsent 
  } = useCaptainComplianceConsent();

  return (
    <View>
      <Text>Status: {status}</Text>
      <Text>Has Consent: {hasConsent ? 'Yes' : 'No'}</Text>
      {lastUpdated && (
        <Text>Last Updated: {lastUpdated.toLocaleDateString()}</Text>
      )}
      {expiresAt && (
        <Text>Expires: {expiresAt.toLocaleDateString()}</Text>
      )}
      
      <Button title="Accept" onPress={acceptConsent} />
      <Button title="Reject" onPress={rejectConsent} />
      <Button title="Reset" onPress={resetConsent} />
    </View>
  );
}

🎨 Customization

Styling

The library provides extensive styling options through the StyleConfig interface:

interface StyleConfig {
  // Modal styles
  modalOverlay?: ViewStyle;
  modalContainer?: ViewStyle;
  closeButton?: ViewStyle;
  
  // Content styles
  content?: ViewStyle;
  logoContainer?: ViewStyle;
  logo?: ImageStyle;
  
  // Text styles
  title?: TextStyle;
  description?: TextStyle;
  
  // Button styles
  buttonContainer?: ViewStyle;
  acceptButton?: ViewStyle;
  rejectButton?: ViewStyle;
  acceptButtonText?: TextStyle;
  rejectButtonText?: TextStyle;
  
  // Floating button
  floatingButton?: ViewStyle;
}

Custom Themes

const customStyle = {
  modalContainer: {
    backgroundColor: '#1a1a1a',
    borderRadius: 16,
    margin: 20,
  },
  title: {
    color: '#ffffff',
    fontSize: 20,
    fontWeight: 'bold',
  },
  description: {
    color: '#cccccc',
    fontSize: 16,
    lineHeight: 24,
  },
  acceptButton: {
    backgroundColor: '#00ff88',
    borderRadius: 12,
    paddingVertical: 14,
  },
  rejectButton: {
    backgroundColor: 'transparent',
    borderWidth: 2,
    borderColor: '#666666',
    borderRadius: 12,
    paddingVertical: 14,
  },
  acceptButtonText: {
    color: '#000000',
    fontWeight: 'bold',
  },
  rejectButtonText: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
};

<CaptainComplianceConsent
  token="your-token"
  style={customStyle}
>
  <YourApp />
</CaptainComplianceConsent>

🔧 Configuration

Environment Setup

The library automatically determines the API environment based on your configuration. For production, make sure to:

1. Use your production Captain Compliance token
2. Set debug={false}
3. Implement proper error handling

const isProduction = process.env.NODE_ENV === 'production';

<CaptainComplianceConsent
  token={isProduction ? PRODUCTION_TOKEN : DEVELOPMENT_TOKEN}
  debug={!isProduction}
  onError={(error) => {
    if (isProduction) {
      // Send to error tracking service
      errorTracker.captureException(error);
    } else {
      console.error('Consent Error:', error);
    }
  }}
>
  <YourApp />
</CaptainComplianceConsent>

Storage Configuration

The library uses AsyncStorage for persistence. Consent data is automatically:

• Stored with token-specific keys
• Encrypted and secure
• Automatically expired based on configuration
• Cleared when consent is reset

📱 Components

ConsentBanner

The main consent modal that appears when consent is required.

Features:

• ✅ Automatic display logic
• ✅ Customizable text and styling
• ✅ Logo support
• ✅ Theme integration
• ✅ Accessibility support
• ✅ Close button functionality

FloatingConsentButton

A floating button that appears when the banner is dismissed but consent is still needed.

Features:

• ✅ Configurable positioning
• ✅ Theme matching
• ✅ Smooth animations
• ✅ Accessibility labels

🔒 TypeScript Support

This library is built with TypeScript and provides comprehensive type definitions:

import type { 
  ConsentContextValue,
  ConsentStatus,
  StyleConfig,
  TextConfig,
  BannerMobileTokenResponse 
} from 'cc-mobile-app';

// All types are exported and ready to use
const handleConsent = (status: ConsentStatus) => {
  // Fully typed parameters and return values
};

🧪 Testing

The library is built with testing in mind and includes proper testID props and accessibility labels.

Jest Setup

import { render } from '@testing-library/react-native';
import { CaptainComplianceConsent } from 'cc-mobile-app';

// Mock AsyncStorage for testing
jest.mock('@react-native-async-storage/async-storage', () =>
  require('@react-native-async-storage/async-storage/jest/async-storage-mock')
);

// Test your components
test('renders consent provider', () => {
  const { getByTestId } = render(
    <CaptainComplianceConsent token="test-token">
      <YourTestComponent />
    </CaptainComplianceConsent>
  );
  
  // Test your implementation
});

Test IDs

The library provides consistent test IDs:

• consent-banner - Main consent modal
• consent-banner-logo - Company logo
• consent-banner-accept-button - Accept button
• consent-banner-reject-button - Reject button

🐛 Troubleshooting

Common Issues

1. Consent banner not showing

• Verify your token is valid
• Check network connectivity
• Enable debug mode to see detailed logs
• Ensure AsyncStorage is properly installed

2. Styling not applying

• Check that styles follow React Native ViewStyle/TextStyle interfaces
• Verify style props are passed correctly
• Use debug mode to inspect component structure

3. AsyncStorage errors

• Install @react-native-async-storage/async-storage
• For iOS, run cd ios && pod install
• For Android, rebuild the project

4. TypeScript errors

• Ensure you're using TypeScript 4.5+
• Install @types/react and @types/react-native
• Check that all peer dependencies are installed

Debug Mode

Enable debug mode for detailed logging:

<CaptainComplianceConsent
  token="your-token"
  debug={true}
  onError={(error) => console.error('Debug:', error)}
>
  <YourApp />
</CaptainComplianceConsent>

Support

For additional support:

1. Check the GitHub Issues
2. Review the troubleshooting guide above
3. Contact Captain Compliance support

🤝 Contributing

We welcome contributions! Please see our contributing guidelines:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

Development Setup

# Clone the repository
git clone https://github.com/Captain-Compliance/cc-mobile-app.git
cd cc-mobile-app

# Install dependencies
npm install

# Run type checking
npm run lint

# Build the library
npm run build

# Run tests
npm test

Code Standards

• Use TypeScript for all new code
• Follow the existing code style
• Add tests for new features
• Update documentation as needed
• Use conventional commit messages

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🏢 About Captain Compliance

Captain Compliance provides comprehensive privacy and compliance solutions for modern applications. Our tools help developers build compliant, user-friendly experiences while meeting regulatory requirements like GDPR, CCPA, and more.

Website: https://captaincompliance.com Documentation: https://docs.captaincompliance.com Support: [email protected]

Made with ❤️ by the Captain Compliance team