Add support for custom buttons

README.md

@@ -13,37 +13,38 @@ 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-)
-      - [Linear Gradient](#linear-gradient)
-      - [Masked View](#masked-view)
-  - [Examples 😎](#examples-)
-    - [Timer Picker Modal (Dark Mode) 🌚](#timer-picker-modal-dark-mode-)
-    - [Timer Picker Modal (Light Mode) 🌞](#timer-picker-modal-light-mode-)
-    - [Timer Picker with Transparent Fade-Out (Dark Mode) 🌒](#timer-picker-with-transparent-fade-out-dark-mode-)
-    - [Timer Picker with Customisation (Light Mode) 🌔](#timer-picker-with-customisation-light-mode-)
-  - [Props 💅](#props-)
-    - [TimerPicker ⏲️](#timerpicker-️)
-      - [Custom Styles 👗](#custom-styles-)
-      - [Performance](#performance)
-      - [Custom FlatList](#custom-flatlist)
-    - [TimerPickerModal ⏰](#timerpickermodal-)
-      - [Custom Styles 👕](#custom-styles--1)
-  - [Methods 🔄](#methods-)
-    - [TimerPicker](#timerpicker)
-    - [TimerPickerModal](#timerpickermodal)
-  - [Picker Feedback 📳🔉](#picker-feedback-)
-    - [Audio Feedack](#audio-feedack)
-    - [Haptic Feedback](#haptic-feedback)
-    - [Feedback Example](#feedback-example)
-    - [Expo-Specific Audio/Haptic Feedback (DEPRECATED)](#expo-specific-audiohaptic-feedback-deprecated)
-  - [Contributing 🧑‍🤝‍🧑](#contributing-)
-    - [Dev Setup](#dev-setup)
-    - [GitHub Guidelines](#github-guidelines)
-  - [Limitations ⚠](#limitations-)
-  - [License 📝](#license-)
+-   [React Native Timer Picker ⏰🕰️⏳](#react-native-timer-picker-️)
+    -   [Demos 📱](#demos-)
+    -   [Installation 🚀](#installation-)
+        -   [Peer Dependencies 👶](#peer-dependencies-)
+            -   [Linear Gradient](#linear-gradient)
+            -   [Masked View](#masked-view)
+    -   [Examples 😎](#examples-)
+        -   [Timer Picker Modal (Dark Mode) 🌚](#timer-picker-modal-dark-mode-)
+        -   [Timer Picker Modal (Light Mode) 🌞](#timer-picker-modal-light-mode-)
+        -   [Timer Picker with Transparent Fade-Out (Dark Mode) 🌒](#timer-picker-with-transparent-fade-out-dark-mode-)
+        -   [Timer Picker with Customisation (Light Mode) 🌔](#timer-picker-with-customisation-light-mode-)
+        -   [Timer Picker Modal with Custom Buttons 🎨](#timer-picker-modal-with-custom-buttons-)
+    -   [Props 💅](#props-)
+        -   [TimerPicker ⏲️](#timerpicker-️)
+            -   [Custom Styles 👗](#custom-styles-)
+            -   [Performance](#performance)
+            -   [Custom FlatList](#custom-flatlist)
+        -   [TimerPickerModal ⏰](#timerpickermodal-)
+            -   [Custom Styles 👕](#custom-styles--1)
+    -   [Methods 🔄](#methods-)
+        -   [TimerPicker](#timerpicker)
+        -   [TimerPickerModal](#timerpickermodal)
+    -   [Picker Feedback 📳🔉](#picker-feedback-)
+        -   [Audio Feedack](#audio-feedack)
+        -   [Haptic Feedback](#haptic-feedback)
+        -   [Feedback Example](#feedback-example)
+        -   [Expo-Specific Audio/Haptic Feedback (DEPRECATED)](#expo-specific-audiohaptic-feedback-deprecated)
+    -   [Contributing 🧑‍🤝‍🧑](#contributing-)
+        -   [Dev Setup](#dev-setup)
+        -   [GitHub Guidelines](#github-guidelines)
+    -   [Limitations ⚠](#limitations-)
+    -   [License 📝](#license-)
 
 <br>
 
@@ -59,6 +60,9 @@ Includes iOS-style haptic and audio feedback 🍏
     <img src="demos/example3.gif" width="250" height="550" style="margin-right:50px"/>
     <img src="demos/example4.gif" width="250" height="550"/>
 </p>
+<p>
+    <img src="demos/example5.gif" width="250" height="550" style="margin-right:50px"/>
+</p>
 
 <br>
 
@@ -399,6 +403,141 @@ return (
 
 <img src="demos/example4.gif" width="250" height="550"/>
 
+### Timer Picker Modal with Custom Buttons 🎨
+
+```jsx
+import { TimerPickerModal } from "react-native-timer-picker";
+import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"`
+import { TouchableOpacity, Text, StyleSheet, Platform } from "react-native";
+
+// Custom Button Component
+interface MyCustomButtonProps {
+    label: string;
+    onPress?: () => void;
+}
+
+const MyCustomButton: React.FC<MyCustomButtonProps> = ({ label, onPress }) => {
+    return (
+        <TouchableOpacity onPress={onPress} style={styles.customButtonContainer}>
+            <LinearGradient
+                style={styles.customButtonGradient}
+                colors={['#bb2649', '#6c35de']}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 1 }}
+            >
+                <Text style={styles.customButtonText}>{label}</Text>
+            </LinearGradient>
+        </TouchableOpacity>
+    );
+};
+
+// Styles
+const styles = StyleSheet.create({
+    customButtonContainer: {
+        marginHorizontal: 5,
+    },
+    customButtonGradient: {
+        borderRadius: 15,
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    customButtonText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+});
+
+....
+const [showPicker, setShowPicker] = useState(false);
+const [alarmString, setAlarmString] = useState<string | null>(null);
+
+const formatTime = ({
+    hours,
+    minutes,
+    seconds,
+}: {
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+}) => {
+    const timeParts = [];
+
+    if (hours !== undefined) {
+        timeParts.push(hours.toString().padStart(2, "0"));
+    }
+    if (minutes !== undefined) {
+        timeParts.push(minutes.toString().padStart(2, "0"));
+    }
+    if (seconds !== undefined) {
+        timeParts.push(seconds.toString().padStart(2, "0"));
+    }
+
+    return timeParts.join(":");
+};
+
+return (
+    <View style={{backgroundColor: "#F1F1F1", alignItems: "center", justifyContent: "center"}}>
+        <Text style={{fontSize: 18, color: "#202020"}}>
+            {alarmString !== null ? "Alarm set for" : "No alarm set"}
+        </Text>
+        <TouchableOpacity
+            activeOpacity={0.7}
+            onPress={() => setShowPicker(true)}>
+            <View style={{alignItems: "center"}}>
+                {alarmString !== null ? (
+                    <Text style={{color: "#202020", fontSize: 48}}>
+                        {alarmString}
+                    </Text>
+                ) : null}
+                <TouchableOpacity
+                    activeOpacity={0.7}
+                    onPress={() => setShowPicker(true)}>
+                    <View style={{marginTop: 30}}>
+                        <Text
+                            style={{paddingVertical: 10,
+                            paddingHorizontal: 18,
+                            borderWidth: 1,
+                            borderRadius: 10,
+                            fontSize: 16,
+                            overflow: "hidden",
+                            borderColor: "#8C8C8C",
+                            color: "#8C8C8C"
+                            }}>
+                            Set Alarm 🔔
+                        </Text>
+                    </View>
+                </TouchableOpacity>
+            </View>
+        </TouchableOpacity>
+        <TimerPickerModal
+            visible={showPicker}
+            setIsVisible={setShowPicker}
+            onConfirm={(pickedDuration) => {
+                setAlarmString(formatTime(pickedDuration));
+                setShowPicker(false);
+            }}
+            modalTitle="Set Alarm"
+            onCancel={() => setShowPicker(false)}
+            closeOnOverlayPress
+            use12HourPicker
+            LinearGradient={LinearGradient}
+            // Custom buttons
+            cancelButton={<MyCustomButton label="Cancel" />}
+            confirmButton={<MyCustomButton label="Confirm" />}
+            styles={{
+                theme: "light",
+            }}
+        />
+    </View>
+)
+
+```
+
+<img src="demos/example5.gif" width="250" height="550"/>
+
 <br>
 
 ## Props 💅
@@ -531,6 +670,8 @@ The TimerPickerModal component accepts all [TimerPicker props](#timerpicker-️)
 |      hideCancelButton       | Hide the cancel button within the modal               |                                           Boolean                                            |  false  |  false   |
 |      confirmButtonText      | Text for the confirm button                           |                                            String                                            | Confirm |  false   |
 |      cancelButtonText       | Text for the cancel button                            |                                            String                                            | Cancel  |  false   |
+|        confirmButton        | Custom confirm button component                       |                           `ReactElement<{ onPress?: () => void }>`                           |    -    |  false   |
+|        cancelButton         | Custom cancel button component                        |                           `ReactElement<{ onPress?: () => void }>`                           |    -    |  false   |
 |         modalTitle          | Title text for the modal                              |                                            String                                            |    -    |  false   |
 |         modalProps          | Props for the main modal component                    |                             `React.ComponentProps<typeof Modal>`                             |    -    |  false   |
 |       containerProps        | Props for the main container                          |                             `React.ComponentProps<typeof View>`                              |    -    |  false   |

examples/example-bare/App.tsx

@@ -32,6 +32,25 @@ if (Platform.OS === "android") {
     UIManager.setLayoutAnimationEnabledExperimental?.(true);
 }
 
+type MyCustomButtonProps = {
+    label: string;
+    onPress?: () => void;
+};
+
+const MyCustomButton: React.FC<MyCustomButtonProps> = ({ label, onPress }) => {
+    return (
+        <TouchableOpacity onPress={onPress} style={styles.customButtonContainer}>
+            <LinearGradient
+                style={styles.customButtonGradient}
+                colors={["#CC95C0", "#DBD4B4"]}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 1 }}>
+                <Text style={styles.customButtonText}>{label}</Text>
+            </LinearGradient>
+        </TouchableOpacity>
+    );
+};
+
 export default function App() {
     const { width: screenWidth } = useWindowDimensions();
 
@@ -42,12 +61,16 @@ export default function App() {
     const [currentPageIndex, setCurrentPageIndex] = useState(0);
     const [showPickerExample1, setShowPickerExample1] = useState(false);
     const [showPickerExample2, setShowPickerExample2] = useState(false);
+    const [showPickerExample5, setShowPickerExample5] = useState(false);
     const [alarmStringExample1, setAlarmStringExample1] = useState<
         string | null
     >(null);
     const [alarmStringExample2, setAlarmStringExample2] = useState<
         string | null
     >(null);
+    const [alarmStringExample5, setAlarmStringExample5] = useState<
+        string | null
+    >(null);
 
     useEffect(() => {
         const setupAudio = async () => {
@@ -310,6 +333,65 @@ export default function App() {
         );
     }, [pickerFeedback, screenWidth]);
 
+    const renderExample5 = useMemo(() => {
+        return (
+            <View
+                style={[
+                    styles.container,
+                    styles.page1Container,
+                    { width: screenWidth },
+                ]}>
+                <Text style={styles.textDark}>
+                    {alarmStringExample5 !== null
+                        ? "Alarm set for"
+                        : "No alarm set"}
+                </Text>
+                <TouchableOpacity
+                    activeOpacity={0.7}
+                    onPress={() => setShowPickerExample5(true)}>
+                    <View style={styles.touchableContainer}>
+                        {alarmStringExample5 !== null ? (
+                            <Text style={styles.alarmTextDark}>
+                                {alarmStringExample5}
+                            </Text>
+                        ) : null}
+                        <TouchableOpacity
+                            activeOpacity={0.7}
+                            onPress={() => setShowPickerExample5(true)}>
+                            <View style={styles.buttonContainer}>
+                                <Text
+                                    style={[styles.button, styles.buttonDark]}>
+                                    {"Set Alarm 🔔"}
+                                </Text>
+                            </View>
+                        </TouchableOpacity>
+                    </View>
+                </TouchableOpacity>
+                <TimerPickerModal
+                    cancelButton={<MyCustomButton label="Cancel" />}
+                    closeOnOverlayPress
+                    confirmButton={<MyCustomButton label="Confirm" />}
+                    LinearGradient={LinearGradient}
+                    modalProps={{
+                        overlayOpacity: 0.2,
+                    }}
+                    modalTitle="Set Alarm"
+                    onCancel={() => setShowPickerExample5(false)}
+                    onConfirm={(pickedDuration) => {
+                        setAlarmStringExample5(formatTime(pickedDuration));
+                        setShowPickerExample5(false);
+                    }}
+                    pickerFeedback={pickerFeedback}
+                    setIsVisible={setShowPickerExample5}
+                    styles={{
+                        theme: "dark",
+                    }}
+                    visible={showPickerExample5}
+                />
+            </View>
+        );
+    }, [alarmStringExample5, pickerFeedback, screenWidth, showPickerExample5]);
+
     return (
         <ScrollView
             ref={scrollViewRef}
@@ -320,6 +402,7 @@ export default function App() {
             {renderExample2}
             {renderExample3}
             {renderExample4}
+            {renderExample5}
         </ScrollView>
     );
 }
@@ -376,4 +459,17 @@ const styles = StyleSheet.create({
     buttonContainer: {
         marginTop: 30,
     },
+    customButtonContainer: {
+        marginHorizontal: 5,
+    },
+    customButtonGradient: {
+        borderRadius: 15,
+    },
+    customButtonText: {
+        color: "#FFFFFF",
+        fontSize: 16,
+        fontWeight: "600",
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+    },
 });