Merge pull request #10 from troberts-28/patch-v1.2.2

Patch v1.2.2
troberts-28 · Aug 23, 2023 · cb69967 · cb69967
2 parents 85fc593 + 292af77
commit cb69967
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -25,9 +25,12 @@ Works with Expo and bare React Native apps.
     - [TimerPickerModal ⏰](#timerpickermodal-)
         - [Custom Styles 👕](#custom-styles--1)
 - [Methods 🔄](#methods-)
+    - [TimerPicker](#timerpicker)
     - [TimerPickerModal](#timerpickermodal)
 - [License 📝](#license-)
 
+<br>
+
 ## Demos 📱
 
 <p>
@@ -39,6 +42,7 @@ Works with Expo and bare React Native apps.
     <img src="demos/example4.gif" width="250" height="550"/>
 </p>
 
+<br>
 
 ## Peer Dependencies 👶
 
@@ -49,7 +53,9 @@ If you want the numbers to fade in/out at the top and bottom of the picker, you
 -   [expo-linear-gradient](https://www.npmjs.com/package/expo-linear-gradient) (if using Expo)
 -   [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) (if using in a bare React Native project)
 
-To enable the linear gradient, you need to supply the component as a prop to either TimerPickerModal or TimerPicker.
+**To enable the linear gradient, you need to supply the component as a prop to either TimerPickerModal or TimerPicker.**
+
+<br>
 
 ## Installation 🚀
 
@@ -67,6 +73,8 @@ or
 yarn add react-native-timer-picker
 ```
 
+<br>
+
 ## Examples 😎
 
 ### Timer Picker Modal (Dark Mode) 🌚
@@ -295,6 +303,8 @@ return (
 ```
 <img src="demos/example4.gif" width="250" height="550"/>
 
+<br>
+
 ## Props 💅
 
 ### TimerPicker ⏲️
@@ -356,7 +366,8 @@ The TimerPickerModal component accepts all [TimerPicker props](#timerpicker-️)
 | modalProps            | Props for the main modal component                        | `React.ComponentProps<typeof Modal>`                      | -                   | false    |
 | containerProps        | Props for the main container                              | `React.ComponentProps<typeof View>`                       | -                   | false    |
 | contentContainerProps | Props for the content container                           | `React.ComponentProps<typeof View>`                       | -                   | false    |
-| buttonContainerProps  | Props for the button container                            | `React.ComponentProps<typeof View>`                       | -                   | false    |
+| buttonContainerProps  | Props for the button containers                            | `React.ComponentProps<typeof View>`                       | -                   | false    |
+| buttonTouchableOpacityProps  | Props for the button touchable opacities           | `React.ComponentProps<typeof TouchableOpacity>`           | -                   | false    |
 | modalTitleProps       | Props for the modal title text component                  | `React.ComponentProps<typeof Text>`                       | -                   | false    |
 | styles                | Custom styles for the timer picker modal                  | [CustomTimerPickerModalStyles](#custom-styles--1)          | -                   | false    |
 
@@ -374,6 +385,7 @@ The following custom styles can be supplied to re-style the component in any way
 | confirmButton     | Style for the confirm button           | TextStyle |
 | modalTitle        | Style for the title of the modal       | TextStyle |
 
+<br>
 
 ## Methods 🔄
 
@@ -403,6 +415,8 @@ timerPickerRef.current.setValue({ hours: number, minutes: number, seconds: numbe
 
 An identical ref is also exposed for the TimerPickerModal component.
 
+<br>
+
 ## License 📝
 
 This project is licensed under the [MIT License](LICENSE).
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
         "url": "https://github.com/troberts-28"
     },
     "license": "MIT",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "scripts": {

diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -49,6 +49,7 @@ export interface TimerPickerModalProps extends TimerPickerProps {
     containerProps?: React.ComponentProps<typeof View>;
     contentContainerProps?: React.ComponentProps<typeof View>;
     buttonContainerProps?: React.ComponentProps<typeof View>;
+    buttonTouchableOpacityProps: React.ComponentProps<typeof TouchableOpacity>;
     modalTitleProps?: React.ComponentProps<typeof Text>;
     styles?: CustomTimerPickerModalStyles;
 }
@@ -86,6 +87,7 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
             contentContainerProps,
             pickerContainerProps,
             buttonContainerProps,
+            buttonTouchableOpacityProps,
             modalTitleProps,
             pickerGradientOverlayProps,
             styles: customStyles,
@@ -199,21 +201,25 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
                             {...buttonContainerProps}
                             style={styles.buttonContainer}>
                             {!hideCancelButton ? (
-                                <TouchableOpacity onPress={cancel}>
+                                <TouchableOpacity
+                                    onPress={cancel}
+                                    {...buttonTouchableOpacityProps}>
                                     <Text
                                         style={[
-                                            styles.cancelButton,
                                             styles.button,
+                                            styles.cancelButton,
                                         ]}>
                                         {cancelButtonText}
                                     </Text>
                                 </TouchableOpacity>
                             ) : null}
-                            <TouchableOpacity onPress={confirm}>
+                            <TouchableOpacity
+                                onPress={confirm}
+                                {...buttonTouchableOpacityProps}>
                                 <Text
                                     style={[
-                                        styles.confirmButton,
                                         styles.button,
+                                        styles.confirmButton,
                                     ]}>
                                     {confirmButtonText}
                                 </Text>