diff --git a/README.md b/README.md index f3152a3..eec6c2c 100644 --- 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-) +
+ ## Demos 📱

@@ -39,6 +42,7 @@ Works with Expo and bare React Native apps.

+
## 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.** + +
## Installation 🚀 @@ -67,6 +73,8 @@ or yarn add react-native-timer-picker ``` +
+ ## Examples 😎 ### Timer Picker Modal (Dark Mode) 🌚 @@ -295,6 +303,8 @@ return ( ``` +
+ ## Props 💅 ### TimerPicker ⏲️ @@ -356,7 +366,8 @@ The TimerPickerModal component accepts all [TimerPicker props](#timerpicker-️) | modalProps | Props for the main modal component | `React.ComponentProps` | - | false | | containerProps | Props for the main container | `React.ComponentProps` | - | false | | contentContainerProps | Props for the content container | `React.ComponentProps` | - | false | -| buttonContainerProps | Props for the button container | `React.ComponentProps` | - | false | +| buttonContainerProps | Props for the button containers | `React.ComponentProps` | - | false | +| buttonTouchableOpacityProps | Props for the button touchable opacities | `React.ComponentProps` | - | false | | modalTitleProps | Props for the modal title text component | `React.ComponentProps` | - | 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 | +
## Methods 🔄 @@ -403,6 +415,8 @@ timerPickerRef.current.setValue({ hours: number, minutes: number, seconds: numbe An identical ref is also exposed for the TimerPickerModal component. +
+ ## License 📝 This project is licensed under the [MIT License](LICENSE). diff --git a/package.json b/package.json index ca19817..3cc6f92 100644 --- 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 index b4daa22..b92c19d 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -49,6 +49,7 @@ export interface TimerPickerModalProps extends TimerPickerProps { containerProps?: React.ComponentProps; contentContainerProps?: React.ComponentProps; buttonContainerProps?: React.ComponentProps; + buttonTouchableOpacityProps: React.ComponentProps; modalTitleProps?: React.ComponentProps; styles?: CustomTimerPickerModalStyles; } @@ -86,6 +87,7 @@ const TimerPickerModal = forwardRef( contentContainerProps, pickerContainerProps, buttonContainerProps, + buttonTouchableOpacityProps, modalTitleProps, pickerGradientOverlayProps, styles: customStyles, @@ -199,21 +201,25 @@ const TimerPickerModal = forwardRef( {...buttonContainerProps} style={styles.buttonContainer}> {!hideCancelButton ? ( - + {cancelButtonText} ) : null} - + {confirmButtonText}