Spinner is not staying on screen and may be causing a function to not work. Please help!

[damialajogun]

Hi, I have non-consumable products in my app and I'm using RN's In-app purchase function for that purpose. There is a delay between when the user presses the "buy" button and when the purchase screen comes up, so I'm trying to display a spinner in the meantime until the purchase screen comes up so the user knows that something is happening. However, I can't seem to get it to work properly.

I'm running: "react-native": "^0.59.10", "react-native-loading-spinner-overlay": "^2.0.0"

Relevant Code:

import Spinner from 'react-native-loading-spinner-overlay'

//initialize spinner to false in constructor  
constructor(props) {
    super(props);
    this.state = {
      isLoading: false, 
    };
//when user presses "purchase" button, the purchase function is called and spinner is set to true
  async purchase() {

    this.setState({ isLoading: true});
     await this.requestPurchase(productId2Purchase)

  requestPurchase = async (sku) => {
    try {
      this.setState({ isLoading: false }); //spinner is set back to false before payment screen pops up
      await RNIap.requestPurchase(sku, false);
    } catch (err) {
      console.warn(err.code, err.message);
    }
  }

Before I added the spinner, the user would press "buy" which calls purchase(), and about 10 seconds later the purchase screen would show up. However, since adding the spinner to my code, after the user presses "buy", the spinner shows up for like 3 seconds and then disappears, but even more strange is that the payment screen no longer shows up. How is it possible that the spinner affects the payment screen showing up? It is the only change I have made to the code. Am I using this incorrectly? How do I get it to work such that the spinner shows until requestPurchase() is done loading and then the payment screen shows up? Thank you.