Using Google API (gapi) with React

App.js

/* global gapi */

const API_KEY = 'YOURAPIKEYHERE';

import React, { Component } from 'react';

class App extends Component {

  loadYoutubeApi() {
    const script = document.createElement("script");
    script.src = "https://apis.google.com/js/client.js";

    script.onload = () => {
      gapi.load('client', () => {
        gapi.client.setApiKey(API_KEY);
        gapi.client.load('youtube', 'v3', () => {
          this.setState({ gapiReady: true });
        });
      });
    };

    document.body.appendChild(script);
  }

  componentDidMount() {
    this.loadYoutubeApi();
  }

  render() {
    if (this.state.gapiReady) {
     return (
       <h1>GAPI is loaded and ready to use.</h1>
     );
  };
}

export default App;

const API_KEY = 'YOURAPIKEYHERE';

Publish this to the web? I do not think it is secure.

Only use API key from the server. From the client side you need OAuth implicit grant flow.

const API_KEY = 'YOURAPIKEYHERE';

Publish this to the web? I do not think it is secure.

Only use API key from the server. From the client side you need OAuth implicit grant flow.

100% Agree

Does anyone know how I can get the gapi to work with react-native?

did you find a way to do with react-native if yes plz let me know

const API_KEY = 'YOURAPIKEYHERE';

Publish this to the web? I do not think it is secure.

Only use API key from the server. From the client side you need OAuth implicit grant flow.

I didnt get, why the implementation is not secure? You can define local variable on you server and receive you key from the variable.

Subsequently you can create config file to store you key and depending on node_env value use key from different sources on prod and dev enviroments.

@ZackKnopp nice solution

@mharrisweb

Does anyone know how I can get the gapi to work with react-native?

@ahmed-raza12

did you find a way to do with react-native if yes plz let me know

Did either of you figure it out?

@mharrisweb

Does anyone know how I can get the gapi to work with react-native?

@ahmed-raza12

did you find a way to do with react-native if yes plz let me know

Did either of you figure it out?

Are there any specific problems or incompatibilities between gapi and React Native or you're just looking for an example of how to use gapi ?

@bradeac all the documentation I've found for gapi uses <script> tags or refers to a document object, neither of which you can do in React Native

@McFarJ I see. Unfortunately, I cannot help you in this case, no experience with React Native from my side. If it worked as it works with React (web), I could've given some examples.

@bradeac No I haven't. I'm just pulling data from the url like this:

wix/react-native-calendars#416 (comment)

I am still very interested in using gapi if there is ever a RN solution.

@McFarJ I didn't get the solution for this but I think you should read documentation of google api for android.

@ZackKnopp One thing I'd like to add to ZackKnopp's solution:
Some google api doesn't add the gapi_processed flag, in this case we could simple check typeof window.gapi !== 'undefined'

@mharrisweb

Does anyone know how I can get the gapi to work with react-native?

@ahmed-raza12

did you find a way to do with react-native if yes plz let me know

Did either of you figure it out?

Are there any specific problems or incompatibilities between gapi and React Native or you're just looking for an example of how to use gapi ?
i want send email through gmail api in react native. In that i got same error cant fid variable 'gapi'.Give me suggestion .

@Alamut98 no I am still looking for an example using RN. The docs are very terse.

Would help if there was a closure at the bottom closing the class.

<script src="https://apis.google.com/js/client.js"></script>

add this script tag in index.html
then type "gapi" in console of your tab in which your project is running to check if gapi is defined