Form field types

​

Field definition

export interface FormFieldDef {
  id: string;
  type: FormFieldType;
  key: string;
  label: string;
  placeholder?: string;
  helpText?: string;
  required: boolean;
  defaultValue?: unknown;
  order: number;
  page: number;
  saveToClient?: boolean;
  validation?: {
    minLength?: number; maxLength?: number; pattern?: string;
    multiline?: boolean; min?: number; max?: number; unit?: string;
  };
  options?: { value: string; label: string }[];
  link?: { label: string; url: string };
  content?: {
    title?: string; preview?: string; body?: string; richText?: RichSpan[];
    background?: string; fromLine?: string; mediaUrl?: string; mediaKind?: 'image' | 'video';
  };
  config?: {
    accept?: string; maxSizeMb?: number; multiple?: boolean; stars?: number;
    minLabel?: string; maxLabel?: string; hiddenCategoryIds?: string[];
    measurement?: 'chest' | 'waist' | 'hips' | 'arm' | 'thigh';
  };
  condition?: FormCondition;
  visibleIf?: { fieldKey: string; equals: unknown } | null;
}

​

Summary

​

Text and email

​

Number, height and body measurement

​

Weight and age

​

RulerPicker

• Numbers ascend left to right in every language. The track is physicalLtr.
• Ticks are TICK_SPACING = 12 px apart with snapToInterval. About TARGET_LABELS = 11 ticks carry a label.
• Only a window of ticks is mounted: TICK_WINDOW = 160 ticks each side, re-centred when the index moves TICK_SHIFT = 40 ticks.
• The readout updates on scroll. onChange fires on onMomentumScrollEnd and onScrollEndDrag with the snapped value.
• The readout is a TextInput (decimal or number pad, maxLength 6 with decimals, 3 without). Typing calls onChange with the rounded number on every keystroke and moves the ruler when the value is in range. A typed value outside min and max is still reported, so validation can reject it.
• Starting a drag dismisses the keyboard.

​

Phone

• Local mode formats digits as 050-000-0000 (groups of 3, 3, 4, at most 10 digits, maxLength 12).
• Ticking the non-Israeli checkbox switches to foreign mode, shows a country code button and a country picker sheet, and allows up to 20 characters.
• The answer is whatever joinPhone(country, national) returns: the national text for the home country, or the international number when a foreign country is selected.

​

Israeli ID

​

Date and birth date

• The answer is toIso(year, month, day), a YYYY-MM-DD string. parseDateValue reads it back and rejects impossible dates.
• The closed trigger shows DD/MM/YYYY (formatDisplay).
• The sheet has a day grid and a 12-year grid. Tapping the title toggles between them.
• The earliest year is MIN_PICKER_YEAR = 1900.
• date allows up to MAX_FUTURE_YEARS = 50 years ahead.
• birth_date stops at the current year and month, and disables future days (isFutureBirthDay). With no value yet it opens on the year grid at January 2000.
• Picking a day closes the sheet.

​

Gender, goal and dropdown

• gender renders two Chip pills from a fixed list with values male and female.
• goal and dropdown render field.options as a vertical list of rows.
• dropdown with config.multiple === true becomes multi-select. Rows act as checkboxes and the answer is an array of option values. Otherwise the answer is a single option value string.

​

Checkbox confirmation

export function confirmationCopy(field: FormFieldDef): { title?: string; text: string } {
  const body = field.content?.body?.trim();
  const text = body && body.length > 0 ? body : field.label;
  const title = field.label?.trim() ? field.label : undefined;
  return title ? { title, text } : { text };
}

• field.label is the heading above the checkbox.
• field.content.body is the sentence beside the checkbox. Without a body, the label is used for both.
• The required marker * is appended to the sentence, not the heading.
• field.link adds an underlined link under the sentence. normalizeLinkUrl adds https:// when no scheme is present and only allows http and https. The link text is link.label or the raw URL.

​

Rating

​

Range slider

• Bounds come from validation.min and validation.max, defaulting to RANGE_MIN_DEFAULT = 0 and RANGE_MAX_DEFAULT = 10. If max is not greater than min, max becomes min + 1.
• The track is physically left to right in every language.
• The answer is Math.round(min + ratio * (max - min)), so always an integer.
• With no answer the readout shows a dash and the thumb sits at the minimum.

​

Scroll lock

1. It claims the gesture and refuses to give it up: onStartShouldSetResponder and onMoveShouldSetResponder return true, and onResponderTerminationRequest returns false.
2. It calls onDragChange(true) on grant and onDragChange(false) on release or terminate. FormScreen stores this in sliderDragging and passes scrollEnabled={!sliderDragging} to Screen.

​

Image upload

ImagePicker.launchImageLibraryAsync({
  mediaTypes: ['images'],
  quality: 1,
  preferredAssetRepresentationMode:
    ImagePicker.UIImagePickerPreferredAssetRepresentationMode.Current,
});

​

Video upload

• Record asks for camera permission, then calls launchCameraAsync with mediaTypes: ['videos'].
• Library calls launchImageLibraryAsync with mediaTypes: ['videos'].
• Both use quality: 0.7 (VIDEO_QUALITY).
• The source is sent as video/mp4 named after field.key with an .mp4 extension.

​

Food preferences

export interface FoodPreferenceAnswer {
  excludedCategoryIds: string[];
  excludedFoodIds: string[];
  includedExceptionIds: string[];
}

• foodCatalogGroups(catalog, field) drops categories listed in config.hiddenCategoryIds and categories with no foods.
• filterFoodCatalogGroups(groups, search) filters foods by a case-insensitive name match.
• isFoodExcluded is true when the food id is in excludedFoodIds, or its category is excluded and the food is not in includedExceptionIds.
• toggleFood inside an excluded category flips the food between excluded and exception. Outside one, it adds or removes the id in excludedFoodIds.
• toggleCategory flips the category and always clears the exceptions for that category’s foods. Foods excluded one by one stay excluded when the category is switched back on.
• readFoodPreferenceAnswer(value) normalises any stored value into the three de-duplicated id lists.

​

Display-only blocks

​

read_more

​

coach_message

​

text_block

​

media_block

• mediaBlockSource uses content.mediaKind when it is image or video. Otherwise it treats URLs ending in mp4, m4v, mov, qt, webm, mkv or m3u8 as video and everything else as image.
• isEmptyMediaBlock is true when there is no URL. FormScreen leaves such a block out of the page entirely.
• The box is full width. Its height follows the media aspect ratio, capped at half the screen height (MAX_SCREEN_SHARE = 0.5). Until the ratio is known it reserves a 16:9 box.
• Video uses expo-video with native controls and does not autoplay. To size portrait clips correctly on native, it probes one thumbnail frame (FRAME_PROBE_SIZE = 160) and falls back to the track size if that fails.
• The player is paused in a layout-effect cleanup, and when the app goes to background.