Feature: Measurements
Relevant source files
The following files were used as context for generating this wiki page:The Measurements feature provides a dedicated interface for users to input, manage, and visualize their body measurements. This data is crucial for personalizing designs and is integrated with other parts of the application, such as the 3D Atelier and automated Size Recommendation.
The system allows for saving multiple measurement profiles, toggling between metric and imperial units, and offers a visual guide to ensure accuracy. The feature is accessible from the main Home Screen and is a key step in the user onboarding process.
Sources: src/screens/MeasurementsScreen.js, src/features/home/screens/HomeScreen.js:304-310, src/config/constants.js:192
Architecture and Core Components
The feature is encapsulated within the MeasurementsScreen.js file and is composed of several functional React components that manage state and UI rendering.
Sources: src/screens/MeasurementsScreen.js
Component Breakdown
The following diagram illustrates the main components within the MeasurementsScreen and their relationships.
Sources: src/screens/MeasurementsScreen.js
| Component | Description | Source File |
|---|---|---|
MeasurementsScreen | The main screen component. It manages the state for all measurements, user profiles, and modals. It orchestrates the data flow between child components. | src/screens/MeasurementsScreen.js:241 |
MeasurementInput | A reusable input field for a single measurement. It includes a label, value, unit, and an icon. It features a focus animation to improve user experience. | src/screens/MeasurementsScreen.js:18-70 |
BodyVisualization | An SVG-based component that renders a stylized human figure. It dynamically displays measurement lines for chest, waist, and hips based on the user's input. | src/screens/MeasurementsScreen.js:73-204 |
SizeRecommendation | Calculates and displays a recommended clothing size (e.g., XS, S, M) based on the user's chest measurement. The background color changes to match the suggested size. | src/screens/MeasurementsScreen.js:207-238 |
| Profile Modal | A modal window that allows the user to input and edit their profile information, including name, gender, age, and body type. | src/screens/MeasurementsScreen.js:501-578 |
| Guide Modal | A modal that provides visual and textual instructions on how to correctly take key body measurements like chest, waist, and hips. | src/screens/MeasurementsScreen.js:581-638 |
State Management and Data Flow
The MeasurementsScreen uses local component state managed by React's useState hook to handle all user data.
Sources: src/screens/MeasurementsScreen.js:294-310
State Properties
| State Variable | Type | Description | Source |
|---|---|---|---|
measurements | Object | Stores the values for all 12 measurement types (e.g., height, chest). | src/screens/MeasurementsScreen.js:295-308 |
profile | Object | Stores user profile data like name, gender, age, and bodyType. | src/screens/MeasurementsScreen.js:310-316 |
unit | String | Holds the current measurement unit system, either 'cm' or 'in'. | src/screens/MeasurementsScreen.js:318 |
showProfileModal | Boolean | Toggles the visibility of the profile settings modal. | src/screens/MeasurementsScreen.js:319 |
showGuideModal | Boolean | Toggles the visibility of the measurement guide modal. | src/screens/MeasurementsScreen.js:320 |
savedProfiles | Array | An array to store saved measurement profiles. | src/screens/MeasurementsScreen.js:321 |
Data Flow Diagram
The following diagram shows how user input flows through the component's state to update the UI.
This diagram shows the flow when a user updates a measurement value.
Sources: src/screens/MeasurementsScreen.js:332-334
Key Functionality
Measurement Input and Management
The screen categorizes measurements into "Basic" and "Detailed" sections for a structured user experience.
Sources: src/screens/MeasurementsScreen.js:323-330, 444-463, 466-485
| Category | Measurements |
|---|---|
| Basic | Height, Weight, Chest, Waist, Hips, Shoulders |
| Detailed | Arm Length, Inseam, Neck, Wrist, Thigh, Calf |
Users can toggle between Metric (cm) and Imperial (in) units, although the input components are hardcoded to display cm or kg. The unit state is controlled by two TouchableOpacity components.
Sources: src/screens/MeasurementsScreen.js:420-441
Profile Management
Users can save their measurements as part of a profile. The saveMeasurements function creates a new profile object containing the current profile and measurements state, adds a timestamp, and appends it to the savedProfiles array. The loadProfile function allows a user to populate the screen's state from a previously saved profile.
Sources: src/screens/MeasurementsScreen.js:336-355
The sequence for saving a profile is as follows:
This diagram illustrates the process of saving a new measurement profile.
Sources: src/screens/MeasurementsScreen.js:336-345
Data Persistence
The application defines a specific storage key for measurements, indicating an intent to persist this data locally on the device using a mechanism like AsyncStorage.
- Storage Key:
STORAGE_KEYS.MEASUREMENTSis defined as'@measurements'.
While MeasurementsScreen.js currently manages saved profiles in a local state array (savedProfiles), the existence of this constant suggests that the intended final implementation involves saving this array to persistent storage.
Sources: src/core/utils/constants.js:200, src/config/constants.js:103, SECURITY_AND_CLEANUP_FIXES.md
Body Visualization
The BodyVisualization component provides immediate visual feedback using react-native-svg.
- It renders a static body outline.
- It overlays dynamic measurement lines and text for
chest,waist, andhipsif those values are present in the state. - It includes view controls for "Front", "Side", and an animated "3D" rotation effect achieved with
Animated.loopon therotateYtransform property.
Sources: src/screens/MeasurementsScreen.js:73-204
Size Recommendation
The SizeRecommendation component provides an estimated clothing size based on the chest measurement.
The logic is implemented in the calculateSize function:
| Chest Measurement (cm) | Recommended Size |
|---|---|
< 86 | XS |
< 91 | S |
< 96 | M |
< 101 | L |
< 106 | XL |
>= 106 | XXL |
Sources: src/screens/MeasurementsScreen.js:208-217
Integration with Other Features
Home Screen Entry Point
The HomeScreen provides a direct navigation path to the Measurements feature via a FeatureCard. This highlights its role as a primary feature of the application.
// src/features/home/screens/HomeScreen.js:304-310
{
icon: <MaterialCommunityIcons name="ruler" size={32} color="#A8E6CF" />,
title: 'Measurements',
description: 'Precise measurement tools',
color: '#A8E6CF',
screen: 'Measurements',
},
Sources: src/features/home/screens/HomeScreen.js:304-310
3D Atelier Integration
The Measurements feature is listed as an "Advanced Tool" for the 3D Atelier. The "Measure" tool in the 3D design interface likely consumes the data saved from this screen to adjust garment models to the user's body shape.
Sources: README.md:91, TASK_3_SUMMARY.md:38
User Onboarding
The feature is part of the initial user experience, as defined in the TUTORIAL_STEPS constant. This emphasizes the importance of collecting measurement data early in the user's journey.
// src/config/constants.js:192
{ id: 4, screen: 'Measurements', title: 'Add Your Measurements', completed: false },
Sources: src/config/constants.js:192