Added library to environment

[bigboidanwithacan]

What type of PR is this? (Check all that apply)

• [ ] ✨feature: Introduces completely new code or new features.
• [ ] 🐛fix: Implements changes that fix a bug. Ideally, reference an issue if present.
• [ ] ♻️refactor: Includes any code-related change that is neither a fix nor a feature.
• [x] ✅build: Encompasses all changes related to the build of the software, including changes to dependencies or the addition of new ones.
• [ ] ⚡️test: Pertains to all changes regarding tests, whether adding new tests or modifying existing ones.
• [ ] 🚰ci: Involves all changes related to the configuration of continuous integration, such as GitHub Actions or other CI systems.
• [ ] 📚docs: Includes all changes to documentation, such as README files, or any other documentation present in the repository.
• [ ] 🗑️chore: Captures all changes to the repository that do not fit into the above categories.

Description

What did you change? How did you change it? Added a component library that is to be used for the calendar in the streaks page.

Tests

How was this tested?

• [ ] Unit tests
• [ ] Integration tests
• [ ] E2E tests
• [x] Manual tests
• [ ] Tests were NOT needed
• [ ] Other (explain below)

[Optional] Screenshots

screen shot shows the basic usage code which was used as a test.

Documentation

This library was installed locally, then added to the dependencies of our repository using the following command

pnpm add react-native-calendars -w

From there, I ensured it was set to be a field in devDependencies instead of dependencies (inside package.json).

Basic Usage

Here's a simple example of how to use the Calendar component:

import React from 'react'
import { StyleSheet, View } from 'react-native'
import { Calendar, DateData } from 'react-native-calendars'

const App: React.FC = () => {
  const handleDayPress = (day: DateData) => {
    console.log('Selected day:', day.dateString)
  }

  return (
    <View style={styles.container}>
      <Calendar
        onDayPress={handleDayPress}
        markedDates={{
          '2024-04-15': { selected: true, marked: true, selectedColor: '#48476D' }, // streak of 4 days
          '2024-04-17': { selected: true, marked: true, selectedColor: '#48476D' },
          '2024-04-18': { selected: true, marked: true, selectedColor: '#484765' },
          '2024-04-16': { selected: true, marked: true, selectedColor: '#484765' },
          '2024-04-20': { disabled: true, disableTouchEvent: true }, // rest day
        }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

export default App

Features

• Pure JS. No Native code required
• Date marking - dot, multi-dot, period, multi-period and custom marking
• Customization of style, content (days, months, etc) and dates
• Detailed documentation and examples
• Swipeable calendar with flexible custom rendering
• Scrolling to today, selecting dates, and more
• Allowing or blocking certain dates
• Accessibility support
• Automatic date formatting for different locales

Version

The current version is 1.1304.1.

• [ ] Added to README.me
• [ ] Seperate document
• [ ] NO documentation needed

Link to external documentation:

For more detailed documentation, see the official docs.

[Optional] Are there any post-deployment tasks we need to perform?

make sure to pnpm i after this is merged in.