Custom Event Date Selector Component in React Native

Introduction

In React Native development, working with dates and calendars is a common requirement. One particular use case is creating a date picker that dynamically displays events based on the current date or a selected date. In this blog post, we will explore how to implement an event-based date picker in React Native, allowing users to easily navigate through dates and view relevant events.

Goal:

To create a component which can be used as a date selector to sort events based on their past or future date.

Component UI : Snaps of the final component.

Today with left right arrow for Tomorrow and Yesterday

Snap of home screen with Today Events — Current Date Events

Prerequisites:

Before diving into the implementation, ensure you have the following set up:

1. Basic knowledge of React Native.
2. A React Native project created and configured on your machine.

Installing Dependencies

In your project directory, install the necessary dependencies by executing the following command:

npm install moment @expo/vector-icons

DateSelectBox Component

Create a new file called DateSelectBox.js in your project's component directory and import the required dependencies:

import { View, Text, Pressable } from 'react-native'
import React from 'react'
import { styles } from '../design/styles'
import { theme } from '../design/theme'
import { Feather } from '@expo/vector-icons'; 

export default function DateSelectBox({
  calculateTomorrow,calculateYesterday,
  headerTitle,setCurrentDate}) 
{
  return (
    <View style={[styles.row,styles.ctr,styles.pv]}>
     <Pressable onPress={calculateYesterday}>
      <Feather name={'arrow-left'} size={24} color={theme.light} />
     </Pressable>
     <Pressable style={{width: 300}} onPress={setCurrentDate}>
      <Text style={[styles.lg,{textAlign: 'center'}]}>{headerTitle}</Text>
     </Pressable>
     <Pressable onPress={calculateTomorrow}>
      <Feather name={'arrow-right'} size={24} color={theme.light} />
     </Pressable>
    </View>
  )
}

In this component, we initialize a headerTitle state variable using the current date as default and pressing the left and right icon will run the calculateYesterday and calculateTomorrow function. The setCurrentDate function updates the selectedDate state when a date is pressed on the calendar.

Rendering Events

To display events based on the selected date we can have a state currentDate which will be fetching currentDate based on the moment date for today.

In order to filter data in respective of selected date filterData can be used to filter and re-render the component.

Here is the code snippet for the whole flow.

export default function DateSlider({navigation}) {

-------------

const todayDate = moment().format('MMM DD, YYYY');
const todoData = useSelector((state) => state.appData.todoData);
const [currentDate, setCurrentDate] = useState(todayDate);

-------------

const calculateTomorrow=()=> {
  const nextDate = 
  moment(currentDate).add(1, "days").format("MMM DD, YYYY ")
  setCurrentDate(nextDate);
}

const calculateYesterday=()=>{
  const pastDate = 
  moment(currentDate).subtract(1, "days").format("MMM DD, YYYY")
  setCurrentDate(pastDate);
}

const headerTitle = currentDate === moment().format('MMM DD, YYYY') ? `Today` : currentDate;
const filterData=todoData.filter(item=>item.date === moment(currentDate).format('DD MMM, YYYY'))

return (

<View>

-----------

// Rendering DateSelectBox Component
 <DateSelectBox
    calculateTomorrow={()=>calculateTomorrow()}
    calculateYesterday={()=>calculateYesterday()}
    headerTitle={headerTitle}
    setCurrentDate={()=>setCurrentDate(todayDate)}
  />

------------

  // Rendering items based on selected date filter
  <FlatList
    showsVerticalScrollIndicator={false}
    data={filterData}
    ListEmptyComponent={EmptyComponent}
    renderItem={(item) => (
      <View style={{marginVertical: 5, backgroundColor: theme.gray, padding: 10,borderRadius: 5}}>
        <Text style={styles.lg}>{item.item.text}</Text>
        <TouchableOpacity onPress={() => dispatch(wpActions.removeTodoData(item.item.key))} style={{width: 100}}>
          <Text style={[styles.lg,{color: theme.bright}]}>Delete</Text>
        </TouchableOpacity>
      </View>
    )}
    keyExtractor={(item) => item.key}
  />

-----------

</View>
}

Yesterday Events

Conclusion:

Congratulations! You have successfully implemented an event-based date picker in React Native. Users can now select a date from the arrow icons, and the component will display the corresponding events. Feel free to customise the design and integrate with your own event data or APIs to further enhance the functionality.

Remember to handle error scenarios and incorporate additional features as per your application’s requirements. With this foundation, you can build upon the date picker to create more advanced features such as event details, event creation, and reminders.

Happy coding!

Reach out to me on Instagram if you have any questions on the same or want to learn more about React Native and Code. I am also interested in collaboration of wireframes and design mockups for building awesome application based on Mobile and Web.