rn-grid-date-time-picker 1.0.0 → 1.2.0

package/src/components/calendar/localeNames.ts

@@ -1,20 +1,26 @@
-import { DateTime, Info } from 'luxon';
+import { weekdayOf } from '../../core/calendarDate';
+import { withCalendar } from '../../core/locale';
 import type { CalendarDate, Weekday } from '../../core/types';
 
 /**
- * Month and weekday names from Luxon (Intl), cached per locale. Falls back to
- * 'en-US' when the device's Intl can't format the locale (some engines return
- * empty names instead of failing), and to built-in English names after that.
+ * Month and weekday names from the platform's Intl, cached per locale. Each
+ * name is formatted on its own (not read from formatToParts: iOS labels every
+ * part of some locales, such as 'de-DE' and 'ar-SA', as plain text), in the
+ * Gregorian calendar. Falls back to 'en-US' when the device's Intl can't name
+ * the locale, and to built-in English names after that.
  */
 interface Names {
   monthsShort: string[];
   monthsLong: string[];
+  /** Monday … Sunday, as the weekday row shows them. */
   weekdays: string[];
+  /** Monday … Sunday, for screen readers. */
+  weekdaysLong: string[];
 }
 
 const cache = new Map<string, Names>();
 
-const FALLBACK = {
+const FALLBACK: Names = {
   monthsShort: [
     'Jan',
     'Feb',
@@ -43,26 +49,53 @@ const FALLBACK = {
     'November',
     'December',
   ],
-  // Luxon order: Monday … Sunday.
   weekdays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+  weekdaysLong: [
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+    'Sunday',
+  ],
 };
 
+const range = (n: number) => Array.from({ length: n }, (_, i) => i);
+
 const readNames = (locale: string): Names | null => {
   try {
-    const short = Info.weekdays('short', { locale });
-    const names = {
-      monthsShort: Info.months('short', { locale }),
-      monthsLong: Info.months('long', { locale }),
+    const tag = withCalendar(locale, 'gregory');
+    const namer = (options: Intl.DateTimeFormatOptions) => {
+      const f = new Intl.DateTimeFormat(tag, { timeZone: 'UTC', ...options });
+      return (d: Date) => f.format(d);
+    };
+    // Mid-month, at noon UTC, so no zone moves the day.
+    const months = range(12).map((i) => new Date(Date.UTC(2021, i, 15, 12)));
+    // 1 February 2021 was a Monday.
+    const days = range(7).map((i) => new Date(Date.UTC(2021, 1, 1 + i, 12)));
+    const short = days.map(namer({ weekday: 'short' }));
+    // The language Intl actually uses: an unknown tag falls back to the device's.
+    const english = new Intl.DateTimeFormat(tag)
+      .resolvedOptions()
+      .locale.startsWith('en');
+    const names: Names = {
+      monthsShort: months.map(namer({ month: 'short' })),
+      monthsLong: months.map(namer({ month: 'long' })),
       // Two letters for English ("Su", "Mo"); other locales keep their short form.
-      weekdays: locale.startsWith('en')
-        ? short.map((w) => w?.slice(0, 2))
-        : short,
+      weekdays: english ? short.map((w) => w.slice(0, 2)) : short,
+      weekdaysLong: days.map(namer({ weekday: 'long' })),
     };
-    const complete = (list: string[] | undefined, length: number) =>
-      list?.length === length && list.every(Boolean);
+    // Every name present and different (an engine that ignores the options
+    // writes whole dates, or the same text, instead).
+    const complete = (list: string[], length: number) =>
+      list.length === length &&
+      list.every(Boolean) &&
+      new Set(list).size === length;
     return complete(names.monthsShort, 12) &&
       complete(names.monthsLong, 12) &&
-      complete(names.weekdays, 7)
+      complete(names.weekdays, 7) &&
+      complete(names.weekdaysLong, 7)
       ? names
       : null;
   } catch {
@@ -84,10 +117,7 @@ export const weekdayName = (locale: string, weekday: Weekday): string =>
 
 /** Full date for screen readers, e.g. "Wednesday, 21 October 2026". */
 export const fullDateLabel = (locale: string, day: CalendarDate): string => {
-  const dt = DateTime.utc(day.year, day.month, day.day);
-  try {
-    return dt.setLocale(locale).toFormat('cccc, d LLLL yyyy');
-  } catch {
-    return dt.toFormat('cccc, d LLLL yyyy');
-  }
+  const names = localeNames(locale);
+  const weekday = names.weekdaysLong[weekdayOf(day) - 1];
+  return `${weekday}, ${day.day} ${names.monthsLong[day.month - 1]} ${day.year}`;
 };

package/src/components/calendar/selection.ts

@@ -17,6 +17,14 @@ export const firstSelectedDay = (
   return sel.days[0] ?? null;
 };
 
+/** Every selected day. */
+export const selectedDays = (sel: CalendarSelection): CalendarDate[] => {
+  if (sel.kind === 'single') return sel.day ? [sel.day] : [];
+  if (sel.kind === 'range')
+    return [sel.from, sel.to].filter((d): d is CalendarDate => !!d);
+  return sel.days;
+};
+
 const isNextDay = (a: CalendarDate, b: CalendarDate): boolean => {
   const next = new Date(Date.UTC(a.year, a.month - 1, a.day + 1));
   return (

package/src/components/container/DefaultSheet.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   KeyboardAvoidingView,
   Modal,
-  Platform,
   Pressable,
   useWindowDimensions,
   View,
@@ -10,23 +9,36 @@ import {
 import type { PickerStyles } from '../theme/styleKeys';
 import type { ThemeTokens } from '../theme/tokens';
 import type { SheetRenderProps, SheetSize } from '../types';
-import { buildContainerStyles } from './containerStyles';
+import { useBottomInset } from '../hooks/useBottomInset';
+import { useKeyboard } from '../hooks/useKeyboardFold';
+import { buildContainerStyles, SHEET_PADDING_BOTTOM } from './containerStyles';
 
 interface Props extends SheetRenderProps {
   height?: SheetSize;
   maxHeight?: SheetSize;
+  keyboardMaxHeight?: SheetSize;
+  /** Space kept free below the footer; default: the app's safe-area inset. */
+  bottomInset?: number;
+  /** The backdrop's screen-reader label. */
+  closeLabel: string;
   tokens: ThemeTokens;
   styles?: PickerStyles;
 }
 
+/** The least room the sheet gets while the keyboard is up, in points. */
+const MIN_ROOM = 160;
+
 /** Points for a size given in points or as a percentage of the screen. */
 const toPoints = (size: SheetSize, screen: number): number =>
   typeof size === 'number' ? size : (screen * parseFloat(size)) / 100;
 
 /**
  * The built-in bottom sheet: an RN Modal with a backdrop and a panel pinned to
- * the bottom, up to 90% of the screen (`sheet.height` / `sheet.maxHeight`). Backdrop taps and Android back call
- * onRequestClose. `styles.sheet` styles the panel (e.g. a bottom safe-area inset);
+ * the bottom, up to 90% of the screen (`sheet.height` / `sheet.maxHeight`).
+ * While the keyboard is up it sits on the keyboard, within `sheet.keyboardMaxHeight`
+ * (default `maxHeight`) of the room above it; otherwise it keeps the bottom
+ * safe-area inset (`sheet.bottomInset`) free below the footer. Backdrop taps
+ * and Android back call onRequestClose. `styles.sheet` styles the panel;
  * `renderSheet` replaces the whole sheet.
  */
 const DefaultSheet: React.FC<Props> = ({
@@ -36,15 +48,36 @@ const DefaultSheet: React.FC<Props> = ({
   testID,
   height,
   maxHeight = '90%',
+  keyboardMaxHeight = maxHeight,
+  bottomInset,
+  closeLabel,
   tokens,
   styles,
 }) => {
   const { height: screen } = useWindowDimensions();
-  const max = toPoints(maxHeight, screen);
+  const keyboard = useKeyboard(true);
+  // The room above the keyboard: measured (padding on iOS, the window on
+  // Android), and the screen less the keyboard for an Android window that
+  // isn't resized.
+  const [measured, setMeasured] = useState(screen);
+  // Never less than a strip to show the sheet in, even when the keyboard
+  // reports itself as tall as the window (split screen, Slide Over).
+  const room = Math.max(
+    Math.min(measured, screen - keyboard.height),
+    Math.min(screen, MIN_ROOM)
+  );
+  const max = keyboard.up
+    ? Math.min(toPoints(keyboardMaxHeight, room), room)
+    : toPoints(maxHeight, screen);
   const size =
     height === undefined
       ? { maxHeight: max }
       : { height: Math.min(toPoints(height, screen), max) };
+  // Below the footer: the home indicator or Android's navigation bar, which
+  // an edge-to-edge app draws under. While the keyboard is up the sheet sits
+  // on the keyboard instead, with nothing under it.
+  const safeInset = useBottomInset();
+  const inset = keyboard.up ? 0 : Math.max(0, bottomInset ?? safeInset);
   const s = buildContainerStyles(tokens);
   return (
     <Modal
@@ -54,20 +87,33 @@ const DefaultSheet: React.FC<Props> = ({
       statusBarTranslucent
       onRequestClose={onRequestClose}
     >
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        style={s.sheetRoot}
-      >
+      {/* Pads by the part of the screen the keyboard covers: all of it in an
+          edge-to-edge Android app, whose window the keyboard doesn't resize;
+          none where the window does shrink. */}
+      <KeyboardAvoidingView behavior="padding" style={s.sheetRoot}>
         <Pressable
           testID={testID ? `${testID}-backdrop` : undefined}
           accessibilityRole="button"
-          accessibilityLabel="Close"
+          accessibilityLabel={closeLabel}
           onPress={onRequestClose}
           style={[s.sheetBackdrop, styles?.sheetBackdrop]}
         />
-        <View testID={testID} style={[s.sheet, size, styles?.sheet]}>
-          {body}
-          {footer}
+        <View
+          style={s.sheetRoom}
+          onLayout={(e) => setMeasured(e.nativeEvent.layout.height)}
+        >
+          <View
+            testID={testID}
+            style={[
+              s.sheet,
+              size,
+              inset > 0 && { paddingBottom: SHEET_PADDING_BOTTOM + inset },
+              styles?.sheet,
+            ]}
+          >
+            {body}
+            {footer}
+          </View>
         </View>
       </KeyboardAvoidingView>
     </Modal>

package/src/components/container/PickerContainer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
+import { DEFAULT_STRINGS } from '../theme/defaultStrings';
 import type { SheetOptions, SheetRenderProps } from '../types';
 import DefaultSheet from './DefaultSheet';
 import { buildPickerLayout, type PickerLayoutProps } from './PickerLayout';
@@ -52,6 +53,9 @@ const PickerContainer: React.FC<PickerContainerProps> = ({
       {...p}
       height={sheet?.height}
       maxHeight={sheet?.maxHeight}
+      keyboardMaxHeight={sheet?.keyboardMaxHeight}
+      bottomInset={sheet?.bottomInset}
+      closeLabel={layout.state.strings.a11yClose ?? DEFAULT_STRINGS.a11yClose}
       tokens={layout.state.tokens}
       styles={layout.styles}
     />

package/src/components/container/PickerLayout.tsx

@@ -134,7 +134,7 @@ export const buildPickerLayout = ({
           keyboardShouldPersistTaps="handled"
           nestedScrollEnabled
           bounces={false}
-          showsVerticalScrollIndicator
+          showsVerticalScrollIndicator={false}
         >
           {headerScrolls ? headerNode : null}
           {content}

package/src/components/container/containerStyles.ts

@@ -2,12 +2,20 @@ import { StyleSheet } from 'react-native';
 import { fontStyle, type ThemeTokens } from '../theme/tokens';
 
 const GUTTER = 16;
+/** Space under the sheet's footer, before any bottom inset. */
+export const SHEET_PADDING_BOTTOM = 8;
 
 const cache = new WeakMap<ThemeTokens, ReturnType<typeof create>>();
 
 const create = (t: ThemeTokens) =>
   StyleSheet.create({
-    sheetRoot: { flex: 1, justifyContent: 'flex-end' },
+    sheetRoot: { flex: 1 },
+    // The room above the keyboard (all of the screen while it's down); the panel sits at its bottom.
+    sheetRoom: {
+      flex: 1,
+      justifyContent: 'flex-end',
+      pointerEvents: 'box-none',
+    },
     sheetBackdrop: {
       ...StyleSheet.absoluteFill,
       backgroundColor: 'rgba(0, 0, 0, 0.4)',
@@ -16,7 +24,7 @@ const create = (t: ThemeTokens) =>
       borderTopLeftRadius: t.radius * 2,
       borderTopRightRadius: t.radius * 2,
       backgroundColor: t.background,
-      paddingBottom: 24,
+      paddingBottom: SHEET_PADDING_BOTTOM,
     },
     container: { width: '100%', paddingHorizontal: GUTTER },
     // In a sheet the body shrinks to the sheet's max height and scrolls.
@@ -30,7 +38,8 @@ const create = (t: ThemeTokens) =>
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
-      paddingTop: 8,
+      // Room between the sheet's top edge and the title.
+      paddingTop: 24,
       paddingBottom: 12,
     },
     title: {

package/src/components/field/RangeFields.tsx

@@ -8,7 +8,7 @@ import type { PickerStyles } from '../theme/styleKeys';
 import type { ThemeTokens } from '../theme/tokens';
 import type { LabelRenderProps } from '../types';
 import FieldMessages from './FieldMessages';
-import { formatRangeText } from './fieldText';
+import { formatRangeText, type DateTextFormatter } from './fieldText';
 import ValueField from './ValueField';
 
 export type RangeEnd = 'from' | 'to';
@@ -30,6 +30,8 @@ interface Props {
   errorMessage?: string;
   type: PickerType;
   dateFormat: string;
+  /** Writes the shown dates another way (as Hijri dates). Not used while typing. */
+  dateText?: DateTextFormatter;
   timeFormat: TimeFormat;
   yearRange?: { first: number; last: number };
   disabled?: boolean;
@@ -45,6 +47,8 @@ interface Props {
   tokens: ThemeTokens;
   styles?: PickerStyles;
   strings: PickerStrings;
+  /** The texts of the typed-input errors. Default `strings`. */
+  errorStrings?: PickerStrings;
   testID?: string;
 }
 
@@ -70,6 +74,7 @@ const RangeFields: React.FC<Props> = (props) => {
     errorMessage,
     type,
     dateFormat,
+    dateText,
     timeFormat,
     yearRange,
     disabled,
@@ -81,11 +86,13 @@ const RangeFields: React.FC<Props> = (props) => {
     tokens,
     styles,
     strings,
+    errorStrings,
     testID,
   } = props;
   const common = {
     type,
     dateFormat,
+    dateText,
     timeFormat,
     yearRange,
     renderLabel,
@@ -94,6 +101,7 @@ const RangeFields: React.FC<Props> = (props) => {
     tokens,
     styles,
     strings,
+    errorStrings,
     disabled,
   };
 
@@ -108,7 +116,9 @@ const RangeFields: React.FC<Props> = (props) => {
           type,
           dateFormat,
           timeFormat,
-          strings.rangeSeparator
+          strings.rangeSeparator,
+          dateText,
+          strings
         )}
         placeholder={placeholder}
         allowClear={allowClear}

package/src/components/field/SegmentedInput.tsx

@@ -12,10 +12,12 @@ import type {
   SegmentEditorAction,
   SegmentEditorState,
 } from '../../core/segmentEditor';
+import { toLatinDigits } from '../../core/digits';
 import type { Period, SegmentKey, SegmentSpec } from '../../core/segments';
 import type { PickerStrings } from '../theme/defaultStrings';
 import type { PickerStyles } from '../theme/styleKeys';
 import { MAX_FONT_SCALE } from '../theme/a11y';
+import { useNumerals } from '../theme/numerals';
 import type { ThemeTokens } from '../theme/tokens';
 import { buildFieldStyles } from './fieldStyles';
 
@@ -105,6 +107,7 @@ const SegmentedInput: React.FC<Props> = ({
   fieldLabel,
   testID,
 }) => {
+  const digits = useNumerals();
   // Each box's text as last rendered, and as it last reported. Fast input (a
   // hardware keyboard, autofill) sends the next character before React has
   // re-rendered, and the native box may ignore React's reset while it's
@@ -188,7 +191,7 @@ const SegmentedInput: React.FC<Props> = ({
           }}
           testID={testID ? `${testID}-segment-${spec.key}` : undefined}
           accessibilityLabel={labels[spec.key]}
-          value={text}
+          value={digits(text)}
           placeholder={placeholders[spec.key]}
           placeholderTextColor={tokens.placeholder}
           keyboardType="number-pad"
@@ -204,8 +207,10 @@ const SegmentedInput: React.FC<Props> = ({
               dispatch({ type: 'blur' });
           }}
           onKeyPress={onKeyPress}
-          onChangeText={(next) => {
+          onChangeText={(raw) => {
             claimFocus();
+            // An Arabic or Persian number pad types ٠–٩ / ۰–۹.
+            const next = toLatinDigits(raw);
             const { rendered, reported } = track;
             const before =
               reported !== undefined &&
@@ -287,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,19 +11,33 @@ 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';
 import type { ThemeTokens } from '../theme/tokens';
 import type { InstructionRenderProps, LabelRenderProps } from '../types';
 import FieldMessages from './FieldMessages';
 import {
+  formatValueParts,
   formatValueText,
   placeholderText,
   segmentErrorText,
+  type DateTextFormatter,
 } from './fieldText';
 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). */
@@ -32,6 +46,8 @@ export interface ValueFieldProps {
   displayText?: string;
   /** Date format, e.g. 'dd/MM/yyyy'. */
   dateFormat: string;
+  /** Writes the shown date another way (as a Hijri date). Not used while typing. */
+  dateText?: DateTextFormatter;
   timeFormat: TimeFormat;
   yearRange?: { first: number; last: number };
   /** Typed date + time segments. Otherwise the field shows text and opens the picker on tap. */
@@ -75,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;
 }
 
@@ -123,11 +141,13 @@ const DefaultInstruction: React.FC<
  * results go to `onTyped`, and the sheet decides what to do with them.
  */
 const ValueField: React.FC<ValueFieldProps> = (props) => {
+  const digits = useNumerals();
   const {
     type,
     value,
     displayText,
     dateFormat,
+    dateText,
     timeFormat,
     yearRange,
     allowTyping,
@@ -154,17 +174,20 @@ 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,
     { dateFormat, type, timeFormat, yearRange },
-    (parsed) => {
+    (parsed, fromOutside) => {
       setLastParsed(parsed);
-      onTyped?.(parsed);
+      // A value shown from outside (a calendar tap) isn't an edit.
+      if (!fromOutside) onTyped?.(parsed);
     }
   );
 
@@ -198,12 +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);
+    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 });
@@ -292,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],
-        ]}
-      >
-        {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,