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) | ! |
ProfileSelector
User profile configuration with theme toggle.
Usage
<ProfileSelector
profile={userProfile}
onProfileChange={setUserProfile}
/>
Props
| Prop | Type | Description |
|---|---|---|
profile | UserProfile | Current profile state |
onProfileChange | (profile: UserProfile) => void | Profile update handler |
Settings
- Dark/Light mode toggle
- Known allergies (multi-select):
- Fragrance, Sulfates, Parabens
- Formaldehyde, Peanut, Tree Nut
- Milk/Dairy, Soy, Wheat/Gluten
- Egg, Shellfish
- Skin type (single select):
- Normal, Dry, Oily, Combination, Sensitive
- Explanation style:
- Simple (beginner)
- Technical (expert)
UI Layout
┌─────────────────────────────────────┐
│ Your Profile ✕ │
├─────────────────────────────────────┤
│ Appearance │
│ ☀️ Light 🌙 Dark [●━━━○] │
├─────────────────────────────────────┤
│ Known Allergies │
│ [Fragrance ✓] [Sulfates] [Parabens] │
│ [Peanut] [Tree Nut ✓] [Milk/Dairy] │
├─────────────────────────────────────┤
│ Skin Type │
│ ○ Normal ○ Dry ● Sensitive │
│ ○ Oily ○ Combination │
├─────────────────────────────────────┤
│ Explanation Style │
│ ● Simple (beginner) │
│ ○ Technical (expert) │
└─────────────────────────────────────┘
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[];
}