DEV Community: Lyan Chin

5 Easy-to-Use React Native Calendar Libraries

Lyan Chin — Wed, 15 Dec 2021 16:28:04 +0000

When building an application,

you may need to allow your users to select a date or time for something to happen.
To input the date, it’s a good idea to use a calendar picker. A calendar picker is a component used to accept date and time inputs. It lets users select present, past, or future dates with an interactive calendar.

In this post, we’ll take a look at a few easy-to-use React Native calendar pickers, and then cover how to interact with the users’ on-device calendars. We’ll also walk through an example of how to build a simple app to remember your friends’ birthdays.
Before we get started, let’s take a look at some of the benefits of using a calendar picker in your app.

Why You Should Use a Calendar Picker

User Interface

A calendar picker is a dedicated UI component for date and time input. A calendar picker offers an interactive calendar that users of your app can use to select dates. Users can select year, month, and day from the calendar.
In addition, a calendar picker delivers a visually appealing UI. Some calendar pickers provide a clean modal that is dismissed after a user selects the date. This saves space for other elements on the screen.

Nature of the Input

A calendar picker provides a more standard format for the data a user will input. For example, users don’t have to worry about whether they’re expected to specify the value for the day before the month. Using a calendar picker eliminates any room for this kind of inconsistency in the nature of the input.

User Experience

Calendar picker leads to a better overall user experience. For instance, most React Native calendar pickers use native platform date input components that users are already familiar with.
Pulling out the virtual keyboard to input the date and time involves more steps. Hence, numeric controls can be painful and slow on mobile.
Now let’s take a look at some React Native calendar pickers.

Easy-to-Use React Native Calendar Pickers

In this section, we’ll discuss five React Native calendar pickers that are very easy to use. The pickers on our list here are listed in no particular order.

React Native CalendarPicker

First on our list is React Native CalendarPicker by Stephani Bishop. The library provides a simple third-party React Native calendar picker component.
Some of the things that make this library easy to use are the following:

The library is supported in Expo Go.
It’s easy to implement. All you need to do is add a CalendarPicker component to your view.
The library is in active development.

With this package, users can pick dates using an interactive touch calendar with options for users to pick the year, month, and day.

React Native Calendars

The next calendar picker we’ll be discussing is React Native Calendars. React Native Calendars is a collection of customizable React Native calendar components. The components include the following:

Calendar component
CalendarList component
Agenda component

This module can be added to any React Native project with two easy steps.
First, install the module, then add the specific component you’re interested in.
This library offers a touch-based calendar that’s highly customizable. It also has support for multiple languages, including English, French, and Spanish.
React Native Calendars does not support Expo Go. However, it can be used with EAS Build and custom clients.

React Native Modal Datetime Picker

React Native Modal Datetime Picker is a cross-platform calendar picker for React Native. The library includes a calendar picker component and a time picker component.
The calendar picker for this library is presented inside a modal, which looks and feels like native modals for iOS and Android.
React Native Modal Datetime is easy to install and supports projects created with Expo CLI and bare React Native projects.

A few weeks maintaining React components, using various approaches

Lyan Chin — Tue, 14 Dec 2021 08:47:47 +0000

Context

This post is a short made-up, based on a real experience. It aims to show different approaches to developing and maintaining React components in an application.

In order to use react-select in a french government project, we have to translate placeholders and other default options. As far as I know, there is no i18n extension for react-select; anyway, it may not have fit our need since there may be some domain-specific text. Here we go, let's use the component's props:

<Select
  loadingMessage={() => "Chargement…"}
  noOptionsMessage={() => "Aucun résultat"}
  placeholder="Choisissez une valeur"
  // …
/>

It works.

👉 Now, we want to re-use this component with same options elsewhere, then everywhere else.

Week 1 - Create a custom select component

We could create a MySelectthat has some default options. Since the only thing that changes for each instance are the name and the change handler, we need two props:

export default function MySelect({ name, onChange }) {
  return (
    <Select
      loadingMessage={() => "Chargement…"}
      noOptionsMessage={() => "Aucun résultat"}
      placeholder="Choisissez une valeur"
      name={name}
      onChange={onChange}
    />
  );
}

Thus, we could use it in various files and components:

<MySelect name="user" onChange={(v) => setUser(v)} />


<label>Liste des projets</label>
<MySelect 
  name="project" 
  onChange={(v) => setProject(v)} 
