Example of React Native Add Calendar Event NPM YARN

Hello friends, In today’s tutorial we would learn React Native Add Calendar Event NPM Yarn package. The main purpose of this package is to automatically add Events in our inbuilt Calendar application using react native app. We can set Event name, Event start time and Event end time using this tutorial. This package is really amazing it helps us to add events and set event alarms directly from our app. So in this tutorial we would learn about Example of React Native Add Calendar Event NPM YARN package.

Contents in this project Example of React Native Add Calendar Event NPM YARN :-

1. First of all we have to install this package in our RN application. So open your project’s main directory in CMD in windows and Terminal in MAC and execute below command.

OR

Example of React Native Add Calendar Event NPM YARN2. We have to also install React Native Moment package in our project, In order to maintain Date format.

OR

2. Now this step is for iOS users only. First of all we have to add NSCalendarsUsageDescription and NSContactsUsageDescription keys to your Info.plist file.

3. At the end, We have to execute pod install command in iOS directory of our react native project.

4. Now It’s time to start coding for the application. Open your project’s main App.js file and import useState, Alert, StyleSheet, SafeAreaView, Text, TextInput, TouchableOpacity, moment and AddCalendarEvent package in our project.

5. Creating our main App component.

6. Now we would make 1 state named as eventName with State update method setEventName(). This state is used to store Event name we will type inside the TextInput component.

7. Creating 1 Constant named as CURRENT_TIME. In this constant we would store the Current time of our device with current time zone using Moment package. I’m using current time as Event starting time.

8. Creating a function named as currentTimeToString(). We would use this function to convert current selected time to text string.

9. Creating a function named as addEventToCalendar(). This is our main function. It is used to add Event in our Calendar. Now one more main thing. Our event start time is Current time and event end time is after 1 hour. You can give your own time here as per your choice.

10. Creating return() block, Now here we would make 1 Text component to show the current time, 1 Text Input to get event title from user and 1 button to add event.

11. Creating Style.

12. Complete Source Code for App.js file :-

Screenshots :-

Example of React Native Add Calendar Event NPM YARN

Leave a Reply

Your email address will not be published.