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

package/src/components/DateTimePicker.tsx

@@ -70,6 +70,7 @@ import RangeFields, { type RangeEnd } from './field/RangeFields';
 import ValueField from './field/ValueField';
 import { useKeyboardFold } from './hooks/useKeyboardFold';
 import { useOpenPicker } from './hooks/useOpenPicker';
+import { useScrollToTime } from './hooks/useScrollToTime';
 import { usePickerDraft } from './hooks/usePickerDraft';
 import { useTodayTick } from './hooks/useTodayTick';
 import TimeRows, { type PendingTimes } from './time/TimeRows';
@@ -138,6 +139,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     multiple,
     range,
     presentation = 'sheet',
+    scrollToTimeRef,
     visible,
     onOpen,
     onClose,
@@ -188,6 +190,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     calendarSwitch,
     onCalendarSystemChange,
     dualDefaultTab = 'gregory',
+    fieldCalendar = 'picked',
     hijriLocale = 'ar-SA',
     renderCalendarSwitch,
     showToday = false,
@@ -432,12 +435,13 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
 
   const rangeLayout = range?.layout ?? 'singleField';
   const multipleTimeMode = multiple?.timeMode ?? 'shared';
+  const startsEmpty = newDayTime === 'empty';
   const draftOptions = useMemo((): DraftOptions => {
     return {
       type,
       zone,
       adapter,
-      defaultTime: DEFAULT_TIME,
+      defaultTime: startsEmpty ? null : DEFAULT_TIME,
       multiple: {
         timeMode: multiple?.timeMode,
         maxSelections: multiple?.maxSelections,
@@ -453,6 +457,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     type,
     zone,
     adapter,
+    startsEmpty,
     multiple?.timeMode,
     multiple?.maxSelections,
     range?.allowSameDay,
@@ -672,6 +677,28 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
   const previewIssue = validateDraft(preview, draftOptions);
 
   const d = draft.draft;
+  // Once a calendar tap picks the date (both ends of a range), the sheet (or
+  // the app's ScrollView around an inline picker) scrolls the time section
+  // into view.
+  const datePicked =
+    d.mode === 'single'
+      ? !!d.slot.value
+      : d.mode === 'range'
+        ? !!d.from.value && !!d.to.value
+        : d.slots.length > 0;
+  const {
+    scrollRef,
+    timeRef,
+    request: revealTime,
+  } = useScrollToTime(
+    type !== 'datetime'
+      ? false
+      : isInline
+        ? !!scrollToTimeRef
+        : (sheetOptions?.scrollToTime ?? true),
+    datePicked,
+    isInline ? scrollToTimeRef : undefined
+  );
   /** The values a draft would save, with a shared time applied. */
   const valuesOf = (dr: Draft): (DateTimeValue | null)[] => {
     if (dr.mode === 'single') return [dr.slot.value];
@@ -928,7 +955,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
   }, [closePicker]);
 
   // A typed date with no time yet gets one the way a tapped day does: the fixed
-  // newDayTime, else a time already typed in the time row, else now.
+  // newDayTime, else a time already typed in the time row, else now (or none).
   const withFilledTime = (
     parsed: ParsedSegments,
     key: 'single' | RangeEnd
@@ -937,7 +964,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     (parsed.dateOnly
       ? {
           date: parsed.dateOnly,
-          time: fixedTime ?? pending[key] ?? nowTime(),
+          time: fixedTime ?? pending[key] ?? newTime(),
         }
       : null);
 
@@ -967,7 +994,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
   };
 
   // A fixed time for every newly picked day (wins over a typed time and over "now").
-  const fixedTime = newDayTime ?? null;
+  const fixedTime = typeof newDayTime === 'object' ? newDayTime : null;
 
   // A day picked on an empty date-time starts at the current time, moved up to
   // the next allowed minute step. An existing time is kept.
@@ -978,6 +1005,11 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     const capped = Math.min(minutes, 23 * 60 + 60 - step);
     return { hour: Math.floor(capped / 60), minute: capped % 60 };
   }, [now, zone, minuteStep]);
+  /** A new day's time when nothing fixed or typed: now, or none with newDayTime 'empty'. */
+  const newTime = useCallback(
+    (): Time | null => (startsEmpty ? null : nowTime()),
+    [startsEmpty, nowTime]
+  );
 
   // A range end picked on the start's day starts an hour after the start (at
   // most the day's latest allowed time, or its last step), so the range isn't
@@ -987,10 +1019,10 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     from: DateTimeValue | null,
     day: CalendarDate,
     typed: Time | null | undefined
-  ): Time => {
+  ): Time | null => {
     if (!fixedTime && typed) return typed;
-    const time = fixedTime ?? nowTime();
-    if (!from?.time || !isSameDay(from.date, day)) return time;
+    const time = fixedTime ?? newTime();
+    if (!time || !from?.time || !isSameDay(from.date, day)) return time;
     const start = from.time.hour * 60 + from.time.minute;
     if (time.hour * 60 + time.minute > start) return time;
     // Within the day's allowed hours when it has them.
@@ -1018,6 +1050,8 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
         draft.clear();
         resetSelectionUi();
       }
