Components

The mobile app uses a set of reusable React Native components for a consistent user experience.

Component Hierarchy

ImageCapture

Camera interface for capturing ingredient labels.

Usage

<ImageCapture
  onCapture={(base64Image) => handleCapture(base64Image)}
  onCancel={() => setShowCamera(false)}
/>

Props

Prop	Type	Description
onCapture	(base64: string) => void	Called with captured image
onCancel	() => void	Called when user cancels

Features

• Real-time camera viewfinder
• Tap-to-capture
• Gallery image selection
• Automatic orientation handling
• Base64 image encoding

Implementation Notes

// Camera capture
const takePicture = async () => {
  if (cameraRef.current) {
    const photo = await cameraRef.current.takePictureAsync({
      base64: true,
      quality: 0.8,
    });
    onCapture(photo.base64);
  }
};

// Gallery selection
const pickImage = async () => {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    base64: true,
    quality: 0.8,
  });

  if (!result.canceled && result.assets[0].base64) {
    onCapture(result.assets[0].base64);
  }
};

---

IngredientCard

Expandable card showing ingredient safety details.

Usage

<IngredientCard ingredient={ingredientDetail} />

Props

Prop	Type	Description
ingredient	IngredientDetail	Ingredient data object

Displays

Collapsed View:

• Ingredient name with safety score
• Color-coded safety bar
• Purpose tag
• Expand/collapse arrow

Expanded View:

• Full purpose description
• Origin (Natural/Synthetic)
• Concerns (if any)
• Recommendation badge (SAFE/CAUTION/AVOID)
• Category and Allergy Risk
• Safer alternatives

Visual Design

┌─────────────────────────────────────┐
│ ⚠️ Fragrance               4/10 ◐  │
│ ██████░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
│ Scent, masking agent           ▼   │
├─────────────────────────────────────┤
│ PURPOSE                             │
│ Provides scent, masks other odors   │
│                                     │
│ ORIGIN                              │
│ Synthetic                           │
│                                     │
│ CONCERNS                            │
│ Common allergen, may cause...       │
│                                     │
│ RECOMMENDATION                      │
│ [CAUTION]                           │
│                                     │
│ Category: Cosmetics  Allergy: High  │
│                                     │
│ SAFER ALTERNATIVES                  │
│ [fragrance-free] [essential oils]   │
└─────────────────────────────────────┘

Score Visualization

