Hello everyone, welcome to this new article where we are going to make a React Native Datepicker Example using UI Kitten .

If you are not familiar with UI kitten, it’s a React Native UI Components library, with plenty of cool and custom UI.

React Native UI Kitten Datepicker Example

You can consider it top 5 React Native UI Libraries, and use it to make cool modern experience in your app.

And it offers a really nice and simple global design system that you can switch the entire look of the app, eg Light mode, Dark mode…

If you are an active user of my blog, you would notice that I usually use nativebase for my UI.

I have been using nativebase for a long time, and I am trying to explore new UI libraries and other options.

There are quite a lot, ant design, material design, UI kitten etc.

I will try to explore each one of them by time and try to make good stuff with em.

Without further talking, let’s get into the purpose of this article.

Let’s Get Started

Environment Setup

Make a new project using React native and install UI kitten package

npm i @ui-kitten/components @eva-design/eva react-native-svg

You also need to complete installation for iOS by linking react-native-svg.

cd ios && pod install

If you have started the app by this time, you need to restart the bundler to apply the changes. Go back to the root application directory, shut down the current bundler process and call.

npm start -- --reset-cache

Configure Application Root

Wrap the root component of your App into ApplicationProvider component. In your App.js

import React from 'react';
import { ApplicationProvider, Layout, Text } from '@ui-kitten/components';
import { mapping, light as lightTheme } from '@eva-design/eva';

const HomeScreen = () => (
  <Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
    <Text category='h1'>HOME</Text>
  </Layout>
);

const App = () => (
  <ApplicationProvider mapping={mapping} theme={lightTheme}>
    <HomeScreen />
  </ApplicationProvider>
);

export default App;

That was it, Now you are ready to use UI Kitten in your app

Datepicker Example

For this example, I will code directly in the app.js file.

First let’s make a new state to handle our date picking

  const [date, setDate ] = useState(new Date())

Don’t for get to import the useState hook from react

import React, { useState} from 'react';

If you are using a class component, you should be fine without the previous step, just setup your init state normally.

in our render method, like we have seen in Configure Application Root we will need ApplicationProvider.

Since I didn’t setup my example that way, I will need to include it in the app.js

<ApplicationProvider mapping={mapping} theme={lightTheme}>
      <Layout style={styles.container}>
       
      </Layout>
    </ApplicationProvider>

And now simply add Datepicker component from UI kitten to the app.

<Datepicker
  date={date}
  onSelect={setDate}
  label="Pick your birthday"
/>

This should be fine to render the datepicker UI Component in our screen.

React Native Datepicker Example using UI Kitten

Once you click on it

React Native Datepicker Example using UI Kitten example

Now, our Datepicker is fully functioning, once you select a date the date field in the state should be updated via the onSelect function of the datepicker component.

There is still a lot to do to customize the datepicker, so let’s try some.

Adding an Icon

We can use the icon prop of the datepicker component, to render an icon for it.

You can use UI Kitten Icon component, or any component really it would work.

const DateIcon = (style) => (
  <Icon {...style} name='calendar'/>
)
      <Datepicker
        date={date}
        onSelect={setDate}
        icon={DateIcon}
      />
Datepicker Example using UI Kitten.

Selectable days

We can use the filter prop to filter the days that can be selected, using the select prop.

  const filter = (date) => date.getDay() !== 0 && date.getDay() !== 6;
<Datepicker
        placeholder='Pick Date'
        date={date}
        onSelect={setDate}
        filter={filter}
      />
Datepicker Example using UI Kitten.

Now, only results of the filtered days will be selectable, and the rest will be disabled.

More Options

There are plenty of options you can use to customize your datepicker for your needs, Here is the list.

Datepicker

Properties

NameTypeDescription
icon(style: ImageStyle) => ReactElementDetermines the icon of the component.
statusstringDetermines the status of the component. Can be basicprimarysuccessinfowarningdanger or control. Default is basic.
sizestringDetermines the size of the component. Can be smallmedium or large. Default is medium.
disabledbooleanDetermines whether component is disabled. Default is `false.
placeholderstringDetermines placeholder of the component.
labelstringDetermines text rendered at the top of the component.
captionstringDetermines caption text rendered at the bottom of the component.
icon(style: StyleType) => ReactElementDetermines icon of the component.
captionIcon(style: StyleType) => ReactElementDetermines caption icon.
labelStyleStyleProp<TextStyle>Customizes label style.
captionStyleStyleProp<TextStyle>Customizes caption style.
minDMinimal date that is able to be selected.
maxDMaximum date that is able to be selected.
dateDDate which is currently selected.
dateServiceDateService<D>Date service that is able to work with a date objects. Defaults to Native Date service that works with JS Date. Allows using different types of date like Moment.js or date-fns.
boundingMonthbooleanDefines if we should render previous and next months in the current month view.
startViewCalendarViewModeDefines starting view for calendar. Defaults to Date view.
title(date: D) => stringDefines the title for visible date.
filter(date: D) => booleanPredicate that decides which cells will be disabled.
onSelect(date: D) => voidFires when day cell is pressed.
onFocus() => voidFires when picker becomes visible.
onBlur() => voidFires when picker becomes invisible.
renderDay(date: D, style: StyleType) => ReactElementShould return the content of day cell.
renderMonth(date: D, style: StyleType) => ReactElementShould return the content of month cell.
renderYear(date: D, style: StyleType) => ReactElementShould return the content of year cell.
renderFooter() => ReactElementShould return the footer.
placementstring | PopoverPlacementDetermines the actual placement of the popover. Can be lefttoprightbottomleft startleft endtop starttop endright startright endbottom start or bottom end. Default is bottom. Tip: use one of predefined placements instead of strings, e.g PopoverPlacements.TOP
backdropStyleStyleProp<ViewStyle>Determines the style of backdrop.
…TouchableOpacityPropsTouchableOpacityPropsAny props applied to TouchableOpacity component.

Methods

NameDescription
show()returns:void
Sets picker visible.
hide()returns:void
Sets picker invisible.
focus()returns:void
Focuses Datepicker and sets it visible.
blur()returns:void
Removes focus from Datepicker and sets it invisible. This is the opposite of focus().
isFocused()returns:boolean
Returns true if the Datepicker is currently focused and visible.
clear()returns:void
Removes all text from the Datepicker.

There you have it React Native Datepicker Example using UI Kitten.

I hope you find it as informative as you have expected.

Feel free to share it with your friends, and comment out your questions and concerns.

Stay tuned for more,

Happy coding