When padWithNItems is set, the initial value of hours, minutes, and seconds is offset by padWithNItems.

[lindseycadwell]

For example, when our value is hours, minutes, seconds = 0 and padWithNItems is set to 2, the initial value of the Duration Picker is 2 hours 2 minutes and 2 seconds.

<TimerPickerModal initialValue={value} visible={isVisible} setIsVisible={setIsVisible} onConfirm={(pickedDuration) => { setIsVisible(false) if (onChange) { onChange(pickedDuration) } }} onCancel={() => setIsVisible(false)} modalTitle="Duration" hourLabel="hr " minuteLabel="min " secondLabel="sec" padWithNItems={2} hourLimit={hourLimit} closeOnOverlayPress={true} hideSeconds={!includeSeconds} />

styles in case they are somehow relevant:
`LinearGradient={LinearGradient}
modalProps={{
overlayOpacity: 0.2,

      contentStyle: {
        flexDirection: "row",
        alignSelf: "stretch",
        alignItems: "flex-end",
      },
    }}
    styles={{
      container: {
        width: "100%",
        shadowColor: "#123E77",
        shadowOffset: { width: 0, height: 5 },
        shadowOpacity: 0.15,
        shadowRadius: 10,
        elevation: 10,
      },
      contentContainer: {
        width: "100%",
        overflow: "hidden",
        padding: 0,
        borderTopLeftRadius: 15,
        borderTopRightRadius: 15,
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
        backgroundColor: theme.colors.surface,
        paddingBottom: bottomInset,
      },
      modalTitle: {
        alignSelf: "stretch",
        textAlign: "left",
        fontSize: 18,
        lineHeight: 18,
        fontFamily: "InterSemiBold",
        marginBottom: 5,
        paddingTop: 25,
        paddingBottom: 11,
        paddingLeft: 15,
        color: theme.colors.onSurface,
      },
      pickerContainer: {
        alignSelf: "stretch",
        justifyContent: "center",
        marginLeft: -30,
        marginRight: 0,
        marginBottom: -10,

        paddingTop: 10,
        borderTopWidth: 2 / PixelRatio.get(),
        borderTopColor: theme.colors.outlineVariant,

        paddingBottom: 10,
        borderBottomWidth: 2 / PixelRatio.get(),
        borderBottomColor: theme.colors.outlineVariant,

        backgroundColor: theme.colors.surface,
      },
      pickerItemContainer: {
        width: 130,
      },
      pickerItem: {
        fontSize: 24,
        fontFamily: "InterMedium",
        color: theme.colors.onSurface,
      },
      pickerLabel: {
        fontSize: 16,
        fontFamily: "InterMedium",
        color: theme.colors.onSurface,
      },
      buttonContainer: {
        alignSelf: "stretch",
        flexDirection: "row",
        justifyContent: "center",
        marginBottom: 16,
        paddingHorizontal: 16,
        gap: 16,
      },
      button: {
        paddingVertical: 8,
        marginHorizontal: 0,

        fontSize: 15,
        lineHeight: 22,
        fontFamily: "InterMedium",
        textAlign: "center",
      },
      cancelButton: {
        color: theme.colors.onSurface,
        borderRadius: (theme.roundness ?? 0) * 5,
        borderColor: theme.colors.outlineVariant,
      },
      confirmButton: {
        color: theme.colors.onPrimary,
        backgroundColor: theme.colors.primary,
        borderRadius: (theme.roundness ?? 0) * 5,
        borderColor: theme.colors.outlineVariant,
      },
    }}
    buttonTouchableOpacityProps={{ style: { flex: 1 } }}`

[troberts-28]

Hey @lindseycadwell, thank you for raising this. Will get this fixed!

[troberts-28]

Have addressed this issue in v1.10.3 🙌

Let me know how you get on!

[lindseycadwell]

Looks like it works now. Thanks for the quick fix!