Implementing a Date Time picker in React Native

In the old days, DatePickerIOS, DatePickerAndroid, and TimePickerAndroid components used to be used to create Date and Time pickers in React Native applications, but nowadays, these ones are deprecated.

At the time of writing, using react-native-datetimepicker/datetimepicker is a neat and elegant approach to implementing a Date and Time picker for both iOS and Android.

Note: This package is still published on npmjs.com under the old namespace (@react-native-community) but will be published under a new namespace soon, with a major version bump. We will update this article as soon as this happens.

Let’s take a look at the datetimepicker module’s options and explore a complete example of using it.

Installation

Add the module to your project by running:

npm i @react-native-community/datetimepicker

Or:

yarn add @react-native-community/datetimepicker

For Expo managed projects, execute this command to install the package:

npx expo install @react-native-community/datetimepicker

If you’re building an app for iOS, then run the following command to link the dependency:

npx pod-install

Options

This table lists the props of the datetimepicker module, and the first 4 properties are used the most.

By default, the picker height is fixed to 216px. The picker’s text color is controlled by the application theme (light/dark mode). In dark mode, the text is white, and in light mode, the text is black.

A Complete Example

This example contains a text component and a button. When the button is pressed, a Date picker will show up and let the user pick a date from it. That date will be displayed within the text component.

Preview

The code

// App.js
import React, {useState} from 'react';
import {StyleSheet, View, Text, Button, Platform} from 'react-native';

import DateTimePicker from '@react-native-community/datetimepicker';

const App = () => {
  const [isPickerShow, setIsPickerShow] = useState(false);
  const [date, setDate] = useState(new Date(Date.now()));

  const showPicker = () => {
    setIsPickerShow(true);
  };

  const onChange = (event, value) => {
    setDate(value);
    if (Platform.OS === 'android') {
      setIsPickerShow(false);
    }
  };

  return (
    <View style={styles.container}>
      {/* Display the selected date */}
      <View style={styles.pickedDateContainer}>
        <Text style={styles.pickedDate}>{date.toUTCString()}</Text>
      </View>

      {/* The button that used to trigger the date picker */}
      {!isPickerShow && (
        <View style={styles.btnContainer}>
          <Button title="Show Picker" color="purple" onPress={showPicker} />
        </View>
      )}

      {/* The date picker */}
      {isPickerShow && (
        <DateTimePicker
          value={date}
          mode={'date'}
          display={Platform.OS === 'ios' ? 'spinner' : 'default'}
          is24Hour={true}
          onChange={onChange}
          style={styles.datePicker}
        />
      )}
    </View>
  );
};

// Kindacode.com
// just add some styles to make our app look more beautiful
// This is not the focus of this article
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
    padding: 30,
  },
  pickedDateContainer: {
    padding: 20,
    backgroundColor: '#eee',
    borderRadius: 10,
  },
  pickedDate: {
    fontSize: 18,
    color: 'black',
  },
  btnContainer: {
    padding: 30,
  },
  // This only works on iOS
  datePicker: {
    width: 320,
    height: 260,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
});

export default App;

And here’s my package.json file:

{
  "name": "example",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-community/datetimepicker": "^6.7.4",
    "expo": "~47.0.12",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-native": "0.70.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

Conclusion

In this article, we went over the fundamentals of implementing a Date and Time Picker in React Native by using the react-native-datetimepicker / datetimepicker module. If you would like to explore more new and exciting things about modern React Native, take a look at the following articles:

• React Native – How to Update Expo SDK
• Using Image Picker and Camera in React Native (Expo)
• React Native FlatList: Tutorial and Examples
• Top 4 open-source React Native UI libraries
• How to render HTML content in React Native
• How to implement tables in React Native

You can also check out our React Native topic page for more tutorials and examples.