Skip to content

Latest commit

 

History

History
123 lines (89 loc) · 4.74 KB

README.md

File metadata and controls

123 lines (89 loc) · 4.74 KB
Raw

react-native-google-sheet

npm (tag) PRs Welcome GitHub top language David publish size

A <GoogleSheet /> component for react-native no native code added light weight library to access Google Sheets API which gives you full control over the content and appearence of your spreadsheet data.

No setup, no linking required, use it like a component.

This module uses Sheet V4 API.

Installation

npm i --save react-native-google-sheet

or

yarn add react-native-google-sheet

Authentication

IMPORTANT: Google recently deprecated their ClientLogin (username+password) access, so things are slightly more complicated now. Older versions of this module supported it, so just be aware that things changed.

Unauthenticated access (read-only access on public docs)

By default, this module makes unauthenticated requests and can therefore only access spreadsheets that are "public".

The Google Spreadsheets Data API reference and developers guide is a little ambiguous about how you access a "published" public Spreadsheet.

If you wish to work with a Google Spreadsheet without authenticating, not only must the Spreadsheet in question be visible to the web, but it must also have been explicitly published using "File > Publish to the web" menu option in the google spreadsheets GUI.

Many seemingly "public" sheets have not also been "published" so this may cause some confusion.

Note: react-native-google-sheet doesnt support public doc access as it doesnt required a module for it. This module is notrequires. Docs is enough to do so.

OAuth2 Service Account (recommended method)

This is a 2-legged oauth method and designed to be "an account that belongs to your application instead of to an individual end user". Use this for an app that needs to access a set of documents that you have full access to. (read more)

Setup Instructions

  1. Go to the Google Developers Console
  2. Select your project or create a new one (and then select it)
  3. Enable the Drive API for your project
  • In the sidebar on the left, expand APIs & auth > APIs
  • Search for "sheet"
  • Click on "Google Sheets API"
  • click the blue "Enable API" button
  1. Create a service account for your project
  • In the sidebar on the left, expand APIs & auth > Credentials
  • Click blue "Add credentials" button
  • Select the "OAuth client ID" option
  • Select the "iOS" key type option
  • Click blue "Create" button
  • Save the Client_id, that's all you need (it is the only copy!)

Props

name desc type default
spreadsheetId Id of the spread sheet string How to find the id ''
credentialsDetails Google client details object {redirectUrl: '', clientId:''}

Usage

import GoogleSheet, { batchGet } from 'react-native-google-sheet';

export default function LaunchScreen() {
  const clientId = 'YOUR_CLIENT_ID';
  const GOOGLE_REDIRECT_URI = 'http://localhost';

  function _onPressButton() {
    batchGet().then(item => {
      console.log(item);
    }).catch(e => console.log(e))
  }

  return (
    <View style={[styles.mainContainer]}>
      <GoogleSheet
        credentialsDetails={{
          redirectUrl: GOOGLE_REDIRECT_URI,
          clientId,
        }}
        spreadsheetId="YOUR_SHEET_ID"
      />
      <TouchableOpacity onPress={_onPressButton}>
        <Text>Get Data</Text>
      </TouchableOpacity>
    </View>
  )
}

For more, read the API Reference. If you're interested in contributing, check out the Contributing Guide.

Dependency

Just one dependency react-native-webview

Contribute

Help to make it better! Please see CONTRIBUTING.md for more details.

License

MIT License