React native: Implement Time range picker

I have working on a react native app which needs to implement a time range module which is able to input start and end time for the user and validate the start and end times using two min and max cut off times. Main purpose of my implementation is that main user should able to manage the app accessing time of sub users within their time range. In this post I’m going to share how I built it.

Here’s what the finished time range module looks like:

So let’s get to do it!

Implementation:

Here I’m using react-native-navigation to show time picker as an overlay.

Here’s what the onPress function looks like:

Here I’m sending start and end time separation data object ,localizations and onpressOkFn function as passprops. Initial format of the time separation object is as below.

let time_separation_data = {
hours: 0,
minutes: 0,
is_am: false,
is_pm: false
};

If there is a time range already set for the user we need to separate them as below by validating the default times.

Time validation:

const isValidAgentStartEndTime = (time) => {
let is_valid_time = false;
if (time !== undefined && time !== null && time !== '') {
is_valid_time = true;
}
return is_valid_time;
};

Time separation:

const separateTimeIn12h = (time) => {
let time_separation_data = {
hours: 0,
minutes: 0,
is_am: false,
is_pm: false
};
if (isValidAgentStartEndTime(time)) {
let time1 = time.split(':');
let hours = time1[0];
let minutes = time1[1];
let am_pm = parseInt(hours) >= 12 ? TIME_LABEL.PM : TIME_LABEL.AM;
hours = parseInt(hours) % 12;
hours = hours ? hours : 12;
minutes = parseInt(minutes) < 10 ? '0' + parseInt(minutes) : parseInt(minutes);
hours = hours < 10 ? '0' + hours : hours;
time_separation_data = {
hours: hours,
minutes: minutes,
is_am: (am_pm === TIME_LABEL.AM) ? true : false,
is_pm: (am_pm === TIME_LABEL.PM) ? true : false,
am_pm: am_pm
};
}
return time_separation_data;
};

Time range module component:

Below is the UI implementation of the time range module and initially I’m assigning start and end hours, minutes, am/pm configuration separately to state variables. Next I have implemented TimeInputUIComponent.js to render start and end time input modules. Here I’m using separate files for constants and common functions as it will help to manage the module easily. I will explain those later in my post and also you can find clearly in my source code.

Time input component:

Below is the implementation of TimeInputUIComponent.js as a functional component. Here I’m using react-native-masked-text for the text inputs. For the AM/PM switcher I have implemented a separate functional component.

AM/PM switcher component:

Here I have implemented onChangeText function logics separately for start and end time inputs as below.

Here we need to validate the user input hours as below using validateHourInput function.

const validateHourInput = (newHoursFromInput) => {
if (parseInt(newHoursFromInput) > 24) {
console.log('validateHourInput');
return 12;
} else {
return convert12HourFormat(newHoursFromInput);
}
};

I’m using a separate function to validate user input minutes as below. I have used DEFAULT_TIME_VALUE as ‘00’ which is declared as a Constant.

const validateMinuteInput = (newMinutesFromInput) => {
if (newMinutesFromInput > 59) {
console.log('validateMinuteInput 2');
return DEFAULT_TIME_VALUE;
} else {
return newMinutesFromInput;
}
};

Further more I have implemented logics to validate user input start and end times with main users time range as below.

Finally I need to implement the logic for AM/PM button onPress as below.

The supporting functions that I have used to build logics are added separately as below.

Below are the constants that I have used:

And that’s it for this post! This implementation is simple but you can build on top of it to select user inputs using clock icon and more sophisticated and feature rich.

You can find the full source code from here.

Thank you for reading!