rn-grid-date-time-picker 1.1.0 → 1.2.1

package/src/components/DateTimePicker.tsx

@@ -28,6 +28,7 @@ import {
 } from '../core/draft';
 import {
   hijriDateText,
+  hijriPeriods,
   isHijriSupported,
   resolveCalendarSystem,
   type CalendarSystem,
@@ -53,6 +54,7 @@ import type {
 import Calendar from './calendar/Calendar';
 import CalendarSwitch from './calendar/CalendarSwitch';
 import { localeNames } from './calendar/localeNames';
+import { RtlContext } from './theme/direction';
 import { NumeralsContext } from './theme/numerals';
 import { firstSelectedDay, type CalendarSelection } from './calendar/selection';
 import PickerContainer from './container/PickerContainer';
@@ -71,7 +73,11 @@ import { useOpenPicker } from './hooks/useOpenPicker';
 import { usePickerDraft } from './hooks/usePickerDraft';
 import { useTodayTick } from './hooks/useTodayTick';
 import TimeRows, { type PendingTimes } from './time/TimeRows';
-import { DEFAULT_STRINGS, resolveStrings } from './theme/defaultStrings';
+import {
+  DEFAULT_STRINGS,
+  compactStrings,
+  resolveStrings,
+} from './theme/defaultStrings';
 import { buildTokens } from './theme/tokens';
 import {
   DEFAULT_YEAR_RANGE,
@@ -86,6 +92,7 @@ const sameValue = (a: DateTimeValue, b: DateTimeValue): boolean =>
   (a.time?.minute ?? -1) === (b.time?.minute ?? -1);
 
 const ALL_SYSTEMS: CalendarSystem[] = ['gregory', 'hijri', 'dual'];
+const RTL = { direction: 'rtl' } as const;
 
 /** The same kind of selection with nothing in it. */
 const emptySelection = (sel: CalendarSelection): CalendarSelection =>
@@ -197,6 +204,8 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     minuteStep: minuteStepProp = 1,
     timeInput = 'typed',
     newDayTime,
+    timeRowDate = false,
+    renderTimeLabel,
     holidays: holidaysProp,
     loadHolidays,
     disableHolidays,
@@ -210,6 +219,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     theme,
     styles,
     strings: stringOverrides,
+    hijriStrings: hijriOverrides,
     testID,
   } = props;
 
@@ -294,6 +304,20 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     if (kind === 'latin') return latinDigits;
     return localeDigits(sys === 'hijri' ? hijriLocale : loc);
   };
+  /**
+   * The strings for one calendar. A Hijri one takes `hijriStrings` first, then
+   * AM / PM in `hijriLocale` (ص / م), then `strings`.
+   */
+  const hijriStrings = useMemo(
+    () => ({
+      ...strings,
+      ...hijriPeriods(hijriLocale),
+      ...compactStrings(hijriOverrides),
+    }),
+    [strings, hijriLocale, hijriOverrides]
+  );
+  const stringsFor = (sys: 'gregory' | 'hijri') =>
+    sys === 'hijri' ? hijriStrings : strings;
   const monthNames = useMemo(() => localeNames(loc).monthsLong, [loc]);
   /** A month or year pick shown as text: "March 2026" or "2026". */
   const periodText = (v: DateTimeValue | null): string => {
@@ -1249,6 +1273,11 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
       : undefined;
   const savedDateText = dateTextFor(savedSystem);
   const draftDateText = dateTextFor(draftSystem);
+  const savedStrings = stringsFor(savedSystem);
+  const draftStrings = stringsFor(draftSystem);
+  // Error messages inside the picker follow the tab on screen; the on-screen
+  // field's keep `strings`.
+  const shownStrings = stringsFor(shownSystem);
 
   // What the on-screen field shows: the saved value, never the draft.
   const savedSingle = saved.mode === 'single' ? saved.slot.value : null;
@@ -1262,7 +1291,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
           timeFormat,
           strings.rangeSeparator,
           savedDateText,
-          strings
+          savedStrings
         )
       : saved.mode === 'multiple'
         ? formatMultipleText(
@@ -1271,7 +1300,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
             dateFormat,
             timeFormat,
             savedDateText,
-            strings
+            savedStrings
           )
         : precision !== 'day'
           ? periodText(savedSingle)
@@ -1332,7 +1361,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
           dateFormat,
           timeFormat,
           savedDateText,
-          strings
+          savedStrings
         )
     ),
     disabled,
