Issue with react-native-purchases and revenueCat

Question

I am having an issue with my code for my in-app purchases. The use is allowed to buy 'emblems' which should be added to the user through asyncStorage. However this is not the case. Below is all my code and I hope that someone can find a fix. I am currently testing Android only, and the code below is not a final code, but testing code I've been using. They are one time purchases.

This is where I set my API key

const APIKeys = {
    google: "*myapikey*",
};

function App() {
  useEffect(() => {
    Purchases.setDebugLogsEnabled(true);
    if (Platform.OS == "android") {
      Purchases.configure({ apiKey: APIKeys.google });
    }
  }, []);

This is the page where everything is supposed to happen:

import * as React from 'react';
import { Button, View, Text, StyleSheet, Image, ScrollView, ImageBackground, TouchableOpacity, Alert} from 'react-native';
import BuyBox from '../components/BuyBox';
import TopBar from '../components/TopBar';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { MaterialIcons } from '@expo/vector-icons';
import Purchases from 'react-native-purchases';

class PremiumScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            offerings: null,
            items: null,
            emblems: null,
            firstCheckpoint: null,
            secondCheckpoint: null,
            thirdCheckpoint: null,
            fourthCheckpoint: null,
            fifthCheckpoint: null
        };
    }
    
    render() {

        let outerSize = 0;
        let innerSize = 0;

        return (
            <ImageBackground style={styles.MB} source={require('../../assets/Backgrounds/MainBackground.png')}>
                <View style={{flex: 1}}>
                <ScrollView contentContainerStyle={{justifyContent: 'center', alignContent: 'center', alignItems: 'center', width: '100%'}}>
                <View style={{flexDirection: 'row-reverse', width: '100%', marginHorizontal: 10, right: 8}}>
                    <TouchableOpacity onPress={() => Alert.alert("Help", "Emblems can be exchanged for three things: First, emblem for a premium trip. Second, two emblems for another save slot. Lastly, one emblem for a cooldown reset")}>
                        <TopBar />
                    </TouchableOpacity>
                </View>
                <Text style={styles.TitleText} onPress={() => console.log(this.state.offerings.emblems.availablePackages)} >Welcome to the Embassy!</Text>
                <Text style={styles.SubTitle}>This is where you can purchase Emblems for Premium Trips!</Text>
                <View style={{marginVertical: 10}}/>
                <View style={{width: 450, height: 450}}>
                    <ScrollView contentContainerStyle={{justifyContent: 'center', alignContent: 'center', alignItems: 'center'}} horizontal disableIntervalMomentum pagingEnabled>
                    <BuyBox Price='$0.99' EN='1 Emblems' onPress={async () => {
                        const products = await Purchases.getProducts(["ispy_1_emblem"]);
                        const pkg = products.find(product => product.identifier === "ispy_1_emblem");
                        await Purchases.purchaseProduct(pkg.identifier);
                        AsyncStorage.getItem('emblems').then(value => {
                            if (value == null){
                                AsyncStorage.setItem('emblems', '1');
                            } else {
                                AsyncStorage.setItem('emblems', (Number(value) + 1).toString());
                            }
                        })
                    }}/>
                    <BuyBox Price='$3.99' EN='5 Emblems' onPress={async () => {
                        const products = await Purchases.getProducts(["ispy_5_emblem"]);
                        const pkg = products.find(product => product.identifier === "ispy_5_emblem");
                        await Purchases.purchaseProduct(pkg.identifier);
                        AsyncStorage.getItem('emblems').then(value => {
                            if (value == null){
                                AsyncStorage.setItem('emblems', '5');
                            } else {
                                AsyncStorage.setItem('emblems', (Number(value) + 5).toString());
                            }
                        })
                    }}/>
                    <BuyBox Price='$6.99' EN='10 Emblems' onPress={async () => {
                        const products = await Purchases.getProducts(["ispy_10_emblem"]);
                        const pkg = products.availablePackages.find(product => product.identifier === "ispy_10_emblem");
                        await Purchases.purchaseProduct(pkg.identifier);
                        AsyncStorage.getItem('emblems').then(value => {
                            if (value == null){
                                AsyncStorage.setItem('emblems', '10');
                            } else {
                                AsyncStorage.setItem('emblems', (Number(value) + 10).toString());
                            }
                        })
                    }}/>
                    <BuyBox Price='$12.99' EN='20 Emblems' onPress={async () => {
                        const products = await Purchases.getProducts(["ispy_20_emblem"]);
                        const pkg = products.availablePackages.find(product => product.identifier === "ispy_20_emblem");
                        await Purchases.purchaseProduct(pkg);
                        AsyncStorage.getItem('emblems').then(value => {
                            if (value == null){
                                AsyncStorage.setItem('emblems', '20');
                            } else {
                                AsyncStorage.setItem('emblems', (Number(value) + 20).toString());
                            }
                        })
                    }} />
                    <BuyBox Price='$24.99' EN='40 Emblems' onPress={async () => {
                       const products = await Purchases.getProducts();
                       const pkg = products.availablePackages.find(product => product.identifier === "ispy_20_emblem");
                       await Purchases.purchaseProduct(pkg);
                       AsyncStorage.getItem('emblems').then(value => {
                           if (value == null){
                               AsyncStorage.setItem('emblems', '20');
                           } else {
                               AsyncStorage.setItem('emblems', (Number(value) + 20).toString());
                           }
                       })
                    }}/>
                    <BuyBox Price='$48.99' EN='80 Emblems' onPress={async () => {
                        
                    }}/>
                    </ScrollView>
                </View>
                <View style={{justifyContent: 'center', alignContent: "center", alignItems: "center", alignSelf: 'center'}}>
                    <MaterialIcons name="swipe" size={54} color="black" />
                </View>
                <View style={{margin: '5%'}}/>
                <View style={{justifyContent: 'center', alignContent: 'center', alignItems: 'center'}}>
                    <Text style={styles.SubMain}>Want more information?</Text>  
                    <TouchableOpacity style={{alignContent: 'center', alignItems: 'center', justifyContent: 'center', marginHorizontal: 5}} onPress={() => this.props.navigation.navigate('PrEinfo')}>
                        <Text style={styles.SubMain2}>Click Here!</Text>
                    </TouchableOpacity>
                </View>
                <Text>{this.state.firstCheckpoint}</Text>
                <Text>{this.state.secondCheckpoint}</Text>
                <Text>{this.state.thirdCheckpoint}</Text>
                <Text>{this.state.fourthCheckpoint}</Text>
                <Text>{this.state.fifthCheckpoint}</Text>
                </ScrollView>
                </View>
            </ImageBackground>
        )
    }
}

