implementation of android billing 4.0.0 causes React Native In App Purchase (RNIAP) to stop working

I am trying to implement Android Billing 4.0.0 on my Android React Native app.

I have tried implementing the below line into my build.gradle (app):

implementation 'com.android.billingclient:billing:4.0.0' 

However, my React Native In App Purchase (RNIAP) has stopped working when I include the above line.

On my JS code I have the following line (you can see the full file below if needed):

const products = await RNIap.getProducts(itemSkus);

However, when I add this line the RNIap.getProducts await never returns anything and the code following this line is not executed. This line seems to get stuck.

When I remove the above line, the RNIap.getProducts works and displays the In App Purchase. However, if i remove the above line, Google Play Console displays ‘please upgrade to billing library version 4 or newer to publish this app’ – and therefore i can’t upload the new app.

I know it’s not an emulator issue as I have published the app with the above line and in the live environment the IAP is still not returned.

I have included the below in my AndroidManifest.xml

<uses-permission android:name="com.android.vending.BILLING" />

Everything works correctly on iOS.

Below is my code:

(Note: i have changed the package name & in-app purchase name for security reasons)

iap.js

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    Platform,
    PixelRatio,
} from "react-native";
import {Header,Left,Right,Icon,Content,Grid,Row,Col,Container,H1,Button,Footer} from 'native-base';
import LinearGradient from 'react-native-linear-gradient';

//Redux imports
import { connect } from "react-redux";
import { toggle } from '../../Reducers/toggle';

//In-app Purchase import
import * as RNIap from 'react-native-iap';

const itemSkus = Platform.select({
  ios: [
    'example.for_stackoverflow.ios',
  ],
  android: [
    'example.for_stackoverflow.android',
  ],
});


class Iap extends Component {
  constructor(props) {
    console.log(itemSkus);
    super(props);

    this.state = {
      productList: [],
      receipt: '',
      availableItemsMessage: '',
    };
  }

  state = {
    toggle: this.props.toggle.togglePremium || false,
  };


  handleChange = ( toggle ) => {
    this.setState({ toggle });
  };

  async componentDidMount() {
    try {
      const result = await RNIap.initConnection();
      console.log('result', result);
    } catch (err) {
      console.warn(err.code, err.message);
    }
    this.getItems();
  }

  //after purcahse to to the finish transaction page.
  goToNext = () => {
    this.props.navigation.navigate('Logout', {
      receipt: this.state.receipt,
    });
  }

  getItems = async() => {
    try {
      console.log(itemSkus + ' check itemSkus');
      const products = await RNIap.getProducts(itemSkus);
      //const subscriptions = await RNIap.getSubscriptions(itemSkus);
      // const products = await RNIap.getSubscriptions(itemSkus);
      console.log(products +  'check Products');
      this.setState({ productList: products });
    } catch (err) {
      console.log(err.message + ' err.message');
      console.warn(err.code, err.message);
    }
  }

  buyItem = async(sku) => {
  //console.info('buyItem: ' + sku);
  // const purchase = await RNIap.buyProduct(sku);
  // const products = await RNIap.buySubscription(sku);
  // const purchase = await RNIap.buyProductWithoutFinishTransaction(sku);
  try {
    const purchase: any = await RNIap.buyProduct(sku);
    this.setState({ receipt: purchase.transactionReceipt }, () => this.goToNext());
  } catch (err) {
    //console.warn(err.code, err.message);
    const subscription = RNIap.addAdditionalSuccessPurchaseListenerIOS(async (purchase) => {
      this.setState({ receipt: purchase.transactionReceipt }, () => this.goToNext());
      subscription.remove();
    });
  }
}


  getPurchases = async() => {
  try {
    console.log('get hit, and when??');
    const purchases = await RNIap.getAvailablePurchases();
    let restoredTitles = '';
    let coins = CoinStore.getCount();
    purchases.forEach(purchase => {
      if (purchase.productId == '4dot6OVER01') {
        this.setState({ togglePremium: true });
        restoredTitles += 'Premium Version';
      }
      else if (purchase.productId == 'android.test.purchased') {
        console.log(purchase.productId);
        this.setState({ togglePremium: true });
        restoredTitles += 'Premium Version';
      }
    })
    Alert.alert('Restore Successful', 'You successfully restored the following purchases: ' + restoredTitles);
  } catch(err) {
    //console.warn(err); // standardized err.code and err.message available
    Alert.alert(err.message);
  }
}


