Search code examples
react-nativegoogle-sheets-apimulti-device-hybrid-apps

How to create a new google spreadsheet through an app in react native?


I am writing a simple app in which I would like to create a google spreadsheet when the user wants to. I could only get to the part below, where I can read data from already existing google spreadsheets, but I'm not able to convert this such that, at the click of the button, I will be able to create a new google spreadsheet. Can someone help me with the syntax I need to use? Can I do this?

import React, { Component } from 'react';

const API_KEY = '...';
const sheetID = '...';

class App extends Component {
  getSheetValues = async () => {
    const request = await fetch(
      `https://sheets.googleapis.com/v4/spreadsheets/${sheetID}/values/A1?key=${API_KEY}`
    );
    const data = await request.json();
    console.log(data);
    return data;
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.getSheetValues}>Get sheet values</button>
      </div>
    );
  }
}

export default App;

Solution

  • the below code worked - now i want to find a way to refresh the access token automatically without going to https://developers.google.com/oauthplayground

    '''
    import React, { Component } from 'react';
    
    class App extends Component {
      getSheetValues = async () => {
        const request = await fetch(
          `https://sheets.googleapis.com/v4/spreadsheets/${sheetID}/values/A1?key=${API_KEY}`
        );
        const data = await request.json();
        console.log(data);
        return data;
      };
    
      getNewSheet = async () => {
        const request = await fetch(
          `https://sheets.googleapis.com/v4/spreadsheets`,
          {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              Authorization: `Bearer ${ACCESS_TOKEN}`,
            },
            body: JSON.stringify({
              properties: {
                title: 'newSpreadSheetTest',
              },
            }),
          }
        );
        const data = await request.json();
        console.log(data);
        return data;
      };
    
      render() {
        return (
          <div className="App">
            <button onClick={this.getSheetValues}>Get Spreadsheet values</button>
            <br />
            <hr />
            <button onClick={this.getNewSheet}>Create New Spreadsheet</button>
          </div>
        );
      }
    }
    
    export default App;
    '''