/>


// Another file
<MySelect name="foo" onChange={bar} />

It still works, it is factorized, well done!

In order to add new options we could add new properties.

export default function MySelect({ 
  name, 
  onChange, 
  value, 
}) {

Then…

export default function MySelect({ 
  name, 
  onChange, 
  value, 
  customStyles = [],
}) {

And so on…

export default function MySelect({ 
  name, 
  onChange, 
  value, 
  customStyles = [],
  disabled = false,
  // etc.
}) {

🙅 OK, let's refactor it! It does not scale anymore. ❌

Week 2 - Passing props down to a custom component

Since adding properties seems like a useless layer over the MySelect component, let's just pass props to the component thanks to spread operator:

export default function MySelect(props) {
  return (
    <Select
      loadingMessage={() => "Chargement…"}
      noOptionsMessage={() => "Aucun résultat"}
      placeholder="Choisissez une valeur"
      {...props}
    />
  );
}

We just removed some complexity, that seems easier to maintain.

Week 3 - Specialization

A few days later, we figure out that we are repeating code by writing the same sub-component again and again:

<MySelect
  isSearchable
  isClearable
  isMulti
  name="products"
  // …
/>

<MySelect
  isSearchable
  isClearable
  isMulti
  name="services"
  // …
/>

<MySelect
  isSearchable
  isClearable
  isMulti
  name="things"
  // …
/>

It seems many MySelect needs the same 3 attributes: isSearchable, isClearable, isMulti. We could create a new component that looks like MySelect:

export default function MySearchableSelect(props) {
  return (
    <Select
      loadingMessage={() => "Chargement…"}
      noOptionsMessage={() => "Aucun résultat"}
      placeholder="Choisissez une valeur"
      isSearchable
      isClearable
      isMulti
      {...props}
    />
  );
}

Still, MySearchableSelect has some code in common with MySelect so maybe we could consider MySearchableSelect should render a specific version of MySelect (specialization):

export default function MySearchableSelect(props) {
  return (
    <MySelect
      isSearchable
      isClearable
      isMulti
      {...props}
    />
  );
}

This approach seems compatible with the DRY principle. However, it makes the code harder to debug after a few more days. When we have a problem in a code that uses MySearchableSelect component, we may have to jump to MySearchableSelect, then MySelect, then Select and back again to understand where the problem is and to choose where to fix it. The code is oversimplified in this example: in a real-world example, it could take some time to debug. There is also a risk to create MyCreatableSelect, MySearchableAndCreatableSelect and so on. As a side note, using DRY as a main principle could be considered harmful.

Maybe we could remove abstraction.

Week 4 - Adding conditions

To avoid this complexity, we could get rid of MyCreatableSelect, then add a boolean prop to MySelect that allows handling the case where MySelect is a specialized component:

export default function MySelect({ 
  searchable = false
  ...props
}) {
  let searchableProps = {};
  if (searchable) {
    searchableProps = {
      isSearchable: true,
      isClearable: true,
      isMulti: true,
    };
  }
  return (
    <Select
      loadingMessage={() => "Chargement…"}
      noOptionsMessage={() => "Aucun résultat"}
      placeholder="Choisissez une valeur"
      {...searchableProps}
      {...props}
    />
  );
}

Comparison between ReactJS and React Native

Lyan Chin — Wed, 01 Dec 2021 17:16:21 +0000

You must have been confused between React and React Native; They don’t just share the same name, but the same logo too, gets mentioned same time. In this article, we will be comparing React and React Native. First, know what exactly are they:

What is react?

Released by Facebook in 2013, React is a JavaScript library for modern apps and web development. React is used to handle the view layer and can be used to develop both web and mobile applications. In addition, there is a mobile-specific react framework for mobile app development named ‘React Native.’

What is React Native?

Unlike React, React Native is built for Cross-platform Mobile App Development. It Primarily uses React and react’s libraries for mobile development. React Native opens developers to react components to build a mobile app for different platforms, including Android, iPhone, iPad, Windows, and Linux. React Native can forge the full potential of React in its framework.

The difference between ReactJS & React Native

ReactJS

ReactJS is a popular choice when it comes to a front end & single page development; Here is why:

Fast & efficient development

React requires less coding while providing more functionalities in even dynamic app development, unlike JavaScript, which includes complex codings.

Better Performance

React works with Virtual DOM, which makes web and app development faster. Virtual DOM compares the components’ regular and previous states and only updates necessary components instead of updating the whole program and providing developers faster results with less work.

Easy & Fast Adoption

React is easy to learn because it mostly contains basic HTML and JavaScript components with some valuable additions. Thus, you can learn and adapt to work with ReactJS’s library in a short time.
Reusable Codes
Components and codes are building blocks that build any react application, and even a single app contains multiple components and codes. Every component and code have their control and logic; react then can be used throughout the application, which helps to reduce development time.

Unidirectional Data Flow

ReactJS follows a unidirectional data flow system. React allows parent components to nest child components. When Data flows in a single direction, debugging and fixing become much more accessible. Developers can trach errors in apps at the exact moment they appear.

Dedicated Tools for Debug

Facebook provided react community a Chrome browser extension that allows debugging React applications within browsers. One more reason to choose reactJS over others.

React Native

Based on JavaScript

React Native is also written in JavaScript like React, which helps developers in easier coding. JavaScript Developers find it familiar after first use.

One Development and Many Platform

It’s a cross platform app development framework. You have to develop your product one, and you can run it on other platforms without separate development; Thus, fast and convenient development.

Wider Community Support

React Native is backed by Facebook, Which continuously makes improvements and updates. In addition, It has a wide community using and working with React Native, including over 45,000 members. Users and openly askes in community channels and get support from this wide community.

Still Needs some Improvements

React Native still doesn’t include many useful modules and plug-ins, So you might end up somewhere between development. You can reach community channels for help or a professional React Native Developer. If you are a React expert, it won’t be a problem because React Native supports React Elements.
As a wise man said, ‘No one is perfect; So React Native is. It has some drawbacks, but still, it has to offer more than any other framework out there.

ReactJS vs. React Native

Let’s take it Streght; React and React Native are not competitors; they are both almost the same and basically JavaScript Tools but vary differently for their specific purposes. It depends on your requirements and project, Which you should use. Here are some key differences -

ReactJS Vs React Native

Best for Interactive UI & UX development
Best for Mobile App Development & Cross-Platform App
Reusable Components
Pre-Built Components for Convenience in Development
Re-Useable Codes
Fast-Rendering
Simple UI even for New Users
Easier Development for Cross-Platform Work
Primarily for Web Development
Primarily for Mobile & Cross-Platform App
Basically A Library
Basically A Framework

Best UI LIbrary for your next React Native App

Lyan Chin — Wed, 01 Dec 2021 17:12:16 +0000

I had built multiple apps in React Native for my personal as well as Freelancing projects. I had also tried many UI libraries for React native, to get started fast and for consistent UI.

I had checked UI Kitten after some time but after I had used
UI kitten, I became a fan of this library. It has most of the components you will need, for example, Input, Card, Button, etc. It also supports the Light and Dark theme. It is the library that has its Icon Module and all the Icons are awesome. The app looks good in both the light theme and dark theme.

To create a new React Native app using Kitten UI, you just need to run the below command, it will create a new React Native app with the UI kitten as the template

npx react-native init MyApp --template @ui-kitten/template-js

In the next post, I will try to explain, how to add UI-kitten to an already created project.

UI kitten offical page

How to avoid notches with Safe Area Context in React Native apps

Lyan Chin — Tue, 02 Nov 2021 20:38:37 +0000

Most devices nowadays come with a notch or some kind of status bar. Therefore, when building a mobile application using React Native, it is vital to ensure that the content of an app screen is rendered correctly across different types of devices.

In this article, let's take a look two different approaches to make app screens in React Native to avoid the content being positioned behind a notch or status bar.

The first approach will discuss SafeAreaView component from React Native components API. The second approach will discuss the advantage of using react-native-safe-area-context open source library and how it provides a cross-platform solution.

The Notch Problem

When you are starting to build a screen in React Native app, you might add use the following code snippet to display text:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export const HomeScreen = () => {
  return (
    <View style={[styles.container]}>
      <View style={{ backgroundColor: 'blue' }}>
        <Text style={{ fontSize: 28, color: 'white' }}>Hello World</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red'
  }
});

The above code snippet has a parent View component with a background color of red. It wraps another View component with a background color of blue that contains a Text component to display some text on the screen.

This will display the content of the app screen on an iOS device as shown below: