Duration & timer picker

A workout form with two lengths of time: the session, in 5-minute steps from 10 minutes to 3 hours, and the rest between sets, in minutes and seconds. Both are DurationPickerFields: a bottom sheet on iOS and Android, a dropdown under the field on the web, and nothing changes until the user confirms.

Loading…

Platform

Props

presentation

showSeconds

variant

disabled

import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { DurationPickerField, formatDuration } from '@elik56a/react-native-pickers';

export default function Workout() {
  const [session, setSession] = useState(45 * 60);
  const [rest, setRest] = useState(90);
  return (
    <View style={styles.form}>
      <DurationPickerField
        label="Session"
        value={session}
        onConfirm={setSession}
        min={10 * 60}
        max={3 * 3600}
        minuteInterval={5}
      />
      <DurationPickerField
        label="Rest between sets"
        title="Rest"
        value={rest}
        onConfirm={setRest}
        showHours={false}
        showSeconds
        min={15}
        max={5 * 60}
        secondInterval={15}
      />
      <Text style={styles.summary}>
        {Math.floor(session / (rest + 60))} sets of 1 min with {formatDuration(rest)} rest
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  form: { gap: 12 },
  summary: { color: '#6E685E', textAlign: 'center' },
});

How it works

• The value is seconds. 45 * 60 goes in, and onConfirm hands back a number of seconds, ready to store or to start a timer with.
• min and max dim what's out of range, so the session can't be under 10 minutes and the rest can't be 0.
• showHours={false} leaves minutes and seconds for short times. Without hours, minutes count past 59.
• formatDuration writes seconds as the field shows them, such as 1 min 30 s, for any text of your own.

For other units, such as feet and inches or kilograms, build the wheels with MultiWheelPicker and a suffix on each column.