const styles = StyleSheet.create({
    MB: {
        flex: 1, 
        alignContent: 'center',
        alignItems: 'center',
        justifyContent: 'flex-start',
        padding: 5,
        paddingTop: 42.5
    },
    Row:{
        flexDirection: 'row',
        margin: 10,
        marginBottom: 0,

    },
    TitleText:{
        fontSize: 28,
        fontWeight: 'bold',
        textAlign: 'center'
    },
    SubTitle:{
        fontSize: 16,
        textAlign: 'center',
        fontWeight: '300'
    },
    SubMain:{
        fontSize: 20,
        fontWeight: 'bold',
        textAlign: 'center'
    },
    SubMain2:{
        fontSize: 22,
        fontWeight: 'bold',
        color: 'dodgerblue',
        textAlign: 'center'
    }
})  

export default PremiumScreen;

And this is everything from play console and revenue cat:

Currently, the code on the premiumScreen doesn't work; it doesn't do anything. The onpress does nothing, you see the effect occur, and know the onpress has run however nothing happens. It doesn't crash either.

Some key things to not are that I am testing not an emulator but through the internal testing via the play console. This means I have to do eas build for every change and I cannot see console.logs or try catch. I do have some states I used as checkpoints that are visible at the bottom but when I generally try to set a state to an error, it will normally just crash the app. Any help is appreciated :D

Answer 1

You should create an Entitlements on RevenueCat and attach all products to it. I think it too hard to find out the problem, because you can't view the log.