How to do Expo/react-native Google Authentication in a class based component?

Question

I am trying to implement Google Authentication into my Expo/react native component based class, but the example Expo gives is for functional components.

They use this code for the Google Authentication:

import * as React from 'react';
import * as WebBrowser from 'expo-web-browser';
import * as Google from 'expo-auth-session/providers/google';
import { Button } from 'react-native';

WebBrowser.maybeCompleteAuthSession();

export default function App() {
  const [request, response, promptAsync] = Google.useAuthRequest({
    expoClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
    iosClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
    androidClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
    webClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
  });

  React.useEffect(() => {
    if (response?.type === 'success') {
      const { authentication } = response;
      }
  }, [response]);

  return (
    <Button
      disabled={!request}
      title="Login"
      onPress={() => {
        promptAsync();
        }}
    />
  );
}

My question is how would I go about doing something similar to this for a class based component (export default class App extends Component)

Answer 1

This is actually a general subject, how to call React's functional components from within class components.

Specific to Google Sign In, this answer can help: https://stackoverflow.com/a/66974167/1870873