🚧 We apologize for the inconvenience, but we are currently experiencing some installation issues with the library. We are working diligently to resolve this as soon as possible! 🛠️💪
![]() |
The TimePicker
component is a React Native component that allows selecting values for days, hours, and minutes.
To use the TimePicker component in your project, follow the steps below:
-
Make sure you have Node.js and npm (or yarn) installed in your development environment.
-
Open the terminal and navigate to the root directory of your project.
-
Run the following command to install the component via npm:
npm install react-native-modern-time-picker
or if you're using yarn, run:
yarn add react-native-modern-time-picker
- Import the TimePicker component in your JavaScript/TypeScript file where you want to use it:
import TimePicker from 'react-native-modern-time-picker'
Now you're ready to start using the TimePicker component in your project!
The TimePicker
component accepts the following props:
-
minutesValue
(required): Object containing the following properties:totalValue
(number): The total number of values available for minutes.textValue
(string): The text displayed next to each minute value.initialValue
(optional): The initial value for minutes.
-
hoursValue
(required): Object containing the following properties:totalValue
(number): The total number of values available for hours.textValue
(string): The text displayed next to each hour value.initialValue
(optional): The initial value for hours.
-
daysValue
(optional): Object containing the following properties:totalValue
(number): The total number of values available for days.textValue
(string): The text displayed next to each day value.initialValue
(optional): The initial value for days.
-
dividerStyle
(optional): Style applied to the divider between the time values. -
textValueStyle
(optional): Style applied to the text displayed next to each time value. -
valueSelectedStyle
(optional): Style applied to the selected value. -
valueUnselectedStyle
(optional): Style applied to the unselected values. -
style
(optional): Additional style applied to theTimePicker
component. -
onValuesSelected
(required): Function called when the time values are selected. Receives an object containing thedays
,hours
, andminutes
properties, representing the selected values for days, hours, and minutes respectively.
import React, {useState} from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
import TimePicker from './src';
const App = () => {
const [selectedValues, setSelectedValues] = useState({
days: 0,
hours: 0,
minutes: 0,
});
const handleValuesSelected = (values: {
days: number;
hours: number;
minutes: number;
}) => {
setSelectedValues(values);
};
return (
<View style={styles.container}>
<TimePicker
minutesValue={{totalValue: 60, textValue: 'min'}}
hoursValue={{totalValue: 24, textValue: 'hours'}}
daysValue={{totalValue: 99, textValue: 'days', initialValue: 20}}
style={{marginHorizontal: 10}}
dividerStyle={{fontSize: 30, color: '#000'}}
textValueStyle={{fontSize: 15, color: '#000'}}
valueSelectedStyle={{fontSize: 32, marginVertical: -3, color: '#000', opacity: 1}}
valueUnselectedStyle={{fontSize: 20, marginVertical: 0, color: '#000', opacity: 0.5}}
onValuesSelected={handleValuesSelected}
/>
<Text>
Selected Values: {selectedValues.days} days, {selectedValues.hours} hours, {selectedValues.minutes} minutes
</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
});
export default App;
Contributions are welcome! Here are some ways you can contribute to this project:
- Report bugs or suggest improvements by creating a new issue.
- Fix bugs or implement new features by submitting a pull request.
- Improve the documentation by suggesting changes or adding examples.
- Help others by answering questions and providing support in the project's issue tracker.
To contribute to this project, follow these steps:
- Fork the repository.
- Create a new branch for your contribution.
- Make the necessary changes and commit them.
- Push your changes to your forked repository.
- Submit a pull request to the original repository.
Please ensure that your contributions adhere to the project's coding guidelines and follow best practices. Also, make sure to provide a clear description of your changes in the pull request.
Thank you for contributing to this project!
If you find this TimePicker component helpful, I would appreciate it if you could connect with me on LinkedIn and share your experience of using it.
If you like this package, consider giving it a github star ⭐
Thank you!