| page_type | description | products | languages | ||||
|---|---|---|---|---|---|---|---|
|
sample
|
This sample demonstrates how to use the Microsoft Graph JavaScript SDK to access data in Office 365 from React Native apps.
|
|
|
Microsoft Graph sample React Native app
This sample demonstrates how to use the Microsoft Graph JavaScript SDK to access data in Office 365 from React Native mobile apps.
NOTE: This sample was originally built from a tutorial published on the Microsoft Graph tutorials page. That tutorial has been removed.
Prerequisites
To run the completed project in this folder, you need the following:
- A configured development environment for React Native using the React Native CLI. For instructions on configuring your environment, see Setting up the development environment.
- Either a personal Microsoft account with a mailbox on Outlook.com, or a Microsoft work or school account.
If you don't have a Microsoft account, there are a couple of options to get a free account:
- You can sign up for a new personal Microsoft account.
- You can sign up for the Microsoft 365 Developer Program to get a free Microsoft 365 subscription.
Register an application with the Azure Active Directory admin center
-
Open a browser and navigate to the Azure Active Directory admin center and login using a personal account (aka: Microsoft Account) or Work or School Account.
-
Select Azure Active Directory in the left-hand navigation, then select App registrations under Manage.
-
Select New registration. On the Register an application page, set the values as follows.
- Set Name to
React Native Graph Sample. - Set Supported account types to Accounts in any organizational directory and personal Microsoft accounts.
- Under Redirect URI, change the dropdown to Public client (mobile & desktop), and set the value to
graph-sample://react-native-auth/.
- Set Name to
-
Select Register. On the React Native Graph Tutorial page, copy the value of the Application (client) ID and save it, you will need it in the next step.
Configure the sample
-
Rename the GraphRNSample/auth/AuthConfig.example.ts file to AuthConfig.ts.
-
Edit the AuthConfig.ts file and make the following changes.
- Replace
YOUR_APP_ID_HEREwith the Application (client) ID you got from the App Registration Portal.
- Replace
-
In your command-line interface (CLI), navigate to the GraphRNSample directory and run the following commands to install requirements.
npm install npx pod-install ios
Run the sample
- Run the following command to start the sample.
npm start
-
In another instance of your CLI also in the GraphRNSample directory, run one of the following commands:
- To run on an iOS Simulator:
npm run ios - To run on an Android virtual device:
npm run android(start an Android virtual device from Android Studio first)
- To run on an iOS Simulator:
Code of conduct
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.
Disclaimer
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
637 Jan 5, 2023
23 Nov 24, 2022
3 Sep 3, 2022
901 Dec 31, 2022
3 Feb 7, 2022
1 Jun 1, 2022
3 Dec 24, 2021
3 Jul 15, 2022
2 Feb 2, 2022
136 Jan 8, 2023
3 Nov 6, 2022
3 Dec 22, 2022
2 Jun 12, 2022
20 Dec 19, 2022
1 Apr 2, 2022
14 Jul 7, 2022
3 Feb 14, 2022
11 Oct 30, 2022