{"id":19014535,"url":"https://github.com/deeptiman/react-native-todolist","last_synced_at":"2025-06-15T14:09:39.103Z","repository":{"id":144413245,"uuid":"268187308","full_name":"Deeptiman/react-native-todolist","owner":"Deeptiman","description":"A Todolist application with Google \u0026 Microsoft Calendar Integration","archived":false,"fork":false,"pushed_at":"2020-06-19T13:49:09.000Z","size":18857,"stargazers_count":21,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-23T00:45:38.922Z","etag":null,"topics":["facebook-sign-in","firebase-auth","firebase-cloud-messaging","firebase-database","google-calendar-api","google-calendar-synchronization","google-drive-api","google-drive-uploader","google-drive-wrapper","google-signin","microsoft-graph-api","microsoft-graph-client","microsoft-login","microsoft-outlook","microsoft-outlook-client","onedrive-api","onedrive-sdk","onedrive-storage","react-native","redux"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Deeptiman.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-31T01:13:36.000Z","updated_at":"2024-12-12T17:14:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"37b8dff3-6489-4b0f-b266-4d74ffb4907d","html_url":"https://github.com/Deeptiman/react-native-todolist","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Deeptiman/react-native-todolist","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Deeptiman%2Freact-native-todolist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Deeptiman%2Freact-native-todolist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Deeptiman%2Freact-native-todolist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Deeptiman%2Freact-native-todolist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Deeptiman","download_url":"https://codeload.github.com/Deeptiman/react-native-todolist/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Deeptiman%2Freact-native-todolist/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259987100,"owners_count":22942118,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["facebook-sign-in","firebase-auth","firebase-cloud-messaging","firebase-database","google-calendar-api","google-calendar-synchronization","google-drive-api","google-drive-uploader","google-drive-wrapper","google-signin","microsoft-graph-api","microsoft-graph-client","microsoft-login","microsoft-outlook","microsoft-outlook-client","onedrive-api","onedrive-sdk","onedrive-storage","react-native","redux"],"created_at":"2024-11-08T19:29:53.859Z","updated_at":"2025-06-15T14:09:39.084Z","avatar_url":"https://github.com/Deeptiman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 id=\"react-native-todolist\"\u003ereact-native-todolist\u003c/h1\u003e\n\u003cp\u003e     \u003cimg alt=\"GitHub last commit\" src=\"https://img.shields.io/github/last-commit/Deeptiman/react-native-todolist\"\u003e  \u003cimg alt=\"GitHub language count\" src=\"https://img.shields.io/github/languages/count/Deeptiman/react-native-todolist\"\u003e \u003cimg alt=\"GitHub top language\" src=\"https://img.shields.io/github/languages/top/Deeptiman/react-native-todolist\"\u003e\u003c/p\u003e\n\u003cp\u003eThe react-native-todolist application is a cross-platform mobile application developed using the React-Native framework with Redux implementation. The application has features to create a calendar in both Google \u0026amp; Microsoft cloud platforms, users can also receive a push notification from the server based on topic subscription.\u003c/p\u003e\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"screenshots/react_native_logo.png\" width=\"150\" height=\"150\"/\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"screenshots/redux.png\" width=\"250\" height=\"200\"/\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ch1 id=\"features-\"\u003eFeatures!\u003c/h1\u003e\n\u003cul\u003e\n\u003cli\u003eSocial SignIn with Google, Microsoft, Facebook.\u003c/li\u003e\n\u003cli\u003eGoogle \u0026amp; Microsoft Calendar integration that users can create new events.\u003c/li\u003e\n\u003cli\u003eUpload attachments with Google Drive and One Drive. \u003c/li\u003e\n\u003cli\u003eShare events with social apps.\u003c/li\u003e\n\u003cli\u003eReceive push-notification from the server based on topic subscription.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch1 id=\"installing-dependencies\"\u003eInstalling dependencies\u003c/h1\u003e\n\u003cp\u003e There are few environment setups required to install the dependencies for the development of a cross-platform application using React-Native.\u003c/p\u003e\n\u003ch5 id=\"react-native-cli-setup\"\u003eReact-Native Cli Setup\u003c/h5\u003e\n\u003cul\u003e\n\u003cli\u003eDownload and Install Node.js\u003cul\u003e\n\u003cli\u003eWindows \u0026amp; macOS - \u003ca href=\"https://nodejs.org/en/download/\"\u003ehttps://nodejs.org/en/download/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eLinux - \u003ccode\u003esudo apt install nodejs npm\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eReact-Native Cli can install using npm command\n  \u003ccode\u003enpm install -g react-native-cli\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch5 id=\"android-installation-dependencies\"\u003eAndroid Installation dependencies\u003c/h5\u003e\n\u003cul\u003e\n\u003cli\u003eThe Android development setup requires Android Studio and JDK (Java Development Kit).\u003c/li\u003e\n\u003cli\u003e\u003ch6 id=\"java-development-kit-https-www-oracle-com-java-technologies-javase-jdk8-downloads-html\"\u003eJava Development Kit : \u003ca href=\"https://www.oracle.com/java/technologies/javase-jdk8-downloads.html\"\u003ehttps://www.oracle.com/java/technologies/javase-jdk8-downloads.html\u003c/a\u003e\u003c/h6\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ch6 id=\"install-android-studio-\"\u003eInstall Android Studio :\u003c/h6\u003e\n\u003cp\u003e  Download and Install Android Studio with the following link which can be used to install across all operating systems (Windows, Linux \u0026amp; macOS).\n\u003ca href=\"https://developer.android.com/studio/index.html\"\u003ehttps://developer.android.com/studio/index.html\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003eConfigure \u003ccode\u003eANDROID_HOME\u003c/code\u003e environmental variable\u003ch6 id=\"windows-\"\u003eWindows -\u003c/h6\u003e\n\u003cul\u003e\n\u003cli\u003eRight Click on \u003ccode\u003eMy Computer\u003c/code\u003e .\u003c/li\u003e\n\u003cli\u003eClick on \u003ccode\u003eProperties\u003c/code\u003e then in the left panel Choose \u003ccode\u003eAdvanced system settings\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eIn the dialog box Click on \u003ccode\u003eEnvironment Variables\u003c/code\u003e .\u003c/li\u003e\n\u003cli\u003eAfter that in the user variable click on \u003ccode\u003eNew\u003c/code\u003e and create a new \u003ccode\u003eANDROID_HOME\u003c/code\u003e variable and the value will the local installation path of Android SDK\u003ch6 id=\"linux-mac-os-\"\u003eLinux \u0026amp; Mac OS -\u003c/h6\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ch6 id=\"open-the-terminal-and-type\"\u003eOpen the terminal and type\u003c/h6\u003e\n  \u003cp\u003e\u003ccode\u003e$nano ~/.bash_profile\u003c/code\u003e\u003c/p\u003e\n  \u003cp\u003e\u003ccode\u003e$ export ANDROID_HOME=/YOUR_PATH_TO/android-sdk\u003c/code\u003e\u003c/p\u003e\n  \u003cp\u003e\u003ccode\u003e$ export PATH=$ANDROID_HOME/platform-tools:$PATH\u003c/code\u003e\u003c/p\u003e\n  \u003cp\u003e\u003ccode\u003e$source ~/.bash_profile\u003c/code\u003e\u003c/p\u003e \u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch5 id=\"ios-installation-dependencies\"\u003eiOS Installation dependencies\u003c/h5\u003e\n\u003cul\u003e\n\u003cli\u003eThe iOS installation depends on Xcode that can be installed via the mac AppStore.\u003c/li\u003e\n\u003cli\u003e\u003cp\u003eThe latest version of \u003ccode\u003eXcode 9.4\u003c/code\u003e or the latest has to be installed in the system\u003c/p\u003e\n\u003ch5 id=\"xcode-command-line-tools\"\u003eXcode Command Line Tools\u003c/h5\u003e\n\u003cp\u003e  There are a few Xcode command-line tools that need to be installed.\u003c/p\u003e\n\u003cimg src=\"screenshots/xcode.png\" width=\"600\" height=\"550\"/\u003e\n\u003cul\u003e\n\u003cli\u003eOpen \u003ccode\u003eXcode\u003c/code\u003e , then choose \u003ccode\u003ePreference\u003c/code\u003e from the Xcode menu.\u003c/li\u003e\n\u003cli\u003e\u003cp\u003eGo to the \u003ccode\u003eLocation\u003c/code\u003e panel and install the tools by selecting from the most recent version of the command-line tool from the dropdown.\u003c/p\u003e\n\u003ch5 id=\"installing-ios-simulator-in-xcode\"\u003eInstalling iOS simulator in Xcode\u003c/h5\u003e\n\u003cp\u003eOpen \u003ccode\u003eXcode\u003c/code\u003e -\u0026gt; Preference and then select a simulator that will be compatible with the installed \u003ccode\u003eiOS\u003c/code\u003e version.\u003c/p\u003e\n\u003ch5 id=\"cocoapods\"\u003eCocoaPods\u003c/h5\u003e\n\u003cp\u003eThis is a dependency manager that will install the required libraries for iOS development. The CocoaPods application is written in Ruby.\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003esudo gem install cocoapods\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eFor more information on CocoaPods Guide -\n\u003ca href=\"https://guides.cocoapods.org/using/getting-started.html\"\u003ehttps://guides.cocoapods.org/using/getting-started.html\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"running-react-native-application\"\u003eRunning React-Native application\u003c/h3\u003e\n\u003cp\u003eTo start the application on both \u003ccode\u003eAndroid\u003c/code\u003e \u0026amp; \u003ccode\u003eiOS\u003c/code\u003e , there are two different command needs to be followed.\u003c/p\u003e\n\u003ch5 id=\"android-npx-react-native-run-android-\"\u003eAndroid - \u003ccode\u003enpx react- native run-android\u003c/code\u003e\u003c/h5\u003e\n\u003ch5 id=\"ios-npx-react-native-run-ios-\"\u003eiOS - \u003ccode\u003enpx react- native run-ios\u003c/code\u003e\u003c/h5\u003e\n\u003cimg src=\"screenshots/redux.png\" width=\"250\" height=\"200\"/\u003e\n\u003cp\u003eRedux is an open-source JavaScript library for managing and organizing application state . There are major concepts like \u003ccode\u003eactions\u003c/code\u003e , \u003ccode\u003ereducers\u003c/code\u003e , and \u003ccode\u003estores\u003c/code\u003e that Redux provides to implement a universal state for an entire application lifecycle.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003eOfficial Documentation - \u003ca href=\"https://redux.js.org/\"\u003ehttps://redux.js.org/\u003c/a\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cimg src=\"screenshots/npm.png\" width=\"200\" height=\"80\"/\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://www.npmjs.com/package/react-native-google-signin\"\u003ereact -native-google-signin\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.npmjs.com/package/react-native-app-auth\"\u003ereact -native-app-auth\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.npmjs.com/package/react-native-fbsdk\"\u003ereact -native-fbsdk\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.npmjs.com/package/@react-native-firebase/auth\"\u003e@react -native-firebase/auth\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.npmjs.com/package/@react-native-firebase/database\"\u003e@react -native-firebase/database\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.npmjs.com/package/@react-native-firebase/messaging\"\u003e@react -native-firebase/messaging\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.npmjs.com/package/react-native-google-drive-api-wrapper\"\u003ereact -native-google-drive-api-wrapper\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.npmjs.com/package/react-native-share\"\u003ereact -native-share\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch1 id=\"social-signin-google-microsoft-facebook-\"\u003eSocial SignIn (Google, Microsoft, Facebook)\u003c/h1\u003e\n\u003cp\u003eThe application supports Social SignIn that users can authenticate into the app using \u003ccode\u003eGoogle\u003c/code\u003e , \u003ccode\u003eMicrosoft\u003c/code\u003e , \u003ccode\u003eFacebook\u003c/code\u003e, and also normal email-based SignIn integrated Google \u003ccode\u003eFirebase\u003c/code\u003e.\u003c/p\u003e\n\u003ch5 id=\"code-location\"\u003eCode Location\u003c/h5\u003e\n\u003cpre\u003e\u003ccode class=\"lang-sh\"\u003e    - \u003cspan class=\"hljs-regexp\"\u003e/src/\u003c/span\u003ecomponents\u003cspan class=\"hljs-regexp\"\u003e/login/\u003c/span\u003eLoginComponent.js\n\u003c/code\u003e\u003c/pre\u003e\n\u003cimg src=\"screenshots/sign_in_google.PNG\"/\u003e\n\u003cp\u003eIn the configuration initialization, there are required scopes that need to be defined. As these applications need \u003ccode\u003eGoogle Calendar\u003c/code\u003e , \u003ccode\u003eGoogle Drive\u003c/code\u003e integration of the APIs needs to be enabled in the \u003ccode\u003eGoogle Cloud Platform\u003c/code\u003e. And the API access scopes are required to mention in the scope array. So, that during User login it will show as a consent screen that what are access list is required from the user Google account.\u003c/p\u003e\n\u003ch4 id=\"scope\"\u003eScope\u003c/h4\u003e\n\u003cpre\u003e\u003ccode class=\"lang-sh\"\u003eGoogleSignin.configure({\n    \u003cspan class=\"hljs-attribute\"\u003escopes\u003c/span\u003e : [\n        'https://www\u003cspan class=\"hljs-variable\"\u003e.googleapis\u003c/span\u003e\u003cspan class=\"hljs-variable\"\u003e.com\u003c/span\u003e/auth/calendar\u003cspan class=\"hljs-variable\"\u003e.readonly\u003c/span\u003e',\n        'https://www\u003cspan class=\"hljs-variable\"\u003e.googleapis\u003c/span\u003e\u003cspan class=\"hljs-variable\"\u003e.com\u003c/span\u003e/auth/calendar' ,\n        'https://www\u003cspan class=\"hljs-variable\"\u003e.googleapis\u003c/span\u003e\u003cspan class=\"hljs-variable\"\u003e.com\u003c/span\u003e/auth/calendar\u003cspan class=\"hljs-variable\"\u003e.events\u003c/span\u003e' ,\n        'https://www\u003cspan class=\"hljs-variable\"\u003e.googleapis\u003c/span\u003e\u003cspan class=\"hljs-variable\"\u003e.com\u003c/span\u003e/auth/drive' ,\n        'https://www\u003cspan class=\"hljs-variable\"\u003e.googleapis\u003c/span\u003e\u003cspan class=\"hljs-variable\"\u003e.com\u003c/span\u003e/auth/drive\u003cspan class=\"hljs-variable\"\u003e.appdata\u003c/span\u003e' ,\n        'https://www\u003cspan class=\"hljs-variable\"\u003e.googleapis\u003c/span\u003e\u003cspan class=\"hljs-variable\"\u003e.com\u003c/span\u003e/auth/drive\u003cspan class=\"hljs-variable\"\u003e.file\u003c/span\u003e' ,\n        'https://www\u003cspan class=\"hljs-variable\"\u003e.googleapis\u003c/span\u003e\u003cspan class=\"hljs-variable\"\u003e.com\u003c/span\u003e/auth/drive\u003cspan class=\"hljs-variable\"\u003e.readonly\u003c/span\u003e' ,\n        'https://www\u003cspan class=\"hljs-variable\"\u003e.googleapis\u003c/span\u003e\u003cspan class=\"hljs-variable\"\u003e.com\u003c/span\u003e/auth/drive\u003cspan class=\"hljs-variable\"\u003e.metadata\u003c/span\u003e\u003cspan class=\"hljs-variable\"\u003e.readonly\u003c/span\u003e' ,\n        'https://www\u003cspan class=\"hljs-variable\"\u003e.googleapis\u003c/span\u003e\u003cspan class=\"hljs-variable\"\u003e.com\u003c/span\u003e/auth/drive\u003cspan class=\"hljs-variable\"\u003e.metadata\u003c/span\u003e' ,\n        'https://www\u003cspan class=\"hljs-variable\"\u003e.googleapis\u003c/span\u003e\u003cspan class=\"hljs-variable\"\u003e.com\u003c/span\u003e/auth/drive\u003cspan class=\"hljs-variable\"\u003e.photos\u003c/span\u003e\u003cspan class=\"hljs-variable\"\u003e.readonly\u003c/span\u003e' \n    ],\n    webClientId :'YOUR_WEB_CLIENT_ID' ,\n    forceConsentPrompt : true\n});\n\u003c/code\u003e\u003c/pre\u003e\n\u003cimg src=\"screenshots/sign_in_microsoft.PNG\"/\u003e\n\u003cp\u003eThe \u003ccode\u003eMicrosoft SignIn\u003c/code\u003e is integrated by using the \u003ccode\u003ereact-native-app-auth\u003c/code\u003e module. This module provides an \u003ccode\u003eOAuth\u003c/code\u003e based client authentication the technique that the developer can pass the configuration details for any cloud platforms to integrate the authentication module.\u003c/p\u003e\n\u003ch5 id=\"code-location\"\u003eCode location\u003c/h5\u003e\n\u003cpre\u003e\u003ccode class=\"lang-sh\"\u003e- \u003cspan class=\"hljs-regexp\"\u003e/src/\u003c/span\u003ecomponents\u003cspan class=\"hljs-regexp\"\u003e/auth/\u003c/span\u003eMSAuthManager.js\n- \u003cspan class=\"hljs-regexp\"\u003e/src/\u003c/span\u003ecomponents\u003cspan class=\"hljs-regexp\"\u003e/auth/\u003c/span\u003eMSGraphAuthProvider.js\n- \u003cspan class=\"hljs-regexp\"\u003e/src/\u003c/span\u003ecomponents\u003cspan class=\"hljs-regexp\"\u003e/auth/\u003c/span\u003eMSGraphManager.js\n- \u003cspan class=\"hljs-regexp\"\u003e/src/\u003c/span\u003ecomponents\u003cspan class=\"hljs-regexp\"\u003e/login/\u003c/span\u003eLoginComponent.js\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch4 id=\"scope\"\u003eScope\u003c/h4\u003e\n\u003cpre\u003e\u003ccode class=\"lang-sh\"\u003econst config = {\n      \u003cspan class=\"hljs-string\"\u003eclientId :\u003c/span\u003e \u003cspan class=\"hljs-string\"\u003e'YOUR_MICROSOFT_AZURE_CLIENT_ID'\u003c/span\u003e ,\n      \u003cspan class=\"hljs-string\"\u003eredirectUrl :\u003c/span\u003e Platform.OS === \u003cspan class=\"hljs-string\"\u003e'ios'\u003c/span\u003e ? 'YOUR_MICROSOFT_AZURE_IO_REDIRECT_URL' :\n      \u003cspan class=\"hljs-string\"\u003e'graph-tutorial://react-native-auth'\u003c/span\u003e ,\n      \u003cspan class=\"hljs-string\"\u003escopes :\u003c/span\u003e [\n            \u003cspan class=\"hljs-string\"\u003e'openid'\u003c/span\u003e ,\n            \u003cspan class=\"hljs-string\"\u003e'offline_access'\u003c/span\u003e ,\n            \u003cspan class=\"hljs-string\"\u003e'profile'\u003c/span\u003e ,\n            \u003cspan class=\"hljs-string\"\u003e'user.read'\u003c/span\u003e ,\n            \u003cspan class=\"hljs-string\"\u003e'Calendars.ReadWrite'\u003c/span\u003e ,\n            \u003cspan class=\"hljs-string\"\u003e'Files.ReadWrite.All'\u003c/span\u003e ,\n            \u003cspan class=\"hljs-string\"\u003e'Sites.ReadWrite.All'\u003c/span\u003e ,\n            \u003cspan class=\"hljs-string\"\u003e'MailboxSettings.ReadWrite'\u003c/span\u003e\n      ],\n      \u003cspan class=\"hljs-string\"\u003eadditionalParameters :\u003c/span\u003e { \u003cspan class=\"hljs-string\"\u003eprompt :\u003c/span\u003e \u003cspan class=\"hljs-string\"\u003e'select_account'\u003c/span\u003e },\n      \u003cspan class=\"hljs-string\"\u003eserviceConfiguration :\u003c/span\u003e {\n            \u003cspan class=\"hljs-string\"\u003eauthorizationEndpoint : 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize'\u003c/span\u003e\n            \u003cspan class=\"hljs-string\"\u003etokenEndpoint : 'https://login.microsoftonline.com/common/oauth2/v2.0/token'\u003c/span\u003e\n      }\n};\n\u003c/code\u003e\u003c/pre\u003e\n\u003cimg src=\"screenshots/sign_in_facebook.PNG\"/\u003e\n\u003cp\u003eThe \u003ccode\u003eFacebook\u003c/code\u003e SignIn integration requires the \u003ccode\u003ereact-native-fbsdk\u003c/code\u003e module that provides several \u003ccode\u003eFacebook Graph APIs\u003c/code\u003e request.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"lang-sh\"\u003e_signInWithFacebook = \u003cspan class=\"hljs-keyword\"\u003easync\u003c/span\u003e () =\u0026gt; {\n\u003cspan class=\"hljs-keyword\"\u003econst\u003c/span\u003e result = \u003cspan class=\"hljs-keyword\"\u003eawait\u003c/span\u003e LoginManager.logInWithPermissions([ \u003cspan class=\"hljs-string\"\u003e'public_profile', 'email'\u003c/span\u003e]); \n      \u003cspan class=\"hljs-keyword\"\u003eif\u003c/span\u003e (result.isCancelled) {\n          \u003cspan class=\"hljs-built_in\"\u003econsole\u003c/span\u003e .log( \u003cspan class=\"hljs-string\"\u003e'User cancelled the login process'\u003c/span\u003e );\n      } \u003cspan class=\"hljs-keyword\"\u003eelse\u003c/span\u003e {\n          \u003cspan class=\"hljs-comment\"\u003e// Once signed in, get the users AccesToken\u003c/span\u003e\n          \u003cspan class=\"hljs-keyword\"\u003econst\u003c/span\u003e data = \u003cspan class=\"hljs-keyword\"\u003eawait\u003c/span\u003e AccessToken.getCurrentAccessToken();\n          \u003cspan class=\"hljs-keyword\"\u003eif\u003c/span\u003e (!data) {\n              \u003cspan class=\"hljs-built_in\"\u003econsole\u003c/span\u003e .log( \u003cspan class=\"hljs-string\"\u003e'Something went wrong obtaining access token'\u003c/span\u003e );\n               }\n              \u003cspan class=\"hljs-built_in\"\u003econsole\u003c/span\u003e .log( \u003cspan class=\"hljs-string\"\u003e\"FACEBOOK ACCESS TOKEN :::: \"\u003c/span\u003e + data.accessToken)\n             \u003cspan class=\"hljs-keyword\"\u003econst\u003c/span\u003e facebookCredential = auth.\n              FacebookAuthProvider.credential(data.accessToken);\n              \u003cspan class=\"hljs-keyword\"\u003eawait\u003c/span\u003e auth().signInWithCredential(facebookCredential);\n              \u003cspan class=\"hljs-keyword\"\u003econst\u003c/span\u003e infoRequest = \u003cspan class=\"hljs-keyword\"\u003eawait\u003c/span\u003e \u003cspan class=\"hljs-keyword\"\u003enew\u003c/span\u003e GraphRequest( \u003cspan class=\"hljs-string\"\u003e'/me'\u003c/span\u003e , {\n              \u003cspan class=\"hljs-attr\"\u003eparameters\u003c/span\u003e : {\n                \u003cspan class=\"hljs-string\"\u003e'fields'\u003c/span\u003e : {\n                  \u003cspan class=\"hljs-string\"\u003e'string'\u003c/span\u003e : \u003cspan class=\"hljs-string\"\u003e'email,first_name,last_name,picture'\u003c/span\u003e\n                 }\n              }\n      }, (err, res) =\u0026gt; {\n      });\n      \u003cspan class=\"hljs-keyword\"\u003eawait\u003c/span\u003e \u003cspan class=\"hljs-keyword\"\u003enew\u003c/span\u003e GraphRequestManager().addRequest(infoRequest).start();\n      }\n}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cimg src=\"screenshots/sign_in_email.PNG\"/\u003e\n\u003cp\u003eThe application uses \u003ccode\u003eEmail\u003c/code\u003e based SignIn with \u003ccode\u003eFirebase\u003c/code\u003e using the  \u003ccode\u003ereact-native-firebase\u003c/code\u003e module. The implementation is simple that developers need to pass only \u003ccode\u003eemail\u003c/code\u003e \u0026amp; \u003ccode\u003epassword\u003c/code\u003e parameters without any other configuration requirements. However, the \u003ccode\u003eFirebase\u003c/code\u003e App needs to created in the \u003ccode\u003eFirebase Cloud Platform\u003c/code\u003e before integrating it into the application.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"lang-sh\"\u003e\u003cspan class=\"hljs-function\"\u003e\u003cspan class=\"hljs-title\"\u003e_signInWithEmail\u003c/span\u003e = \u003cspan class=\"hljs-params\"\u003e()\u003c/span\u003e =\u0026gt;\u003c/span\u003e {\n    auth()\n    .signInWithEmailAndPassword( \u003cspan class=\"hljs-keyword\"\u003ethis\u003c/span\u003e .state.email, \u003cspan class=\"hljs-keyword\"\u003ethis\u003c/span\u003e .state.password)\n    .\u003cspan class=\"hljs-keyword\"\u003ethen\u003c/span\u003e(\u003cspan class=\"hljs-function\"\u003e\u003cspan class=\"hljs-params\"\u003e(data)\u003c/span\u003e =\u0026gt;\u003c/span\u003e {\n    \u003cspan class=\"hljs-built_in\"\u003econsole\u003c/span\u003e .log( \u003cspan class=\"hljs-string\"\u003e\"Successful SignIn\"\u003c/span\u003e )\n    })\n    .\u003cspan class=\"hljs-keyword\"\u003ecatch\u003c/span\u003e(\u003cspan class=\"hljs-function\"\u003e\u003cspan class=\"hljs-params\"\u003e(error)\u003c/span\u003e =\u0026gt;\u003c/span\u003e {\n    Alert.alert( \u003cspan class=\"hljs-string\"\u003e'Error'\u003c/span\u003e , \u003cspan class=\"hljs-string\"\u003e'Signin Error - '\u003c/span\u003e + error.message);\n    })\n}\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch1 id=\"calendar-integration\"\u003eCalendar Integration\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eGoogle Calendar\u003c/code\u003e and \u003ccode\u003eMicrosoft Calendar\u003c/code\u003e are the major cloud-based calendar\nintegration in the application. However, the application also allows creating a calendar for \u003ccode\u003eFacebook\u003c/code\u003e and \u003ccode\u003eFirebase\u003c/code\u003e SignIn users that the calendar data get stored in the \u003ccode\u003eFirebase Database\u003c/code\u003e.\u003c/p\u003e\n\u003cimg src=\"screenshots/google_calendar.png\" width=\"200\" height=\"150\"/\u003e\n\u003cp\u003eIn this application, users can create a \u003ccode\u003eGoogle Calendar\u003c/code\u003e with \u003ccode\u003eattachments\u003c/code\u003e, \u003ccode\u003eevent colors\u003c/code\u003e, \u003ccode\u003eHangout Conference\u003c/code\u003e , \u003ccode\u003eInviting Attendees\u003c/code\u003e to an event. So, Google Calendar provides Cloud-based REST APIs that can be integrated into the application.\u003c/p\u003e\n\u003ch5 id=\"code-location\"\u003eCode location\u003c/h5\u003e\n\u003cpre\u003e\u003ccode class=\"lang-sh\"\u003e\u003cspan class=\"hljs-bullet\"\u003e- \u003c/span\u003e/src/actions/GoogleCalendar.js\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch6 id=\"google-calendar-api-https-developers-google-com-calendar-v3-reference\"\u003eGoogle Calendar API : \u003ca href=\"https://developers.google.com/calendar/v3/reference\"\u003ehttps://developers.google.com/calendar/v3/reference\u003c/a\u003e\u003c/h6\u003e\n\u003cimg src=\"screenshots/google_drive.png\" width=\"100\" height=\"100\"/\u003e\n\u003cp\u003eThe \u003ccode\u003ereact-native-google-drive-api-wrapper\u003c/code\u003e module has been integrated to upload a file into \u003ccode\u003eGoogle Drive\u003c/code\u003e. The request body contains the \u003ccode\u003ebase64\u003c/code\u003e blob for the local storage file.\u003c/p\u003e\n\u003cimg src=\"screenshots/microsoft_calendar.jpg\" width=\"300\" height=\"100\"/\u003e\n\u003cp\u003eIn this application, user can create a \u003ccode\u003eMicrosoft calendar\u003c/code\u003e with additional features like create \u003ccode\u003eTeam conference\u003c/code\u003e , \u003ccode\u003eevent color\u003c/code\u003e, \u003ccode\u003eadd attachments\u003c/code\u003e to an event, \u003ccode\u003einvite attendees\u003c/code\u003e to an event.\u003c/p\u003e\n\u003ch5 id=\"code-location\"\u003eCode location\u003c/h5\u003e\n\u003cpre\u003e\u003ccode class=\"lang-sh\"\u003e\u003cspan class=\"hljs-bullet\"\u003e- \u003c/span\u003e/src/actions/MicrosoftCalendar.js\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch6 id=\"microsoft-graph-api-https-docs-microsoft-com-en-us-graph-api-resources-calendar-view-graph-rest-beta\"\u003eMicrosoft Graph API : \u003ca href=\"https://docs.microsoft.com/en-us/graph/api/resources/calendar?view=graph-rest-beta\"\u003ehttps://docs.microsoft.com/en-us/graph/api/resources/calendar?view=graph-rest-beta\u003c/a\u003e\u003c/h6\u003e\n\u003cimg src=\"screenshots/onedrive.png\" width=\"90\" height=\"90\"/\u003e\n\u003cp\u003eThe attachments integration to an event requires several layers of \u003ccode\u003eMicrosoft Graph API\u003c/code\u003e request. The feature requires to integrate \u003ccode\u003eOneDrive\u003c/code\u003e into the API request flow.\u003c/p\u003e\n\u003ch5 id=\"api-request-flow\"\u003eAPI request flow\u003c/h5\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ch5 id=\"upload-file\"\u003eUpload file\u003c/h5\u003e\n  In the first step, the files need to upload into the \u003ccode\u003eOneDrive\u003c/code\u003e cloud to receive the list of \u003ccode\u003eOneDrive IDs\u003c/code\u003e for each file. The \u003ccode\u003ebase64\u003c/code\u003e blob will be sent in the request parameter.\u003c/li\u003e\n\u003cli\u003e\u003ch5 id=\"create-a-share-link\"\u003eCreate a Share Link\u003c/h5\u003e\n After uploading each file into the \u003ccode\u003eOneDrive\u003c/code\u003e , a \u003ccode\u003eshareable link\u003c/code\u003e needs to be created using \u003ccode\u003eMicrosoft Graph API\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003ch5 id=\"add-shareable-link-to-the-event\"\u003eAdd Shareable Link to the event\u003c/h5\u003e\n  The shareable link can be added to an event after the event creation. \u003ccode\u003eMicrosoft Graph API\u003c/code\u003e doesn\u0026#39;t include attachments request parameters in the event creation. So, there is a completely separate API to attach a link to the events using the created eventId.\u003c/li\u003e\n\u003cli\u003e\u003ch5 id=\"send-invite-for-access-permission\"\u003eSend Invite for access permission\u003c/h5\u003e\n  To access the attached link of the event, each attendee needs access permission from the \u003ccode\u003eorganizer\u003c/code\u003e. So, in the request parameter the array of attendees email needs to be included.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cimg src=\"screenshots/firebase.png\" width=\"300\" height=\"100\"/\u003e\n\u003cp\u003eThe users that are signed-in via \u003ccode\u003eFacebook\u003c/code\u003e and \u003ccode\u003eFirebase\u003c/code\u003e can able to create a calendar with Firebase database but the features like adding attachments, online conference, invite attendees, set reminders will not be supported.\u003c/p\u003e\n\u003ch5 id=\"code-location\"\u003eCode location\u003c/h5\u003e\n\u003cpre\u003e\u003ccode class=\"lang-sh\"\u003e\u003cspan class=\"hljs-bullet\"\u003e- \u003c/span\u003e/src/actions/FirebaseCalendar.js\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch2 id=\"share-events-to-social-apps\"\u003eShare Events to Social Apps\u003c/h2\u003e\n\u003cp\u003eIn this application, the user can share an event in any \u003ccode\u003eSocial Apps\u003c/code\u003e. However the sharing functionality will only work with \u003ccode\u003eGoogle\u003c/code\u003e \u0026amp; \u003ccode\u003eMicrosoft\u003c/code\u003e created events that generates an event web link.\u003c/p\u003e\n\u003ch5 id=\"code-location\"\u003eCode location\u003c/h5\u003e\n\u003cpre\u003e\u003ccode class=\"lang-sh\"\u003e- \u003cspan class=\"hljs-regexp\"\u003e/src/\u003c/span\u003ecomponents\u003cspan class=\"hljs-regexp\"\u003e/calendar/\u003c/span\u003eEventDetailsComponent.js\n\u003c/code\u003e\u003c/pre\u003e\n\u003cimg src=\"screenshots/fcm.png\" width=\"300\" height=\"150\"/\u003e\n\u003ch2 id=\"push-notification\"\u003ePush Notification\u003c/h2\u003e\n\u003cp\u003eThis application has a feature that the user can receive a \u003ccode\u003epush notification\u003c/code\u003e via \u003ccode\u003eFirebase Cloud Messaging\u003c/code\u003e service. User can subscribe to a topic to receive notification an alert.\u003c/p\u003e\n\u003ch3 id=\"sending-push-notification-api\"\u003eSending Push Notification API\u003c/h3\u003e\n\u003ch5 id=\"api-endpoint\"\u003eAPI endpoint\u003c/h5\u003e\n\u003cpre\u003e\u003ccode class=\"lang-sh\"\u003ehttps:\u003cspan class=\"hljs-regexp\"\u003e//\u003c/span\u003efcm.googleapis.com\u003cspan class=\"hljs-regexp\"\u003e/fcm/\u003c/span\u003esend\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch5 id=\"request-payload\"\u003eRequest Payload\u003c/h5\u003e\n\u003cpre\u003e\u003ccode class=\"lang-sh\"\u003e{\n    \u003cspan class=\"hljs-attr\"\u003e\"notification\"\u003c/span\u003e: {\n        \u003cspan class=\"hljs-attr\"\u003e\"title\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"Spacex successfully launched first crew to orbit\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"body\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"NASA astronauts Bob Behnken and Doug Hurley are on their way to the space station\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"icon\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"mipmap/ic_app_logo\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"color\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"#000\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"tag\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"Science\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"local_only\"\u003c/span\u003e: \u003cspan class=\"hljs-literal\"\u003etrue\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"default_sound\"\u003c/span\u003e: \u003cspan class=\"hljs-literal\"\u003etrue\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"notification_priority\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"high\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"visibility\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"public\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"sound\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"default\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"channel_id\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"test-channel\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"image\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"https://example.com/test.png\"\u003c/span\u003e\n    },\n    \u003cspan class=\"hljs-attr\"\u003e\"data\"\u003c/span\u003e: {\n        \u003cspan class=\"hljs-attr\"\u003e\"title\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"Spacex successfully launched first crew to orbit\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"body\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"NASA astronauts Bob Behnken and Doug Hurley are on their way to the space station\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"topic\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"Science\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"small_text\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"hello\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"big_text\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"NASA astronauts Bob Behnken and Doug Hurley are on their way to the space station\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"time\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"273737\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"image\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"https://example.com/test.png\"\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"foreground\"\u003c/span\u003e: \u003cspan class=\"hljs-literal\"\u003etrue\u003c/span\u003e,\n        \u003cspan class=\"hljs-attr\"\u003e\"android_channel_id\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"test-channel\"\u003c/span\u003e\n },\n    \u003cspan class=\"hljs-attr\"\u003e\"priority\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"high\"\u003c/span\u003e,\n    \u003cspan class=\"hljs-attr\"\u003e\"to\"\u003c/span\u003e: \u003cspan class=\"hljs-string\"\u003e\"/topics/Science\"\u003c/span\u003e\n}\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch2 id=\"screenshots\"\u003eScreenshots\u003c/h2\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cp\u003e\u003cb\u003eSignIn\u003c/b\u003e\u003c/p\u003e\n      \u003cimg src=\"screenshots/mobile_signin.png\" width=\"300\" height=\"600\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cp\u003e\u003cb\u003eCalendar\u003c/b\u003e\u003c/p\u003e\n      \u003cimg src=\"screenshots/mobile_calendar.png\" width=\"300\" height=\"600\"/\u003e\n    \u003c/td\u003e\n   \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cp\u003e\u003cb\u003eSearch Planners\u003c/b\u003e\u003c/p\u003e\n      \u003cimg src=\"screenshots/mobile_all_calendars.png\" width=\"300\" height=\"600\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cp\u003e\u003cb\u003eCreate Calendar\u003c/b\u003e\u003c/p\u003e\n      \u003cimg src=\"screenshots/mobile_create_planner.png\" width=\"300\" height=\"600\"/\u003e\n    \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cp\u003e\u003cb\u003eCalendar Created Alert\u003c/b\u003e\u003c/p\u003e\n      \u003cimg src=\"screenshots/mobile_create_calendar.png\" width=\"300\" height=\"600\"/\u003e\n    \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cp\u003e\u003cb\u003eView Planner\u003c/b\u003e\u003c/p\u003e\n      \u003cimg src=\"screenshots/mobile_planner.png\" width=\"300\" height=\"600\"/\u003e\n    \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cp\u003e\u003cb\u003eShare Planner\u003c/b\u003e\u003c/p\u003e\n      \u003cimg src=\"screenshots/mobile_share_planner.png\" width=\"300\" height=\"600\"/\u003e\n    \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cp\u003e\u003cb\u003eNews Push Notification\u003c/b\u003e\u003c/p\u003e\n      \u003cimg src=\"screenshots/mobile_notification.png\" width=\"300\" height=\"600\"/\u003e\n    \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cp\u003e\u003cb\u003eNews\u003c/b\u003e\u003c/p\u003e\n      \u003cimg src=\"screenshots/mobile_news.png\" width=\"300\" height=\"600\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n \u003c/table\u003e\n \n\u003ch2\u003eReferences\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://reactnative.dev/docs/getting-started\"\u003eGetting Started with React-Native\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://redux.js.org/introduction/getting-started\"\u003eGetting Started with Redux\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://rnfirebase.io/\"\u003eReact Native Firebase\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2\u003eLicense\u003c/h2\u003e\n\u003cp\u003eThis project is licensed under the \u003ca href=\"https://github.com/Deeptiman/react-native-todolist/blob/master/LICENSE\"\u003eMIT License\u003c/a\u003e\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeeptiman%2Freact-native-todolist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeeptiman%2Freact-native-todolist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeeptiman%2Freact-native-todolist/lists"}