Notes

import React, { Component } from "react";
import {
Picker,
Switch,
SafeAreaView,
Platform,
View,
Alert,
} from "react-native";
import { Appbar, List, Text, Button, Colors } from "react-native-paper";
import Analytics from "../components/Analytics";
import { languages } from "../config/language";
import { setAdsData } from "../utils";

import RNIap, {
InAppPurchase,
PurchaseError,
SubscriptionPurchase,
acknowledgePurchaseAndroid,
consumePurchaseAndroid,
finishTransaction,
finishTransactionIOS,
purchaseErrorListener,
purchaseUpdatedListener,
} from "react-native-iap";

const itemSkus = Platform.select({
ios: ["com.emrahyurttutan.iftar.ads.remove"],
android: ["com.emrahyurttutan.iftar.ads.remove"],
});

let purchaseUpdateSubscription;
let purchaseErrorSubscription;

export default class SettingsScreen extends Component {
state = {
products: [],
isLanguage: false,
receipt: "",
availableItemsMessage: "",
};

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

purchaseUpdateSubscription = purchaseUpdatedListener(async (purchase) => {
const receipt = purchase.transactionReceipt;
if (receipt) {
try {
// if (Platform.OS === 'ios') {
// finishTransactionIOS(purchase.transactionId);
// } else if (Platform.OS === 'android') {
// // If consumable (can be purchased again)
// consumePurchaseAndroid(purchase.purchaseToken);
// // If not consumable
// acknowledgePurchaseAndroid(purchase.purchaseToken);
// }
const ackResult = await finishTransaction(purchase);
setAdsData({ ads: "remove" });
} catch (ackErr) {
console.warn("ackErr", ackErr);
}

this.setState({ receipt }, () => this.goNext());
}
});

purchaseErrorSubscription = purchaseErrorListener((error) => {
console.log("purchaseErrorListener", error);
Alert.alert("purchase error", JSON.stringify(error));
});
}

componentWillUnmount() {
if (purchaseUpdateSubscription) {
purchaseUpdateSubscription.remove();
purchaseUpdateSubscription = null;
}
if (purchaseErrorSubscription) {
purchaseErrorSubscription.remove();
purchaseErrorSubscription = null;
}
RNIap.endConnection();
}

goNext = () => {
Alert.alert("Receipt", this.state.receipt);
};

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

requestSubscription = async (sku) => {
try {
RNIap.requestSubscription(sku);
} catch (err) {
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);
}
};

// const [isLanguage, setIsLanguage] = useState(false);

render() {
const {
language,
theme,
setLanguage,
translate,
onSwitchTheme,
navigation,
} = this.props;

const { isLanguage, products, availableItemsMessage } = this.state;
return (
<SafeAreaView
style={{
backgroundColor: translate(
language,
theme.dark ? "theme.darkBgColor" : "theme.lightBgColor"
),
flex: 1,
}}
>
<Appbar.Header
dark={theme.dark}
style={{
backgroundColor: theme.colors.headerBg || "#f5f5f5",
}}
>
<Appbar.Action
color={theme.colors.headerColor || "#3b3f42"}
icon="angle-left"
onPress={() => navigation.goBack()}
/>
<Appbar.Content
color={theme.colors.headerColor || "#3b3f42"}
title={translate(language, "routes.settings.title")}
/>
</Appbar.Header>

<>
<List.Item
theme={theme}
onPress={() => setIsLanguage(!isLanguage)}
left={(props) => <List.Icon {...props} icon="language" />}
title={translate(language, "routes.settings.languageChange")}
right={() => (
<Text theme={theme} style={{ marginTop: 10 }}>
{language}
</Text>
)}
/>
{isLanguage && (
<>
<Picker
style={{
width: "100%",
backgroundColor: translate(
language,
theme.dark ? "theme.darkBgColor" : "theme.lightBgColor"
),
height: 150,
}}
selectedValue={language}
onValueChange={(lang) => setLanguage(lang)}
>
{languages.map((x) => (
<Picker.Item
key={`language_${x.key}`}
label={x.title.toUpperCase()}
value={x.key}
style={{ color: theme.colors.textInverted }}
/>
))}
</Picker>
<Button
icon="save"
mode="contained"
style={{
marginTop: 20,
marginLeft: 40,
marginRight: 40,
}}
theme={theme}
dark={theme.dark}
onPress={() => setIsLanguage(!isLanguage)}
>
{translate(language, "routes.settings.saveChanges")}
</Button>
</>
)}

<List.Item
theme={theme}
left={(props) => <List.Icon {...props} icon="sun-o" />}
title={translate(language, "routes.settings.darkModeChange")}
right={() => (
<Switch
value={theme.dark}
theme={theme}
onValueChange={() => onSwitchTheme(theme.dark)}
/>
)}
/>
<Button
mode="contained"
style={{
minWidth: 250,
alignSelf: "center",
marginBottom: 40,
backgroundColor: Colors.red200,
marginHorizontal: 20,
}}
onPress={() => this.getAvailablePurchases()}
>
Get Products
</Button>

<Text style={{ margin: 5, fontSize: 15, alignSelf: "center" }}>
{availableItemsMessage}
</Text>
{products &&
Platform.OS === "ios" &&
products.map((product, i) => (
<View
key={i}
style={{
flexDirection: "column",
}}
>
<Text
style={{
marginTop: 20,
fontSize: 12,
color: "black",
minHeight: 100,
alignSelf: "center",
paddingHorizontal: 20,
}}
>
{JSON.stringify(product)}
</Text>
<Button
mode="contained"
style={{
minWidth: 250,
alignSelf: "center",
marginBottom: 40,
backgroundColor: Colors.blue400,
marginHorizontal: 20,
}}
onPress={() => this.requestSubscription(product.productId)}
>
{translate(language, "routes.settings.noAdsText")}
</Button>
</View>
))}
</>
</SafeAreaView>
);
}
}

SettingsScreen.navigationOptions = {
header: null,
};