+      // A multiple picker scrolls for its first date only, so more can be picked.
+      if (cur.mode !== 'multiple' || cur.slots.length === 0) revealTime();
       if (cur.mode === 'range') {
         if (rangeLayout === 'fromTo') {
           setEndPicked(false);
@@ -1032,7 +1066,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
             const end = moveNearest ? nearest : 'from';
             setTypingBlock('from', false);
             setTypingBlock('to', false);
-            draft.selectDay(day, fixedTime ?? times[end] ?? nowTime());
+            draft.selectDay(day, fixedTime ?? times[end] ?? newTime());
             setActiveEnd(moveNearest ? nearest : 'to');
             return;
           }
@@ -1051,7 +1085,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
             end1,
             end1 === 'to'
               ? endTimeFor(cur.from.value, day, times.to)
-              : (fixedTime ?? times.from ?? nowTime())
+              : (fixedTime ?? times.from ?? newTime())
           );
           // The start tapped again where a range can't be one day deselects
           // it, so the next tap picks the start again.
@@ -1073,7 +1107,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
           day,
           end === 'to' && !cur.to.value
             ? endTimeFor(cur.from.value, day, times.to)
-            : (fixedTime ?? times[end] ?? nowTime())
+            : (fixedTime ?? times[end] ?? newTime())
         );
         return;
       }
@@ -1087,18 +1121,18 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
           setActiveDay(day);
           return;
         }
-        draft.selectDay(day, fixedTime ?? nowTime());
+        draft.selectDay(day, fixedTime ?? newTime());
         if (perDate) setActiveDay(picked ? null : day);
         return;
       }
       setTypingBlock('single', false);
-      draft.selectDay(day, fixedTime ?? times.single ?? nowTime());
+      draft.selectDay(day, fixedTime ?? times.single ?? newTime());
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps -- valuesOf reads only `d` and props listed here
     [
       d,
       draft,
-      nowTime,
+      newTime,
       rangeLayout,
       activeEnd,
       activeDay,
@@ -1115,6 +1149,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
       draftOptions,
       minuteStep,
       constraints,
+      revealTime,
     ]
   );
 
@@ -1271,9 +1306,11 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
       ? (v) =>
           hijriDateText(v.date, hijriLocale) ?? formatDateText(v, dateFormat)
       : undefined;
-  const savedDateText = dateTextFor(savedSystem);
+  // The calendar the on-screen field writes the saved value in.
+  const fieldSystem = fieldCalendar === 'gregory' ? 'gregory' : savedSystem;
+  const savedDateText = dateTextFor(fieldSystem);
   const draftDateText = dateTextFor(draftSystem);
-  const savedStrings = stringsFor(savedSystem);
+  const savedStrings = stringsFor(fieldSystem);
   const draftStrings = stringsFor(draftSystem);
   // Error messages inside the picker follow the tab on screen; the on-screen
   // field's keep `strings`.