Score	Color	Emoji
8-10	Green (#22c55e)	✓
6-7	Light Green (#84cc16)	●
4-5	Amber (#f59e0b)	◐
1-3	Red (#ef4444)	!

---

ProfileAvatar

Displays user's Google profile picture or a colored initial fallback.

Usage

import { ProfileAvatar } from '../components/ProfileAvatar';

// In header
<ProfileAvatar
  user={user}
  size={48}
  onPress={() => setCurrentScreen('profile')}
/>

Props

Prop	Type	Default	Description
user	User | null	-	Firebase user object
size	number	40	Avatar diameter in pixels
onPress	() => void	-	Optional tap handler
style	ViewStyle	-	Additional container styles

Behavior

• Authenticated with photo: Displays Google profile picture
• Authenticated without photo: Shows first initial with colored background
• Guest mode: Shows "G" with colored background

Color Generation

The background color is generated from a hash of the user's UID or email, ensuring consistent colors across sessions:

const getColorFromString = (str: string): string => {
  const colors = [
    '#ef4444', '#f97316', '#f59e0b', '#84cc16',
    '#22c55e', '#14b8a6', '#06b6d4', '#3b82f6',
    '#8b5cf6', '#a855f7', '#ec4899',
  ];
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  return colors[Math.abs(hash) % colors.length];
};

---

ProfileSelector

User profile configuration with authentication, preferences, and account management.

Usage

<ProfileSelector
  profile={userProfile}
  onProfileChange={setUserProfile}
/>

Props

Prop	Type	Description
profile	UserProfile	Current profile state
onProfileChange	(profile: UserProfile) => void	Profile update handler

Features

• User Profile Display: Shows ProfileAvatar, name, and email for authenticated users
• Dark/Light mode toggle: Theme switching with persistence
• Known allergies (multi-select): Fragrance, Sulfates, Parabens, etc.
• Skin type (single select): Normal, Dry, Oily, Combination, Sensitive
• Explanation style: Simple (beginner) or Technical (expert)
• Privacy Policy: In-app modal viewer
• Account Management: Sign out and delete account options

Danger Zone

Account deletion is protected by a collapsible "Danger Zone" section to prevent accidental clicks:

const [showDangerZone, setShowDangerZone] = useState(false);

const toggleDangerZone = () => {
  LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
  setShowDangerZone(!showDangerZone);
};

UI Layout

┌─────────────────────────────────────┐
│ Your Profile                    ✕   │
├─────────────────────────────────────┤
│ [Avatar] John Doe                   │
│          john@example.com           │
│                        [Sign Out]   │
├─────────────────────────────────────┤
│ Appearance                          │
│ ☀️ Light          🌙 Dark  [●━━━○]  │
├─────────────────────────────────────┤
│ Known Allergies                     │
│ [Fragrance ✓] [Sulfates] [Parabens] │
├─────────────────────────────────────┤
│ Skin Type                           │
│ ○ Normal  ○ Dry  ● Sensitive        │
├─────────────────────────────────────┤
│ Explanation Style                   │
│ ● Simple (beginner)                 │
├─────────────────────────────────────┤
│ [Privacy Policy]                    │
├─────────────────────────────────────┤
│ ▼ Danger Zone                       │
│ ┌─────────────────────────────────┐ │
│ │ [Delete Account]                │ │
│ │ This will delete all your data  │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘

---

ResultsHeader

Analysis summary with overall risk assessment.

Usage

<ResultsHeader
  productName="CeraVe Moisturizer"
  overallRisk="low"
  averageSafetyScore={8.2}
  ingredientCount={12}
  allergenWarnings={[]}
/>

Props

Prop	Type	Description
productName	string	Analyzed product name
overallRisk	RiskLevel	Overall risk assessment
averageSafetyScore	number	Average score (1-10)
ingredientCount	number	Total ingredients
allergenWarnings	string[]	Allergen warning messages

Visual Design

┌─────────────────────────────────────┐
│ CeraVe Moisturizer                  │
│                                     │
│ Overall Risk: LOW                   │
│ ████████████████░░░░  8.2/10        │
│                                     │
│ 12 Ingredients Analyzed             │
│                                     │
│ ⚠️ 1 Allergen Warning               │
│ Fragrance matches your sensitivity  │
└─────────────────────────────────────┘

---

SafetyBar

Horizontal safety score visualization.

Usage

<SafetyBar score={8} maxScore={10} />

Props

Prop	Type	Default	Description
score	number	-	Current score
maxScore	number	10	Maximum score
height	number	6	Bar height in pixels

Color Mapping

const getScoreColor = (score: number): string => {
  if (score >= 8) return '#22c55e'; // Green
  if (score >= 6) return '#84cc16'; // Light green
  if (score >= 4) return '#f59e0b'; // Amber
  if (score >= 2) return '#f97316'; // Orange
  return '#ef4444'; // Red
};

---

RiskBadge

Risk level indicator badge.

Usage

<RiskBadge level="low" />
<RiskBadge level="medium" />
<RiskBadge level="high" />

Props

Prop	Type	Description
level	RiskLevel	Risk level to display

Styling

Level	Background	Text
Low	#dcfce7	#166534
Medium	#fef9c3	#854d0e
High	#fee2e2	#991b1b

---

Type Definitions

// types/index.ts

export interface UserProfile {
  allergies: string[];
  skinType: SkinType;
  expertise: ExpertiseLevel;
}

export type SkinType = 'normal' | 'dry' | 'oily' | 'combination' | 'sensitive';
export type ExpertiseLevel = 'beginner' | 'expert';
export type ThemeMode = 'light' | 'dark';
export type RiskLevel = 'low' | 'medium' | 'high';

export interface IngredientDetail {
  name: string;
  purpose: string;
  safety_score: number;
  risk_level: RiskLevel;
  concerns: string;
  recommendation: string;
  origin: string;
  category: string;
  allergy_risk: string;
  is_allergen_match: boolean;
  alternatives: string[];
}

PrivacyPolicyModal

In-app modal displaying the privacy policy without leaving the app.

Usage

const [showPrivacy, setShowPrivacy] = useState(false);

<TouchableOpacity onPress={() => setShowPrivacy(true)}>
  <Text>Privacy Policy</Text>
</TouchableOpacity>

<PrivacyPolicyModal
  visible={showPrivacy}
  onClose={() => setShowPrivacy(false)}
/>

Props

Prop	Type	Description
visible	boolean	Controls modal visibility
onClose	() => void	Called when user closes modal

Features

• Full privacy policy content displayed in-app
• Works offline (no external URL required)
• ScrollView for long content
• Theme-aware styling

---

Related Documentation

• Authentication
• Theme System
• Setup Guide
• OCR & Translation