    static navigationOptions = {
      drawerIcon : ({tintColor}) => (
        <Icon name="ios-star-outline" style={{fontSize: 24, color: tintColor}} />
      )
    }

    getPrice = (priceString) => {
      const price = JSON.parse(priceString);
      //return (<H1 style={styles.textHeaderNumber}>${price}</H1>)
      return(<Text style={styles.buttonTextBackWhite}>${price}</Text>)
    }

    getTitle = (titleString) => {

      const title = JSON.parse(titleString);
      return(<Row><H1 style={styles.textHeader}>{title}</H1></Row>)
    }

    getDescription = (descString) => {

      const desc = JSON.parse(descString);
      return(<Row><Text style={styles.textDesc}>{desc}</Text></Row>)
    }

    render() {
      const purchase = this.props.toggle.togglePremium;
      const { productList, receipt, availableItemsMessage } = this.state;
      console.log(productList + ' check productList');
      const receipt100 = receipt.substring(0, 100);
        return (

                <Col size={1}>



                      <Row><Text style={styles.textHeader}>Cricket Over Counter Premium</Text></Row>
                      <Row><Text style={styles.textDesc}>Cricket Umpire Over and Ball Counter upgrade to premium to allow all features for the entire innings!</Text></Row>


                  {

                    productList.map((product, i) => {
                      console.log(product + ' check product.');
                      return (
                        <Row key={i} style={{
                          flexDirection: 'column', alignItems: 'center',
                        }}>

                          <Button rounded large warning style={styles.largeButtonGreen}
                              onPress={() => this.buyItem(product.productId)} >
                              {this.getPrice(JSON.stringify(product.price))}
                            </Button>
                        </Row>
                  );
              })
            }


                </Col>
        );
    }
}

const mapStateToProps = state => ({
  toggle: state.toggle,
});

export default connect(mapStateToProps)(Iap);

package.json

{
  "name": "ExampleForStackOverflow",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@invertase/react-native-apple-authentication": "^2.1.2",
    "@react-native-async-storage/async-storage": "^1.13.4",
    "@react-native-firebase/app": "^10.8.0",
    "@react-native-firebase/auth": "^10.8.0",
    "@react-native-firebase/firestore": "^10.8.0",
    "@react-native-google-signin/google-signin": "^7.0.0-alpha.3",
    "@react-native-picker/picker": "^1.16.7",
    "@react-navigation/drawer": "^5.12.3",
    "@react-navigation/native": "^5.9.2",
    "native-base": "^2.15.2",
    "react": "16.13.1",
    "react-compose": "^2.0.0",
    "react-native": "0.63.5",
    "react-native-animatable": "^1.3.3",
    "react-native-apple-authentication": "^2.0.0",
    "react-native-cli": "^2.0.1",
    "react-native-dotenv": "^3.3.1",
    "react-native-draggable-flatlist": "^3.0.7",
    "react-native-elements": "^3.2.0",
    "react-native-gesture-handler": "^1.10.1",
    "react-native-haptic-feedback": "^1.11.0",
    "react-native-iap": "^5.2.14",
    "react-native-keep-awake": "^4.0.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "^1.13.4",
    "react-native-restart": "0.0.24",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-safe-area-view": "^1.1.1",
    "react-native-screens": "^2.17.1",
    "react-native-scroll-into-view": "^2.0.2",
    "react-native-splash-screen": "^3.2.0",
    "react-native-swipe-list-view": "^3.2.9",
    "react-native-swipeable-item": "^2.0.2",
    "react-native-switch": "^2.0.0",
    "react-native-vector-icons": "^8.0.0",
    "react-native-webview": "^11.2.3",
    "react-navigation": "^4.4.3",
    "react-navigation-drawer": "^2.6.0",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "tcomb-form-native": "^0.6.20"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^25.1.0",
    "eslint": "^6.5.1",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Hopefully someone has experienced a similar issue and can help me with a solution.

Thanks,
Andrew