Goals and tracking of simpler measurements like weight or waist circumference.
| - Weight
| - Waist Circumference [coming soon]
Display a summary widget weight progress. The component contains the current measurement, goal measurement and an optional directional progress indicator. When tapped, a bottom sheet appears to edit the goal.
import { useState, useEffect, useCallback } from "react";
import { MealsList, useMiriApp, Meal } from "@miri-ai/miri-react-native";
function MyComponent() {
const { getWeightProgress } = useMiriApp();
const [weightProgress, setWeightProgress] = useState<{
weightGoal: PlanArtifactWeight | null;
weightTracking: WeightTracking | null;
}>({ weightGoal: null, weightTracking: null });
const [isLoading, setIsLoading] = useState(true);
const fetchWeightProgress = useCallback(async () => {
const fetchedWeightProgress = await getWeightProgress();
setWeightProgress(fetchedWeightProgress);
setIsLoading(false);
}, [getWeightProgress]);
useEffect(() => {
fetchWeightProgress();
}, []);
return (
<WeightProgress weightProgress={weightProgress} isLoading={isLoading} />
);
}
| Prop | Type | Description || :---- | :---- | :---- || weightProgress | string | The progress returned by getWeightProgress || isLoading | boolean | If true, show the loading status of the component || onUpdateWeightTracking | (weightGoal: PlanArtifactWeight) => Promise<void> | The handler to call when the weight goal is updated || onUpdateWeightGoal | () => void | The handler to call when the the user taps the weight goal to edit it. We recommend navigating the user to the UserSettings component to edit their weight goal |