@@ -1360,7 +1389,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     draft.draft.mode === 'single' ? draft.draft.slot.value : null;
   // A time outside the limits is explained under the time row, not here.
   const sheetValueError =
-    sheetValue && dayOff(sheetValue.date) ? strings.errorNotAllowed : '';
+    sheetValue && dayOff(sheetValue.date) ? shownStrings.errorNotAllowed : '';
 
   let rangeError = '';
   if (d.mode === 'range' && d.from.value && d.to.value) {
@@ -1369,14 +1398,14 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
       constraints.dayStatus(d.from.value.date).disabled ||
       constraints.dayStatus(d.to.value.date).disabled
     )
-      rangeError = strings.errorNotAllowed;
+      rangeError = shownStrings.errorNotAllowed;
     else if (previewIssue === 'RANGE_ORDER')
-      rangeError = strings.errorRangeOrder;
+      rangeError = shownStrings.errorRangeOrder;
     else if (previewIssue === 'RANGE_LENGTH')
       rangeError =
         range?.minDays !== undefined && length < range.minDays
-          ? strings.errorRangeTooShort(range.minDays)
-          : strings.errorRangeTooLong(range?.maxDays ?? length);
+          ? shownStrings.errorRangeTooShort(range.minDays)
+          : shownStrings.errorRangeTooLong(range?.maxDays ?? length);
   }
 
   const fieldCommon = {
@@ -1398,6 +1427,8 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     ) : (
       <ValueField
         {...fieldCommon}
+        strings={savedStrings}
+        errorStrings={strings}
         value={savedSingle}
         displayText={savedText}
         dateText={savedDateText}
@@ -1442,6 +1473,8 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     ) : mode === 'single' ? (
       <ValueField
         {...fieldCommon}
+        strings={draftStrings}
+        errorStrings={shownStrings}
         value={sheetValue}
         displayText={precision !== 'day' ? periodText(sheetValue) : undefined}
         dateText={draftDateText}
@@ -1459,6 +1492,8 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     ) : d.mode === 'range' ? (
       <RangeFields
         {...fieldCommon}
+        strings={draftStrings}
+        errorStrings={shownStrings}
         layout={rangeLayout}
         dateText={draftDateText}
         showIcon={sheetOptions?.fieldIcon}
@@ -1479,6 +1514,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     ) : d.mode === 'multiple' ? (
       <ValueField
         {...fieldCommon}
+        strings={draftStrings}
         value={null}
         displayText={formatMultipleText(
           draftValues,
@@ -1486,7 +1522,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
           dateFormat,
           timeFormat,
           draftDateText,
-          strings
+          draftStrings
         )}
         placeholder={sheetOptions?.fieldPlaceholder}
         allowClear={allowClear}
@@ -1550,6 +1586,15 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
         testID={testID ? `${testID}-dual-tabs` : undefined}
       />
     );
+  // The Hijri tab lays out its calendar and time rows right to left; the
+  // wrapper always renders, so a tab change doesn't remount the time boxes.
+  const hijriShown = shownSystem === 'hijri';
+  const mirrored = (node: React.ReactNode) =>
+    node == null ? null : (
+      <RtlContext.Provider value={hijriShown || null}>
+        <View style={hijriShown ? RTL : undefined}>{node}</View>
+      </RtlContext.Provider>
+    );
   // Another calendar opens on the days the last one showed, else on the
   // selection (shown or not), else where the picker would open.
   const calendarAnchor =
