React Native UI Kitten Datepicker Example

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

If it’s the first time you hear about UI kitten, it’s a React Native UI/UX Components library, with plenty of pre-constructed and ready to use UI elements.

It’s considered top 3 React Native UI Component Libraries, and you can use it to add 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

insert the root component of your App inside 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.

Similar to what we have seen in Configure Application Root we will need ApplicationProvider, in the render method.

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.

Once you click on it

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 from the library. It will work out of the blue.

const DateIcon = (style) => (
  <Icon {...style} name='calendar'/>
)

      <Datepicker
        date={date}
        onSelect={setDate}
        icon={DateIcon}
      />

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}
      />

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

Name	Type	Description
icon	(style: ImageStyle) => ReactElement	Determines the icon of the component.
status	string	Determines the status of the component. Can be basic, primary, success, info, warning, danger or control. Default is basic.
size	string	Determines the size of the component. Can be small, medium or large. Default is medium.
disabled	boolean	Determines whether component is disabled. Default is `false.
placeholder	string	Determines placeholder of the component.
label	string	Determines text rendered at the top of the component.
caption	string	Determines caption text rendered at the bottom of the component.
icon	(style: StyleType) => ReactElement	Determines icon of the component.
captionIcon	(style: StyleType) => ReactElement	Determines caption icon.
labelStyle	StyleProp<TextStyle>	Customizes label style.
captionStyle	StyleProp<TextStyle>	Customizes caption style.
min	D	Minimal date that is able to be selected.
max	D	Maximum date that is able to be selected.
date	D	Date which is currently selected.
dateService	DateService<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.
boundingMonth	boolean	Defines if we should render previous and next months in the current month view.
startView	CalendarViewMode	Defines starting view for calendar. Defaults to Date view.
title	(date: D) => string	Defines the title for visible date.
filter	(date: D) => boolean	Predicate that decides which cells will be disabled.
onSelect	(date: D) => void	Fires when day cell is pressed.
onFocus	() => void	Fires when picker becomes visible.
onBlur	() => void	Fires when picker becomes invisible.
renderDay	(date: D, style: StyleType) => ReactElement	Should return the content of day cell.
renderMonth	(date: D, style: StyleType) => ReactElement	Should return the content of month cell.
renderYear	(date: D, style: StyleType) => ReactElement	Should return the content of year cell.
renderFooter	() => ReactElement	Should return the footer.
placement	string | PopoverPlacement	Determines the actual placement of the popover. Can be left, top, right, bottom, left start, left end, top start, top end, right start, right end, bottom start or bottom end. Default is bottom. Tip: use one of predefined placements instead of strings, e.g PopoverPlacements.TOP
backdropStyle	StyleProp<ViewStyle>	Determines the style of backdrop.
…TouchableOpacityProps	TouchableOpacityProps	Any props applied to TouchableOpacity component.

Methods

Name	Description
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