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.

React Native UI Kitten Datepicker Example

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.

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

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

Total
27
Shares
3 comments
  1. Hi, thank you so much for sharing. It helps a lot. I love the clear explanations. May I know if this example is also available in github or expo.io? Thanks a lot. My class is having a small group project, and we are very interested in trying out React Native. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
React Native Box Shadow Example Featured

React Native Shadow Box Generator Example

Next Post
React Native Rename Your App

React Native Rename Your App

Related Posts