@@ -1561,38 +1606,40 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     <View style={folded ? FOLDED : undefined}>
       {calendarSwitchNode}
       {dualTabs}
-      <Calendar
-        key={shownSystem}
-        constraints={selectionShown ? calendarConstraints : constraints}
-        today={today}
-        initialVisibleDate={calendarAnchor}
-        selection={selectionShown ? selection : emptySelection(selection)}
-        onSelectDay={onSelectDayStable}
-        firstDayOfWeek={firstDayOfWeek}
-        showOutsideDays={showOutsideDays}
-        showHolidays={showHolidays}
-        yearRange={yearRange}
-        locale={shownSystem === 'hijri' ? hijriLocale : loc}
-        calendarSystem={shownSystem}
-        initialView={initialView}
-        precision={precision}
-        enableMonthSwipe={enableMonthSwipe}
-        showToday={showToday}
-        onVisibleMonthChange={handleVisibleMonth}
-        onAnchorChange={rememberAnchor}
-        renderDay={renderDay}
-        renderWeekday={renderWeekday}
-        renderMonthChip={renderMonthChip}
-        renderYearCell={renderYearCell}
-        renderMonthCell={renderMonthCell}
-        renderEmptyState={renderEmptyState}
-        icons={icons}
-        iconProps={iconProps}
-        tokens={tokens}
-        styles={styles}
-        strings={strings}
-        testID={testID}
-      />
+      {mirrored(
+        <Calendar
+          key={shownSystem}
+          constraints={selectionShown ? calendarConstraints : constraints}
+          today={today}
+          initialVisibleDate={calendarAnchor}
+          selection={selectionShown ? selection : emptySelection(selection)}
+          onSelectDay={onSelectDayStable}
+          firstDayOfWeek={firstDayOfWeek}
+          showOutsideDays={showOutsideDays}
+          showHolidays={showHolidays}
+          yearRange={yearRange}
+          locale={shownSystem === 'hijri' ? hijriLocale : loc}
+          calendarSystem={shownSystem}
+          initialView={initialView}
+          precision={precision}
+          enableMonthSwipe={enableMonthSwipe}
+          showToday={showToday}
+          onVisibleMonthChange={handleVisibleMonth}
+          onAnchorChange={rememberAnchor}
+          renderDay={renderDay}
+          renderWeekday={renderWeekday}
+          renderMonthChip={renderMonthChip}
+          renderYearCell={renderYearCell}
+          renderMonthCell={renderMonthCell}
+          renderEmptyState={renderEmptyState}
+          icons={icons}
+          iconProps={iconProps}
+          tokens={tokens}
+          styles={styles}
+          strings={stringsFor(shownSystem)}
+          testID={testID}
+        />
+      )}
     </View>
   );
 
@@ -1623,9 +1670,12 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
         onSpinChange={setWheelSpinning}
         onFocusChange={(row, f) => reportFocus(`time-${row}`, f)}
         onPendingChange={onRowPending}
+        timeRowDate={timeRowDate}
+        renderTimeLabel={renderTimeLabel}
+        dateText={draftDateText}
         tokens={tokens}
         styles={styles}
-        strings={strings}
+        strings={stringsFor(shownSystem)}
         testID={testID}
       />
     );
@@ -1638,8 +1688,8 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
       ? validation.message
       : null;
 
