To read and write data from Google Sheets API in a React Native app, you can use the react-native-google-signin library to authenticate the user with their Google account, and the axios library to make HTTP requests to the Google Sheets API.

Here's a step-by-step guide to help you get started:

  1. Set Up Google Sheets API and Credentials:

    • Go to the Google Developers Console: https://console.developers.google.com/
    • Create a new project or select an existing one.
    • Enable the Google Sheets API for the project.
    • Create credentials for the API by selecting "Create credentials" > "OAuth client ID". Choose "Android" or "iOS" as the application type, depending on your target platform (React Native can use the Android client ID for both platforms).
  2. Install Required Dependencies: Install the necessary libraries in your React Native project:

    bash
    npm install react-native-google-signin axios
  3. Set Up Google Sign-In:

  4. Authenticate with Google API: Use react-native-google-signin to authenticate the user with their Google account. You'll get an access token that you can use to make API requests to Google Sheets.

    javascript
    import { GoogleSignin, statusCodes } from '@react-native-google-signin/google-signin'; async function signInWithGoogle() { try { await GoogleSignin.hasPlayServices(); const userInfo = await GoogleSignin.signIn(); const accessToken = userInfo.accessToken; // Use the access token to make API requests to Google Sheets // (You can store the token for later use) } catch (error) { if (error.code === statusCodes.SIGN_IN_CANCELLED) { // User canceled the login } else if (error.code === statusCodes.IN_PROGRESS) { // Login is in progress } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) { // Play services not available or outdated } else { // Other error occurred } } }
  5. Make API Requests to Google Sheets: Use axios (or any other HTTP library) to make API requests to read and write data from Google Sheets. You'll need the accessToken obtained from the Google Sign-In process as an authorization bearer token in the request headers.

    Here's an example of how to read data from Google Sheets using axios:

    javascript
    import axios from 'axios'; async function readDataFromGoogleSheets(accessToken) { try { const response = await axios.get( 'https://sheets.googleapis.com/v4/spreadsheets/{SPREADSHEET_ID}/values/{RANGE}', { headers: { Authorization: `Bearer ${accessToken}`, }, } ); const data = response.data; // Process the data } catch (error) { // Handle errors } }

    Replace {SPREADSHEET_ID} with the ID of your Google Sheets document and {RANGE} with the range of cells you want to read.

  6. Write Data to Google Sheets: To write data to Google Sheets, you can use the axios.post() method and the Google Sheets API endpoint for updating values.

    javascript
    async function writeToGoogleSheets(accessToken, data) { try { const response = await axios.post( 'https://sheets.googleapis.com/v4/spreadsheets/{SPREADSHEET_ID}/values/{RANGE}:update', { values: data, }, { headers: { Authorization: `Bearer ${accessToken}`, }, } ); // Data successfully written } catch (error) { // Handle errors } }

    Replace {SPREADSHEET_ID} with the ID of your Google Sheets document, {RANGE} with the range where you want to write the data, and data with the data you want to write (formatted as an array).

Remember that to access the Google Sheets API, you'll need to handle permissions, scopes, and authentication correctly. The examples above provide a basic outline of the steps involved, but you may need to add error handling, permission checks, and other features to make the integration more robust and secure in a production environment.

Have questions or queries?
Get in Touch