Merge branch 'release-v1.5.0'

troberts-28 · Jan 9, 2024 · 98ce784 · 98ce784
2 parents 864c1c2 + 800436e
commit 98ce784
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -333,6 +333,7 @@ return (
 |           secondLabel            | Label for the seconds picker                          |                                                                                  String \| React.ReactElement                                                                                   |    s    |  false   |
 |          padWithNItems           | Number of items to pad the picker with on either side |                                                                                             Number                                                                                              |    1    |  false   |
 |          aggressivelyGetLatestDuration           | Set to True to ask DurationScroll to aggressively update the latestDuration ref |                                                                                             Boolean                                                                                              |    false    |  false   |
+|          allowFontScaling           | Allow font in the picker to scale with accessibility settings |                                                                                             Boolean                                                                                              |    false    |  false   |
 |          use12HourPicker           | Switch the hour picker to 12-hour format with an AM / PM label |                                                                                             Boolean                                                                                              |    false    |  false   |
 |          amLabel           | Set the AM label if using the 12-hour picker |                                                                                             String                                                                                              |    am    |  false   |
 |          pmLabel           | Set the PM label if using the 12-hour picker |                                                                                             String                                                                                              |    pm    |  false   |

diff --git a/package.json b/package.json
@@ -1,12 +1,12 @@
 {
     "name": "react-native-timer-picker",
-    "description": "A simple, flexible, performant duration picker for Expo React Native apps 🔥\n\nGreat for timers, alarms and duration inputs ⏰🕰️⏳",
+    "description": "A simple, flexible, performant duration picker for React Native apps 🔥\n\nGreat for timers, alarms and duration inputs ⏰🕰️⏳",
     "author": {
         "name": "Tim Roberts",
         "url": "https://github.com/troberts-28"
     },
     "license": "MIT",
-    "version": "1.4.0",
+    "version": "1.5.0",
     "main": "dist/commonjs/index.js",
     "types": "dist/typescript/src/index.d.ts",
     "scripts": {

diff --git a/src/components/TimerPicker/DurationScroll.tsx b/src/components/TimerPicker/DurationScroll.tsx
@@ -48,6 +48,7 @@ export type LimitType = {
 };
 
 interface DurationScrollProps {
+    allowFontScaling?: boolean;
     numberOfItems: number;
     label?: string | React.ReactElement;
     initialValue?: number;
@@ -83,6 +84,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             disableInfiniteScroll = false,
             limit,
             aggressivelyGetLatestDuration,
+            allowFontScaling = false,
             is12HourPicker,
             amLabel,
             pmLabel,
@@ -166,6 +168,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                         style={styles.pickerItemContainer}
                         testID="picker-item">
                         <Text
+                            allowFontScaling={allowFontScaling}
                             style={[
                                 styles.pickerItem,
                                 intItem > adjustedLimited.max ||
@@ -179,7 +182,9 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                             <View
                                 style={styles.pickerAmPmContainer}
                                 pointerEvents="none">
-                                <Text style={[styles.pickerAmPmLabel]}>
+                                <Text
+                                    style={[styles.pickerAmPmLabel]}
+                                    allowFontScaling={allowFontScaling}>
                                     {isAm ? amLabel : pmLabel}
                                 </Text>
                             </View>
@@ -190,6 +195,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             [
                 adjustedLimited.max,
                 adjustedLimited.min,
+                allowFontScaling,
                 amLabel,
                 is12HourPicker,
                 pmLabel,
@@ -364,7 +370,11 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                 />
                 <View style={styles.pickerLabelContainer} pointerEvents="none">
                     {typeof label === "string" ? (
-                        <Text style={styles.pickerLabel}>{label}</Text>
+                        <Text
+                            allowFontScaling={allowFontScaling}
+                            style={styles.pickerLabel}>
+                            {label}
+                        </Text>
                     ) : (
                         label ?? null
                     )}

diff --git a/src/components/TimerPicker/index.tsx b/src/components/TimerPicker/index.tsx
@@ -32,6 +32,7 @@ export interface TimerPickerRef {
 }
 
 export interface TimerPickerProps {
+    allowFontScaling?: boolean;
     onDurationChange?: (duration: {
         hours: number;
         minutes: number;
@@ -67,6 +68,7 @@ export interface TimerPickerProps {
 const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
     (
         {
+            allowFontScaling = false,
             onDurationChange,
             initialHours = 0,
             initialMinutes = 0,
@@ -167,6 +169,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                             hourLabel ?? (!use12HourPicker ? "h" : undefined)
                         }
                         initialValue={initialHours}
+                        allowFontScaling={allowFontScaling}
                         aggressivelyGetLatestDuration={
                             aggressivelyGetLatestDuration
                         }
@@ -195,6 +198,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                         numberOfItems={59}
                         label={minuteLabel ?? "m"}
                         initialValue={initialMinutes}
+                        allowFontScaling={allowFontScaling}
                         aggressivelyGetLatestDuration={
                             aggressivelyGetLatestDuration
                         }
@@ -221,6 +225,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                         numberOfItems={59}
                         label={secondLabel ?? "s"}
                         initialValue={initialSeconds}
+                        allowFontScaling={allowFontScaling}
                         aggressivelyGetLatestDuration={
                             aggressivelyGetLatestDuration
                         }

diff --git a/src/components/TimerPickerModal.styles.ts b/src/components/TimerPickerModal.styles.ts
@@ -1,16 +1,17 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { StyleSheet } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 
 import type { CustomTimerPickerStyles } from "./TimerPicker/TimerPicker.styles";
+import { ComponentProps } from "react";
 
 export interface CustomTimerPickerModalStyles extends CustomTimerPickerStyles {
-    container?: any;
-    contentContainer?: any;
-    buttonContainer?: any;
-    button?: any;
-    cancelButton?: any;
-    confirmButton?: any;
-    modalTitle?: any;
+    container?: ComponentProps<typeof View>;
+    contentContainer?: ComponentProps<typeof View>;
+    buttonContainer?: ComponentProps<typeof View>;
+    button?: ComponentProps<typeof Text>;
+    cancelButton?: ComponentProps<typeof Text>;
+    confirmButton?: ComponentProps<typeof Text>;
+    modalTitle?: ComponentProps<typeof Text>;
 }
 
 const DARK_MODE_BACKGROUND_COLOR = "#232323";

diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -83,6 +83,7 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
             secondLabel,
             padWithNItems = 1,
             disableInfiniteScroll = false,
+            allowFontScaling = false,
             use12HourPicker,
             amLabel,
             pmLabel,
@@ -219,6 +220,7 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
                             secondLabel={secondLabel}
                             padWithNItems={padWithNItems}
                             disableInfiniteScroll={disableInfiniteScroll}
+                            allowFontScaling={allowFontScaling}
                             use12HourPicker={use12HourPicker}
                             amLabel={amLabel}
                             pmLabel={pmLabel}