-  // The field and the time row write the date in the digits of the calendar
-  // it was picked in; the calendar uses its own.
+  // The field writes the date in the digits of the calendar it was picked in;
+  // the calendar and the time rows follow the tab that shows.
   const sheetContent = (
     <>
       <NumeralsContext.Provider value={digitsFor(draftSystem)}>
@@ -1648,8 +1698,8 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
       <NumeralsContext.Provider value={digitsFor(shownSystem)}>
         {calendar}
       </NumeralsContext.Provider>
-      <NumeralsContext.Provider value={digitsFor(draftSystem)}>
-        {timeRow}
+      <NumeralsContext.Provider value={digitsFor(shownSystem)}>
+        {mirrored(timeRow)}
       </NumeralsContext.Provider>
       {validationMessage ? (
         <FieldMessages

package/src/components/calendar/CalendarHeader.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from 'react';
 import {
-  I18nManager,
   Pressable,
   ScrollView,
   Text,
@@ -18,6 +17,7 @@ import {
 import type { PickerStrings } from '../theme/defaultStrings';
 import type { PickerStyles } from '../theme/styleKeys';
 import { MAX_FONT_SCALE } from '../theme/a11y';
+import { useIsRTL } from '../theme/direction';
 import { useNumerals } from '../theme/numerals';
 import type { ThemeTokens } from '../theme/tokens';
 import { useReduceMotion } from '../hooks/useReduceMotion';
@@ -60,6 +60,7 @@ export const CalendarHeader: React.FC<HeaderProps> = ({
   testID,
 }) => {
   const digits = useNumerals();
+  const isRTL = useIsRTL();
   const s = buildCalendarStyles(tokens);
   const ico = resolveIcons(icons);
   const arrow = (
@@ -69,7 +70,7 @@ export const CalendarHeader: React.FC<HeaderProps> = ({
     label: string
   ) => {
     // Chevrons point in the reading direction; mirrored in right-to-left layouts.
-    const pointsLeft = (dir === 'prev') !== I18nManager.isRTL;
+    const pointsLeft = (dir === 'prev') !== isRTL;
     const chevron = pointsLeft ? 'chevronLeft' : 'chevronRight';
     return (
       <Pressable

package/src/components/calendar/DayGrid.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef } from 'react';
-import { I18nManager, PanResponder, Text, View } from 'react-native';
+import { PanResponder, Text, View } from 'react-native';
 import type { Constraints } from '../../core/constraints';
 import { isSameDay } from '../../core/calendarDate';
 import { buildMonthGrid, weekdayOrder } from '../../core/monthGrid';
@@ -7,6 +7,7 @@ import type { CalendarDate, Weekday } from '../../core/types';
 import type { PickerStrings } from '../theme/defaultStrings';
 import type { PickerStyles } from '../theme/styleKeys';
 import { MAX_FONT_SCALE } from '../theme/a11y';
+import { useIsRTL } from '../theme/direction';
 import type { ThemeTokens } from '../theme/tokens';
 import { buildCalendarStyles } from './calendarStyles';
 import DayCell, { type DayCellState } from './DayCell';
@@ -84,6 +85,8 @@ const DayGrid: React.FC<DayGridProps> = ({
 
   const onSwipeRef = useRef(onSwipe);
   onSwipeRef.current = onSwipe;
+  const isRTLRef = useRef(false);
+  isRTLRef.current = useIsRTL();
   const pan = useMemo(
     () =>
       PanResponder.create({
@@ -97,7 +100,7 @@ const DayGrid: React.FC<DayGridProps> = ({
         // on the grid (PanResponder blocks native views by default).
         onShouldBlockNativeResponder: () => false,
         onPanResponderRelease: (_, g) => {
-          const step = swipeStep(g.dx, I18nManager.isRTL);
+          const step = swipeStep(g.dx, isRTLRef.current);
           if (step !== 0) onSwipeRef.current?.(step);
         },
       }),

package/src/components/calendar/calendarStyles.ts

@@ -103,7 +103,8 @@ const create = (t: ThemeTokens) =>
     disabledText: { color: t.disabledText },
     holidayText: { color: t.holiday },
     pressed: { backgroundColor: t.rangeFill },
-    grid: { flexDirection: 'row', flexWrap: 'wrap', paddingVertical: 8 },
+    // No top padding: the header's margin and the cell padding already space the first row.
+    grid: { flexDirection: 'row', flexWrap: 'wrap', paddingBottom: 8 },
     gridCell: { width: '33.33%', padding: 6 },
     gridButton: {
       minHeight: t.touchTarget,

package/src/components/field/RangeFields.tsx

@@ -47,6 +47,8 @@ interface Props {
   tokens: ThemeTokens;
   styles?: PickerStyles;
   strings: PickerStrings;
+  /** The texts of the typed-input errors. Default `strings`. */
+  errorStrings?: PickerStrings;
   testID?: string;
 }
 
@@ -84,6 +86,7 @@ const RangeFields: React.FC<Props> = (props) => {
     tokens,
     styles,
     strings,
+    errorStrings,
     testID,
   } = props;
   const common = {
@@ -98,6 +101,7 @@ const RangeFields: React.FC<Props> = (props) => {
     tokens,
     styles,
     strings,
+    errorStrings,
     disabled,
   };
 

package/src/components/field/SegmentedInput.tsx

@@ -292,7 +292,7 @@ const SegmentedInput: React.FC<Props> = ({
         {dateSpecs.map((spec, i) => renderNumeric(spec, i))}
       </View>
       {timeSpecs.length ? (
-        <View style={s.segmentGroup}>
+        <View style={[s.segmentGroup, dateSpecs.length > 0 && s.segmentTime]}>
           {timeSpecs.map((spec, i) =>
             spec.key === 'period' ? renderPeriod() : renderNumeric(spec, i)
           )}

package/src/components/field/ValueField.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Pressable, Text, View } from 'react-native';
+import { Pressable, ScrollView, Text, View } from 'react-native';
 import type { SegmentEditorAction } from '../../core/segmentEditor';
 import type { ParsedSegments } from '../../core/segments';
 import type { DateTimeValue, PickerType, TimeFormat } from '../../core/types';
@@ -11,6 +11,7 @@ import {
   type IconSet,
 } from '../../icons';
 import { useTypedSegments } from '../hooks/useTypedSegments';
+import type { ScrollViewRef } from '../nativeTypes';
 import type { PickerStrings } from '../theme/defaultStrings';
 import type { PickerStyles } from '../theme/styleKeys';
 import { useNumerals } from '../theme/numerals';
@@ -18,6 +19,7 @@ import type { ThemeTokens } from '../theme/tokens';
 import type { InstructionRenderProps, LabelRenderProps } from '../types';
 import FieldMessages from './FieldMessages';
 import {
+  formatValueParts,
   formatValueText,
   placeholderText,
   segmentErrorText,
@@ -26,6 +28,16 @@ import {
 import { buildFieldStyles } from './fieldStyles';
 import SegmentedInput from './SegmentedInput';
 
+// Hebrew and Arabic letters; Arabic-Indic digits (٠–٩, ۰–۹) are left out, since
+// digits don't set the reading direction.
+const RTL_LETTER = '֐-׿؀-ٟ٪-ۯۺ-ࣿ';
+const FIRST_LETTER_RTL = new RegExp(
+  `^[^A-Za-zÀ-ɏ${RTL_LETTER}]*[${RTL_LETTER}]`
+);
+/** Whether a text reads right to left: its first letter is Hebrew or Arabic. */
+export const startsRightToLeft = (text: string): boolean =>
+  FIRST_LETTER_RTL.test(text);
+
 export interface ValueFieldProps {
   type: PickerType;
   /** The value to show (or to start typing from). */
@@ -79,6 +91,8 @@ export interface ValueFieldProps {
   tokens: ThemeTokens;
   styles?: PickerStyles;
   strings: PickerStrings;
+  /** The texts of its typed-input errors. Default `strings`. */
+  errorStrings?: PickerStrings;
   testID?: string;
 }
 
@@ -160,10 +174,12 @@ const ValueField: React.FC<ValueFieldProps> = (props) => {
     tokens,
     styles,
     strings,
+    errorStrings = strings,
     testID,
   } = props;
   const s = buildFieldStyles(tokens);
   const ico = resolveIcons(iconOverrides);
+  const scrollRef = useRef<ScrollViewRef>(null);
   const [lastParsed, setLastParsed] = useState<ParsedSegments | null>(null);
   const { state, dispatch, getState } = useTypedSegments(
     value,
@@ -205,13 +221,25 @@ const ValueField: React.FC<ValueFieldProps> = (props) => {
   const typing = !!allowTyping && editable;
   const typedError =
     typing && !state.focused && lastParsed && !lastParsed.isEmpty
-      ? segmentErrorText(lastParsed.errors, strings, yearRange)
+      ? segmentErrorText(lastParsed.errors, errorStrings, yearRange)
       : '';
   const error = typedError || errorMessage || '';
   const hasValue = typing ? !state.parsed.isEmpty : !!value || !!displayText;
   const text =
     displayText ??
     formatValueText(value, type, dateFormat, timeFormat, dateText, strings);
+  // With a fieldDateText style, a single date-time shows its date and time
+  // apart (no sideways scroll).
+  const valueParts =
+    styles?.fieldDateText && displayText === undefined && value
+      ? formatValueParts(value, type, dateFormat, timeFormat, dateText, strings)
+      : null;
+  const parts = valueParts?.time ? valueParts : null;
+  const valueStyle = [
+    s.text,
+    styles?.fieldText,
+    disabled && [s.disabledText, styles?.fieldTextDisabled],
+  ];
 
   const clear = () => {
     dispatch({ type: 'reset', value: null });
@@ -300,19 +328,59 @@ const ValueField: React.FC<ValueFieldProps> = (props) => {
       onPress={onPress}
       style={fieldStyle}
     >
-      <Text
-        numberOfLines={1}
-        style={[
-          s.text,
-          styles?.fieldText,
-          !text && [s.placeholder, styles?.fieldPlaceholder],
-          disabled && [s.disabledText, text ? styles?.fieldTextDisabled : null],
-        ]}
-      >
-        {digits(text) ||
-          placeholder ||
-          placeholderText(type, dateFormat, timeFormat, strings)}
-      </Text>
+      {parts ? (
+        <>
+          <Text
+            numberOfLines={1}
+            ellipsizeMode="clip"
+            style={[valueStyle, s.textScrolled, styles?.fieldDateText]}
+          >
+            {digits(`${parts.date}${strings.dateTimeSeparator ?? ' '}`)}
+          </Text>
+          <Text numberOfLines={1} ellipsizeMode="clip" style={valueStyle}>
+            {digits(parts.time)}
+          </Text>
+        </>
+      ) : text ? (
+        // A value too long for the box scrolls sideways; a tap still opens.
+        <ScrollView
+          ref={scrollRef}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          keyboardShouldPersistTaps="always"
+          style={s.textScroll}
+          contentContainerStyle={s.textScrollContent}
+          // Right-to-left text (a Hijri date) starts at its right end.
+          onContentSizeChange={() => {
+            if (startsRightToLeft(text))
+              scrollRef.current?.scrollToEnd({ animated: false });
+          }}
+        >
+          <Text
+            numberOfLines={1}
+            // Android can measure a line a pixel short (right-to-left text
+            // most often) and would then swap its last word for "…".
+            ellipsizeMode="clip"
+            style={[valueStyle, s.textScrolled]}
+          >
+            {digits(text)}
+          </Text>
+        </ScrollView>
+      ) : (
+        <Text
+          numberOfLines={1}
+          style={[
+            s.text,
+            styles?.fieldText,
+            s.placeholder,
+            styles?.fieldPlaceholder,
+            disabled && s.disabledText,
+          ]}
+        >
+          {placeholder ||
+            placeholderText(type, dateFormat, timeFormat, strings)}
+        </Text>
+      )}
       {icons}
     </Pressable>
   );

package/src/components/field/fieldStyles.ts

@@ -32,6 +32,10 @@ const create = (t: ThemeTokens) =>
       fontSize: t.fontSizeMedium,
       color: t.text,
     },
+    textScroll: { flex: 1 },
+    textScrollContent: { flexGrow: 1, alignItems: 'center' },
+    // In the scroll, or as a date set apart from its time, the text keeps its full width.
+    textScrolled: { flex: 0, flexShrink: 0 },
     placeholder: { color: t.placeholder },
     disabledText: { color: t.disabledText },
     icons: { flexDirection: 'row', alignItems: 'center', marginStart: 8 },
@@ -55,6 +59,8 @@ const create = (t: ThemeTokens) =>
       alignItems: 'center',
       flexWrap: 'nowrap',
     },
+    // After a date, the time sits in the middle of the space left before the icons.
+    segmentTime: { flexGrow: 1, justifyContent: 'center' },
     segment: {
       paddingVertical: 8,
       paddingHorizontal: 0,

package/src/components/field/fieldText.ts

@@ -36,6 +36,22 @@ export const formatTimeText = (
 /** Writes a value's date some other way, e.g. as a Hijri date. */
 export type DateTextFormatter = (value: DateTimeValue) => string;
 
+/** A value's date and time as two texts; the time is '' for a date or a value without one. */
+export const formatValueParts = (
+  value: DateTimeValue,
+  type: PickerType,
+  dateFormat: string,
+  timeFormat: TimeFormat,
+  dateText?: DateTextFormatter,
+  periods: PeriodLabels = DEFAULT_STRINGS
+): { date: string; time: string } => ({
+  date: dateText ? dateText(value) : formatDateText(value, dateFormat),
+  time:
+    type === 'datetime' && value.time
+      ? formatTimeText(value, timeFormat, periods)
+      : '',
+});
+
 export const formatValueText = (
   value: DateTimeValue | null,
   type: PickerType,
@@ -45,10 +61,15 @@ export const formatValueText = (
   periods: PeriodLabels = DEFAULT_STRINGS
 ): string => {
   if (!value) return '';
-  const date = dateText ? dateText(value) : formatDateText(value, dateFormat);
-  return type === 'datetime' && value.time
-    ? `${date}${periods.dateTimeSeparator ?? ' '}${formatTimeText(value, timeFormat, periods)}`
-    : date;
+  const { date, time } = formatValueParts(
+    value,
+    type,
+    dateFormat,
+    timeFormat,
+    dateText,
+    periods
+  );
+  return time ? `${date}${periods.dateTimeSeparator ?? ' '}${time}` : date;
 };
 
 /** '21-10-2026 – 25-10-2026'; just the start (with the dash) while the end is open. */

package/src/components/theme/defaultStrings.ts

@@ -124,9 +124,19 @@ export const DEFAULT_STRINGS: Required<PickerStrings> = {
   a11yRangeEnd: 'end of range',
 };
 
+/** The keys that have a value: one left `undefined` (or `null`) keeps what's under it. */
+export const compactStrings = (
+  overrides?: Partial<PickerStrings>
+): Partial<PickerStrings> =>
+  overrides
+    ? (Object.fromEntries(
+        Object.entries(overrides).filter(([, v]) => v != null)
+      ) as Partial<PickerStrings>)
+    : {};
+
 /** The English defaults with the caller's overrides on top. */
 export const resolveStrings = (
   overrides?: Partial<PickerStrings>
 ): Required<PickerStrings> => {
-  return { ...DEFAULT_STRINGS, ...overrides };
+  return { ...DEFAULT_STRINGS, ...compactStrings(overrides) };
 };

package/src/components/theme/direction.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+import { I18nManager } from 'react-native';
+
+/**
+ * Whether a part of the picker is laid out right to left. The picker sets it
+ * for the calendar and the time rows while the Hijri tab shows; elsewhere the
+ * app's direction (`I18nManager.isRTL`) decides.
+ */
+export const RtlContext = createContext<boolean | null>(null);
+
+export const useIsRTL = (): boolean =>
+  useContext(RtlContext) ?? I18nManager.isRTL;