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;

@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