Hello friends, We all know that selecting time and date is sometimes so much useful in mobile applications regarding to Alarm or Event apps. But we cannot find so precise app for react native which gives us both Time Picker and Date Picker together and we don’t have to install multiple libraries. So here is the solution for us friends, In today’s tutorial we would learn about React Native Community DateTimePicker NPM YARN package. Using this package we can easily make Time Picker and Date Picker in our react native android iOS application. User can select time and date both as per their requirement and use them. You can learn more about this package Here on their official page.
Contents in this project Example of React Native Community DateTimePicker :-
1. First of all we have to install React Native DateTimePicker package in our react native app. So open your project’s main Root directory in CMD or Terminal and execute below command.
2. This step is for iOS users only. In iOS after installing the package we have to install PODS to link the package. So for iOS users you have to execute below command
3. Now we’re ready to go. It’s time to start coding for the app. So open your project’s main App.js file and import useState, Button, SafeAreaView, StyleSheet, Text and View component.
4. Importing DateTimePicker from ‘@react-native-community/datetimepicker
5. Creating our main App component
6. Creating 2 States named as datePicker with setDatePicker State update method to show and hide the Date Picker Dialog and date with setDate method to Hold the selected Date
7. Creating 2 State named as timePicker with setTimePicker state update method to show and hide the Time Picker dialog and time with setTime method to hold the selected time.
8.Creating 2 functions to show the Date Picker and Time Picker.
9. Creating 2 more functions to set Selected Date and Time into State.
10. Creating return() block, Here we would make our Both DateTimePicker with mode time and date .
