📝 Make use of new styles in examples

Author: troberts-28

README.md

@@ -13,6 +13,7 @@ Works with Expo and bare React Native apps ✅
 
 Includes iOS-style haptic and audio feedback 🍏
 
+- [React Native Timer Picker ⏰🕰️⏳](#react-native-timer-picker-️)
   - [Demos 📱](#demos-)
   - [Installation 🚀](#installation-)
     - [Peer Dependencies 👶](#peer-dependencies-)
@@ -289,6 +290,9 @@ return (
             setIsVisible={setShowPicker}
             styles={{
                 theme: "light",
+                pickerColumnWidth: {
+                    hours: 90,
+                },
             }}
             use12HourPicker
             visible={showPicker}
@@ -426,6 +430,8 @@ return (
             setIsVisible={setShowPicker}
             styles={{
                 theme: "dark",
+                pickerLabelGap: 10,
+                text: { fontSize: 18 },
             }}
             visible={showPicker}
         />

examples/example-bare/App.tsx

@@ -173,6 +173,9 @@ export default function App() {
           pickerFeedback={pickerFeedback}
           setIsVisible={setShowPickerExample2}
           styles={{
+            pickerColumnWidth: {
+              hours: 90,
+            },
             theme: "light",
           }}
           use12HourPicker
@@ -217,6 +220,8 @@ export default function App() {
           pickerFeedback={pickerFeedback}
           setIsVisible={setShowPickerExample3}
           styles={{
+            pickerLabelGap: 10,
+            text: { fontSize: 18 },
             theme: "dark",
           }}
           visible={showPickerExample3}

examples/example-expo/App.tsx

@@ -210,7 +210,11 @@ export default function App() {
           }}
           pickerFeedback={pickerFeedback}
           setIsVisible={setShowPickerExample3}
-          styles={{ theme: "dark" }}
+          styles={{
+            pickerLabelGap: 10,
+            text: { fontWeight: "bold" },
+            theme: "dark",
+          }}
           visible={showPickerExample3}
         />
       </View>

src/components/TimerPickerModal/TimerPickerModal.tsx

@@ -14,11 +14,9 @@ import Modal from "../Modal";
 import TimerPicker from "../TimerPicker";
 import type { TimerPickerRef } from "../TimerPicker";
 import type { PerColumnValue, PickerColumn } from "../TimerPicker/styles";
-import { generateStyles } from "./styles";
+import { DEFAULT_COLUMN_WIDTH, generateStyles } from "./styles";
 import type { TimerPickerModalRef, TimerPickerModalProps } from "./types";
 
-const DEFAULT_COLUMN_WIDTH = 58;
-
 const resolveColumnWidth = (
   pickerColumnWidth: PerColumnValue | undefined,
   column: PickerColumn

src/components/TimerPickerModal/styles.ts

@@ -3,6 +3,8 @@ import type { DimensionValue, TextStyle, ViewStyle } from "react-native";
 
 import type { CustomTimerPickerStyles } from "../TimerPicker/styles";
 
+export const DEFAULT_COLUMN_WIDTH = 70;
+
 export interface CustomTimerPickerModalStyles extends CustomTimerPickerStyles {
   button?: TextStyle;
   buttonContainer?: ViewStyle;
@@ -39,7 +41,10 @@ export const generateStyles = (
   const totalColumnWidth = variables.totalColumnWidth;
   const modalPadding = (customContentContainerStyle?.paddingHorizontal as number) ?? 20;
   const labelOverhang = 20;
-  const computedWidth = Math.max(116, totalColumnWidth + modalPadding * 2 + labelOverhang);
+  const computedWidth = Math.max(
+    DEFAULT_COLUMN_WIDTH * 2,
+    totalColumnWidth + modalPadding * 2 + labelOverhang
+  );
 
   return StyleSheet.create({
     button: {