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.
1 |
npm install react-native-add-calendar-event --save |
OR
1 |
yarn add react-native-add-calendar-event |

1 |
npm install --save moment react-moment |
OR
1 |
yarn add react-moment |
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.
1 2 3 4 5 6 7 |
import React, { useState } from 'react'; import { Alert, StyleSheet, SafeAreaView, Text, TextInput, TouchableOpacity } from 'react-native'; import moment from 'moment'; import * as AddCalendarEvent from 'react-native-add-calendar-event'; |
5. Creating our main App component.
1 2 3 4 5 |
export default function App() { } |
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.
1 |
const [eventName, setEventName] = useState(''); |
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.
1 |
const CURRENT_TIME = moment.utc(); |
8. Creating a function named as currentTimeToString(). We would use this function to convert current selected time to text string.
1 2 3 4 |
const currentTimeToString = (momentInUTC) => { var temp = moment.utc(momentInUTC).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]'); return temp; }; |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const addEventToCalendar = (title, currentTime) => { const eventConfig = { title, startDate: currentTimeToString(currentTime), endDate: currentTimeToString(moment.utc(currentTime).add(1, 'hours')), notes: 'Party Time...', navigationBarIOS: { tintColor: 'black', backgroundColor: 'blue', titleColor: 'pink', }, }; AddCalendarEvent.presentEventCreatingDialog(eventConfig) .then((eventInfo) => { Alert.alert('eventInfo -> ' + JSON.stringify(eventInfo)); }) .catch((error) => { // handle error such as when user rejected permissions Alert.alert('Error -> ' + error); }); }; |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
return ( <SafeAreaView style={styleSheet.MainContainer}> <Text style={styleSheet.title_1}> React Native Add Calendar Event Example </Text> <Text style={styleSheet.title_2}> Event Date Time: {moment.utc(CURRENT_TIME).local().format('lll')} </Text> <TextInput value={eventName} onChangeText={ (value) => setEventName(value) } placeholder={'Enter Event Name'} style={styleSheet.textInput} /> <TouchableOpacity style={styleSheet.button} onPress={() => { addEventToCalendar(eventName, CURRENT_TIME) }}> <Text style={styleSheet.buttonText}> Add Event to Calendar </Text> </TouchableOpacity> </SafeAreaView> ); |
11. Creating Style.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, alignItems: 'center', padding: 8, }, textInput: { height: 44, borderColor: '#4CAF50', borderRadius: 7, borderWidth: 1, width: '80%', paddingHorizontal: 8, }, title_1: { color: 'red', fontSize: 24, textAlign: 'center', margin: 6, }, title_2: { color: 'black', fontSize: 16, textAlign: 'center', margin: 12, }, button: { width: '80%', height: 44, backgroundColor: '#00BFA5', margin: 15, justifyContent: 'center', alignItems: 'center' }, buttonText: { color: 'white', textAlign: 'center', fontSize: 18 } }); |
12. Complete Source Code for App.js file :-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
import React, { useState } from 'react'; import { Alert, StyleSheet, SafeAreaView, Text, TextInput, TouchableOpacity } from 'react-native'; import moment from 'moment'; import * as AddCalendarEvent from 'react-native-add-calendar-event'; export default function App() { const [eventName, setEventName] = useState(''); const CURRENT_TIME = moment.utc(); const currentTimeToString = (momentInUTC) => { var temp = moment.utc(momentInUTC).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]'); return temp; }; const addEventToCalendar = (title, currentTime) => { const eventConfig = { title, startDate: currentTimeToString(currentTime), endDate: currentTimeToString(moment.utc(currentTime).add(1, 'hours')), notes: 'Party Time...', navigationBarIOS: { tintColor: 'black', backgroundColor: 'blue', titleColor: 'pink', }, }; AddCalendarEvent.presentEventCreatingDialog(eventConfig) .then((eventInfo) => { Alert.alert('eventInfo -> ' + JSON.stringify(eventInfo)); }) .catch((error) => { // handle error such as when user rejected permissions Alert.alert('Error -> ' + error); }); }; return ( <SafeAreaView style={styleSheet.MainContainer}> <Text style={styleSheet.title_1}> React Native Add Calendar Event Example </Text> <Text style={styleSheet.title_2}> Event Date Time: {moment.utc(CURRENT_TIME).local().format('lll')} </Text> <TextInput value={eventName} onChangeText={ (value) => setEventName(value) } placeholder={'Enter Event Name'} style={styleSheet.textInput} /> <TouchableOpacity style={styleSheet.button} onPress={() => { addEventToCalendar(eventName, CURRENT_TIME) }}> <Text style={styleSheet.buttonText}> Add Event to Calendar </Text> </TouchableOpacity> </SafeAreaView> ); }; const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, alignItems: 'center', padding: 8, }, textInput: { height: 44, borderColor: '#4CAF50', borderRadius: 7, borderWidth: 1, width: '80%', paddingHorizontal: 8, }, title_1: { color: 'red', fontSize: 24, textAlign: 'center', margin: 6, }, title_2: { color: 'black', fontSize: 16, textAlign: 'center', margin: 12, }, button: { width: '80%', height: 44, backgroundColor: '#00BFA5', margin: 15, justifyContent: 'center', alignItems: 'center' }, buttonText: { color: 'white', textAlign: 'center', fontSize: 18 } }); |
Screenshots :-