text: import React, { Component } from 'react';
  import {
    View,
    Text,
    Alert,
    NativeModules,
    Platform,
    ScrollView,
  } from 'react-native';
  import NativeButton from 'apsl-react-native-button';
  import * as RNIap from 'react-native-iap';
  
  import Navbar from '../shared/Navbar';
  import EStyleSheet from 'react-native-extended-stylesheet';
  
  // App Bundle > com.dooboolab.test
  
  const itemSkus = Platform.select({
    ios: [
      'com.cooni.point1000', 'com.cooni.point5000', // dooboolab
    ],
    android: [
      'test.sub1', // subscription
    ],
  });
  
  const itemSubs = Platform.select({
    ios: [
      'com.cooni.point1000', 'com.cooni.point5000', // dooboolab
    ],
    android: [
      'test.sub1', // subscription
    ],
  });
  
  class Page extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        productList: [],
        receipt: '',
        availableItemsMessage: '',
      };
    }
  
    async componentDidMount() {
      try {
        const result = await RNIap.initConnection();
        console.log('result', result);
      } catch (err) {
        console.warn(err.code, err.message);
      }
    }
  
    goToNext = () => {
      this.props.navigation.navigate('Second', {
        receipt: this.state.receipt,
      });
    }
  
    getItems = async() => {
      try {
        const products = await RNIap.getProducts(itemSkus);
        console.log('Products', products);
        this.setState({ productList: products });
      } catch (err) {
        console.warn(err.code, err.message);
      }
    }
  
    getSubscriptions = async() => {
      try {
        const products = await RNIap.getSubscriptions(itemSubs);
        console.log('Products', products);
        this.setState({ productList: products });
      } catch (err) {
        console.warn(err.code, err.message);
      }
    }
  
    buyItem = async(sku) => {
      try {
        console.info('buyItem: ' + sku);
        // const purchase = await RNIap.buyProduct(sku);
        const purchase = await RNIap.buyProductWithoutFinishTransaction(sku);
        console.info(purchase);
        this.setState({ receipt: purchase.transactionReceipt }, () => this.goToNext());
      } catch (err) {
        console.warn(err.code, err.message);
        Alert.alert(err.message);
      }
    }
  
    buySubscribeItem = async(sku) => {
      try {
        console.log('buySubscribeItem: ' + sku);
        const purchase = await RNIap.buySubscription(sku);
        console.info(purchase);
        this.setState({ receipt: purchase.transactionReceipt }, () => this.goToNext());
      } catch (err) {
        console.warn(err.code, err.message);
        Alert.alert(err.message);
      }
    }
  
    getAvailablePurchases = async() => {
      try {
        console.info('Get available purchases (non-consumable or unconsumed consumable)');
        const purchases = await RNIap.getAvailablePurchases();
        console.info('Available purchases :: ', purchases);
        if (purchases && purchases.length > 0) {
          this.setState({
            availableItemsMessage: `Got ${purchases.length} items.`,
            receipt: purchases[0].transactionReceipt,
          });
        }
      } catch (err) {
        console.warn(err.code, err.message);
        Alert.alert(err.message);
      }
    }
  
    render() {
      const { productList, receipt, availableItemsMessage } = this.state;
      const receipt100 = receipt.substring(0, 100);
  
      return (
        <View style={ styles.container }>
          <View style={ styles.header }>
            <Navbar>react-native-iap</Navbar>
          </View>
          <View style={ styles.content }>
            <ScrollView
              style={{ alignSelf: 'stretch' }}
            >
              <View style={{ height: 50 }} />
              <NativeButton
                onPress={this.getAvailablePurchases}
                activeOpacity={0.5}
                style={styles.btn}
                textStyle={styles.txt}
              >Get available purchases</NativeButton>
  
              <Text style={{ margin: 5, fontSize: 15, alignSelf: 'center' }} >{availableItemsMessage}</Text>
  
              <Text style={{ margin: 5, fontSize: 9, alignSelf: 'center' }} >{receipt100}</Text>
  
              <NativeButton
                onPress={() => this.getItems()}
                activeOpacity={0.5}
                style={styles.btn}
                textStyle={styles.txt}
              >Get Products ({productList.length})</NativeButton>
              {
                productList.map((product, i) => {
                  return (
                    <View key={i} style={{
                      flexDirection: 'column',
                    }}>
                      <Text style={{
                        marginTop: 20,
                        fontSize: 12,
                        color: 'black',
                        alignSelf: 'center',
                      }} >{JSON.stringify(product)}</Text>
                      <NativeButton
                        onPress={() => this.buyItem(product.productId)}
                        activeOpacity={0.5}
                        style={styles.btn}
                        textStyle={styles.txt}
                      >Buy Above Product</NativeButton>
                    </View>
                  );
                })
              }
            </ScrollView>
          </View>
        </View>
      );
    }
  }
  
  const styles = EStyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'column',
      marginTop: Platform.OS === 'ios' ? 0 : '$statusSize',
      paddingTop: Platform.OS === 'ios' ? '$statusPaddingSize' : 0,
      backgroundColor: 'white',
    },
    header: {
      flex: 8.8,
      flexDirection: 'row',
      alignSelf: 'stretch',
      justifyContent: 'center',
      alignItems: 'center',
    },
    content: {
      flex: 87.5,
      flexDirection: 'column',
      justifyContent: 'center',
      alignSelf: 'stretch',
      alignItems: 'center',
    },
    title: {
      fontSize: '$24',
      fontWeight: 'bold',
    },
    btn: {
      height: '$48',
      width: '240 * $ratio',
      alignSelf: 'center',
      backgroundColor: '#00c40f',
      borderRadius: 0,
      borderWidth: 0,
    },
    txt: {
      fontSize: '$fontSize',
      color: 'white',
    },
  });
  
  export default Page;
  