@@ -1353,7 +1390,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
     type,
     mode,
     value,
-    displayText: digitsFor(savedSystem)(
+    displayText: digitsFor(fieldSystem)(
       savedText ??
         formatValueText(
           savedSingle,
@@ -1698,9 +1735,18 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
       <NumeralsContext.Provider value={digitsFor(shownSystem)}>
         {calendar}
       </NumeralsContext.Provider>
-      <NumeralsContext.Provider value={digitsFor(shownSystem)}>
-        {mirrored(timeRow)}
-      </NumeralsContext.Provider>
+      {timeRow == null ? null : (
+        // Measured for the scroll to the time (sheet.scrollToTime).
+        <View
+          ref={timeRef}
+          collapsable={false}
+          testID={testID ? `${testID}-time-section` : undefined}
+        >
+          <NumeralsContext.Provider value={digitsFor(shownSystem)}>
+            {mirrored(timeRow)}
+          </NumeralsContext.Provider>
+        </View>
+      )}
       {validationMessage ? (
         <FieldMessages
           error={validationMessage}
@@ -1716,7 +1762,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
   );
 
   return (
-    <NumeralsContext.Provider value={digitsFor(savedSystem)}>
+    <NumeralsContext.Provider value={digitsFor(fieldSystem)}>
       {trigger}
       <PickerContainer
         presentation={presentation}
@@ -1724,6 +1770,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
         onRequestClose={close}
         renderSheet={renderSheet}
         sheet={sheetOptions}
+        scrollRef={scrollRef}
         state={state}
         header={header}
         title={title ?? (isInline ? undefined : strings.titleDate)}

package/src/components/container/PickerContainer.tsx

@@ -36,6 +36,7 @@ const PickerContainer: React.FC<PickerContainerProps> = ({
     fixedHeader: sheet?.fixedHeader,
     fixedFooter: sheet?.fixedFooter,
     fill: !renderSheet && sheet?.height !== undefined,
+    scrollProps: sheet?.scrollProps,
   });
 
   if (presentation === 'inline') {

package/src/components/container/PickerLayout.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Pressable, ScrollView, Text, View } from 'react-native';
-import type { PickerState, Slot } from '../types';
+import type { ScrollViewRef } from '../nativeTypes';
+import type { PickerState, SheetScrollProps, Slot } from '../types';
 import type { PickerStyles } from '../theme/styleKeys';
 import { buildContainerStyles } from './containerStyles';
 
@@ -27,6 +28,10 @@ export interface PickerLayoutProps {
   fixedFooter?: boolean;
   /** The sheet has a fixed height: the body fills it. */
   fill?: boolean;
+  /** Sheet only: passed to the body's ScrollView over its defaults. */
+  scrollProps?: SheetScrollProps;
+  /** Sheet only: the body's ScrollView. */
+  scrollRef?: React.Ref<ScrollViewRef>;
 }
 
 const renderSlot = (
@@ -58,6 +63,8 @@ export const buildPickerLayout = ({
   fixedHeader = true,
   fixedFooter = true,
   fill,
+  scrollProps,
+  scrollRef,
 }: PickerLayoutProps): { body: React.ReactNode; footer: React.ReactNode } => {
   const s = buildContainerStyles(state.tokens);
 
@@ -129,12 +136,14 @@ export const buildPickerLayout = ({
       {headerScrolls ? null : headerNode}
       {scrollBody ? (
         <ScrollView
+          ref={scrollRef}
           testID={testID ? `${testID}-scroll` : undefined}
           style={s.scroll}
           keyboardShouldPersistTaps="handled"
           nestedScrollEnabled
           bounces={false}
           showsVerticalScrollIndicator={false}
+          {...scrollProps}
         >
           {headerScrolls ? headerNode : null}
           {content}

package/src/components/field/KeyboardAccessoryBar.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { InputAccessoryView, Platform, StyleSheet, View } from 'react-native';
+import type { ThemeTokens } from '../theme/tokens';
+
+interface Props {
+  /** The `inputAccessoryViewID` of the one box it serves. */
+  nativeID: string;
+  tokens: ThemeTokens;
+}
+
+/**
+ * iOS only: an empty solid bar above a box's number pad. Without it React
+ * Native adds its own Done bar, which is see-through on newer iOS, so a sheet
+ * resting on the keyboard showed the screen behind it.
+ */
+const KeyboardAccessoryBar: React.FC<Props> = ({ nativeID, tokens }) => {
+  if (Platform.OS !== 'ios') return null;
+  return (
+    <InputAccessoryView nativeID={nativeID}>
+      <View
+        style={[
+          styles.bar,
+          {
+            height: tokens.touchTarget,
+            backgroundColor: tokens.surface,
+            borderTopColor: tokens.border,
+          },
+        ]}
+      />
+    </InputAccessoryView>
+  );
+};
+
+const styles = StyleSheet.create({
+  bar: { borderTopWidth: StyleSheet.hairlineWidth },
+});
+
+export default KeyboardAccessoryBar;

package/src/components/field/SegmentedInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useId, useMemo, useRef } from 'react';
 import {
   Pressable,
   StyleSheet,
@@ -20,6 +20,7 @@ import { MAX_FONT_SCALE } from '../theme/a11y';
 import { useNumerals } from '../theme/numerals';
 import type { ThemeTokens } from '../theme/tokens';
 import { buildFieldStyles } from './fieldStyles';
+import KeyboardAccessoryBar from './KeyboardAccessoryBar';
 
 interface Props {
   state: SegmentEditorState;
@@ -93,8 +94,8 @@ export const changeToActions = (
 
 /**
  * The typed field: one box per segment in locale order, plus an AM/PM switch for
- * 12-hour date-times. Number pad, with a "Done" bar on iOS (its number pad has no
- * return key).
+ * 12-hour date-times. Number pad, with an empty solid bar above it on iOS (so
+ * React Native adds no see-through Done bar).
  */
 const SegmentedInput: React.FC<Props> = ({
   state,
@@ -108,6 +109,7 @@ const SegmentedInput: React.FC<Props> = ({
   testID,
 }) => {
   const digits = useNumerals();
+  const barId = useId();
   // 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
@@ -197,10 +199,9 @@ const SegmentedInput: React.FC<Props> = ({
           keyboardType="number-pad"
           editable={!disabled}
           contextMenuHidden
-          // iOS adds a Done button above the number pad for every box; it
-          // closes the keyboard (and blurs the box).
-          returnKeyType="done"
-          inputAccessoryViewButtonLabel={strings.done}
+          // iOS: this box's own solid bar (below), so React Native adds no
+          // see-through Done bar.
+          inputAccessoryViewID={`${barId}-${spec.key}`}
           onFocus={() => dispatch({ type: 'focus', key: spec.key })}
           onBlur={() => {
             if ((getState?.() ?? state).focused === spec.key)
@@ -228,6 +229,10 @@ const SegmentedInput: React.FC<Props> = ({
             isFocused && [s.segmentFocused, styles?.fieldSegmentFocused],
           ]}
         />
+        <KeyboardAccessoryBar
+          nativeID={`${barId}-${spec.key}`}
+          tokens={tokens}
+        />
       </React.Fragment>
     );
   };

package/src/components/hooks/useScrollToTime.ts

@@ -0,0 +1,99 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type RefObject,
+} from 'react';
+import type { ScrollViewRef, ViewRef } from '../nativeTypes';
+import { useReduceMotion } from './useReduceMotion';
+
+export interface ScrollToTime {
+  /** The sheet body's ScrollView. */
+  scrollRef: RefObject<ScrollViewRef | null>;
+  /** The time section. */
+  timeRef: RefObject<ViewRef | null>;
+  /** Called from the calendar tap that picks the date. */
+  request: () => void;
+}
+
+/** Rounding in the measured positions, in points. */
+const SLACK = 1;
+
+/**
+ * Scrolls `scroll` so `section` shows: just far enough to show all of it (its
+ * top, when it's taller than the view), or to the end of the content with
+ * `toEnd`. Nothing moves while it already shows in full.
+ */
+export const scrollSectionIntoView = (
+  scroll: ScrollViewRef,
+  section: ViewRef,
+  toEnd: boolean,
+  animated: boolean
+): void => {
+  scroll.measureInWindow((_vx, viewTop, _vw, viewHeight) => {
+    section.measureInWindow((_x, top, _w, height) => {
+      // Not laid out, or folded away.
+      if (!viewHeight || !height) return;
+      const fromTop = top - viewTop;
+      if (fromTop >= -SLACK && fromTop + height <= viewHeight + SLACK) return;
+      if (toEnd) {
+        scroll.scrollToEnd({ animated });
+        return;
+      }
+      // Where the section sits in the scrolled content.
+      const content = scroll.getInnerViewRef?.();
+      if (!content) return;
+      section.measureLayout(
+        content,
+        (_cx, y) => {
+          const target =
+            fromTop < 0 || height > viewHeight ? y : y + height - viewHeight;
+          scroll.scrollTo({ y: Math.max(0, target), animated });
+        },
+        () => {}
+      );
+    });
+  });
+};
+
+/**
+ * The sheet's scroll to the time section once a calendar tap picks the date.
+ * `request()` from the tap; the scroll runs after that render, when `ready`
+ * (the picked date is complete) holds for it. Refs go on the body's ScrollView
+ * and the time section; `outerRef` (an inline picker's own ScrollView, from
+ * the app) is scrolled instead when given. 'end' scrolls to the end of the
+ * body; false never scrolls.
+ */
+export const useScrollToTime = (
+  mode: boolean | 'end',
+  ready: boolean,
+  outerRef?: RefObject<ScrollViewRef | null>
+): ScrollToTime => {
+  const scrollRef = useRef<ScrollViewRef>(null);
+  const timeRef = useRef<ViewRef>(null);
+  const reduceMotion = useReduceMotion();
+  const [tapped, setTapped] = useState(0);
+  const on = useRef(mode !== false);
+  on.current = mode !== false;
+  const request = useCallback(() => {
+    if (on.current) setTapped((n) => n + 1);
+  }, []);
+  useEffect(() => {
+    if (!tapped || !ready || mode === false) return;
+    // A frame after the tap, on iOS and Android alike: the old architecture
+    // lays the tap's changes out after this effect, so measuring now could
+    // read the layout before them; and Android runs a scroll sent in the frame
+    // that grows the content (a per-date row showing) before it grows, so the
+    // scroll would stop short.
+    const frame = requestAnimationFrame(() => {
+      const scroll = outerRef?.current ?? scrollRef.current;
+      const section = timeRef.current;
+      if (scroll && section)
+        scrollSectionIntoView(scroll, section, mode === 'end', !reduceMotion);
+    });
+    return () => cancelAnimationFrame(frame);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- once per tap
+  }, [tapped]);
+  return { scrollRef, timeRef, request };
+};

package/src/components/nativeTypes.ts

@@ -1,5 +1,5 @@
 import type { ComponentRef } from 'react';
-import type { ScrollView, TextInput, TextInputProps } from 'react-native';
+import type { ScrollView, TextInput, TextInputProps, View } from 'react-native';
 
 /**
  * React Native types spelled so every supported version has them: 0.88 added
@@ -8,6 +8,7 @@ import type { ScrollView, TextInput, TextInputProps } from 'react-native';
  */
 export type TextInputRef = ComponentRef<typeof TextInput>;
 export type ScrollViewRef = ComponentRef<typeof ScrollView>;
+export type ViewRef = ComponentRef<typeof View>;
 export type KeyPressEvent = Parameters<
   NonNullable<TextInputProps['onKeyPress']>
 >[0];

package/src/components/theme/defaultStrings.ts

@@ -8,6 +8,7 @@ export interface PickerStrings {
   reset: string;
   clear: string;
   today: string;
+  /** No longer shown (the iOS number-pad bar is empty); kept so existing `strings` objects still type-check. */
   done: string;
   time: string;
   startTime: string;

package/src/components/time/TypedTime.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import { Pressable, Text, TextInput, View } from 'react-native';
+import React, { useId, useRef } from 'react';
+import { Platform, Pressable, Text, TextInput, View } from 'react-native';
+import KeyboardAccessoryBar from '../field/KeyboardAccessoryBar';
 import type { TextInputRef } from '../nativeTypes';
 import type { TimeBounds } from '../../core/constraints';
 import type { Period } from '../../core/segments';
@@ -39,7 +40,7 @@ const PERIODS: Period[] = ['AM', 'PM'];
 
 /**
  * `[hh] : [mm] [AM | PM]`, or `[HH] : [mm]` in 24-hour. The boxes are plain
- * TextInputs; the row (TimeRow) owns their values. Number pad, with a Done bar
+ * TextInputs; the row (TimeRow) owns their values. Number pad, with a solid bar
  * on iOS. The AM/PM side that can't hold an allowed time is disabled.
  */
 const TypedTime: React.FC<Props> = ({
@@ -61,10 +62,27 @@ const TypedTime: React.FC<Props> = ({
   testID,
 }) => {
   const digits = useNumerals();
+  const barId = useId();
   const s = buildTimeStyles(tokens);
+  const inputs = useRef<Partial<Record<TimeKey, TextInputRef | null>>>({});
+
+  // Android: a TextInput keeps any drag that starts on it, so the sheet can't
+  // scroll from a box. The boxes ignore touches and their wrapper takes them:
+  // a drag scrolls the sheet, a tap focuses the box (and brings the keyboard
+  // back). None of this changes with focus: flipping a box's touch handling
+  // as it gained focus made Android pass focus on to the next box, round and
+  // round. The wrapper is never focusable itself.
+  const passTouches = Platform.OS === 'android' && !disabled;
 
   const box = (key: TimeKey) => (
-    <View style={s.boxWrap}>
+    <Pressable
+      style={s.boxWrap}
+      accessible={false}
+      focusable={false}
+      disabled={!passTouches}
+      onPress={() => inputs.current[key]?.focus()}
+      testID={testID ? `${testID}-${key}-wrap` : undefined}
+    >
       <View
         style={[
           s.boxContainer,
@@ -73,9 +91,12 @@ const TypedTime: React.FC<Props> = ({
           hasError && [s.boxError, styles?.timeBoxError],
         ]}
       >
-        <View style={s.boxInner}>
+        <View style={s.boxInner} pointerEvents={passTouches ? 'none' : 'auto'}>
           <TextInput
-            ref={(r) => setRef(key, r)}
+            ref={(r) => {
+              inputs.current[key] = r;
+              setRef(key, r);
+            }}
             testID={testID ? `${testID}-${key}` : undefined}
             accessibilityLabel={
               key === 'hour' ? strings.a11yHour : strings.a11yMinute
@@ -99,9 +120,8 @@ const TypedTime: React.FC<Props> = ({
             contextMenuHidden
             editable={!disabled}
             underlineColorAndroid="transparent"
-            // iOS adds a Done button above the number pad for each box.
-            returnKeyType="done"
-            inputAccessoryViewButtonLabel={strings.done}
+            // iOS: this box's own solid bar (below).
+            inputAccessoryViewID={`${barId}-${key}`}
             onChangeText={(text) => onChangeBox(key, text)}
             onFocus={() => onFocusBox(key)}
             onBlur={() => onBlurBox(key)}
@@ -110,9 +130,10 @@ const TypedTime: React.FC<Props> = ({
             }}
             style={[s.boxText, styles?.timeBoxText, s.boxInput]}
           />
+          <KeyboardAccessoryBar nativeID={`${barId}-${key}`} tokens={tokens} />
         </View>
       </View>
-    </View>
+    </Pressable>
   );
 
   return (