Skip to content

Instantly share code, notes, and snippets.

@anastely

anastely/FullPurchase.js

Last active October 30, 2021 03:10
Show Gist options
  • Save anastely/8974a3b2e8dbf3aa622cc58d0e5b626a to your computer and use it in GitHub Desktop.
Save anastely/8974a3b2e8dbf3aa622cc58d0e5b626a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
FullPurchase.js
import {Body, Button, Header, Icon, Left, Right, Title} from 'native-base';
import React, {Component} from 'react';
import {
Alert,
Dimensions,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
Platform
} from 'react-native';
import * as RNIap from 'react-native-iap';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import SearchBoard from '../../component/SearchBoard';
const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;
const items = Platform.select({
ios: ['com.arabicrap.musicapp.premium'],
});
let purchaseUpdateSubscription;
let purchaseErrorSubscription;
export default class PurchaseScreen extends Component {
constructor() {
super();
this.state = {
availablePurchases: [],
};
}
componentDidMount() {
this.getProduct();
purchaseUpdateSubscription = RNIap.purchaseUpdatedListener(
async purchase => {
const receipt = purchase.transactionReceipt;
Alert.alert('receipt', receipt);
if (receipt) {
try {
if (Platform.OS === 'ios') {
const finishTransactionIOS = RNIap.finishTransactionIOS(
purchase.transactionId,
);
Alert.alert('finishTransactionIOS', finishTransactionIOS);
}
} catch (ackErr) {
Alert.alert('ackErr', ackErr);
}
this.setState({receipt}, () => this.goNext());
}
},
);
purchaseErrorSubscription = RNIap.purchaseErrorListener(error => {
console.log('purchaseErrorListener', error);
Alert.alert('purchaseErrorSubscription error:', JSON.stringify(error));
});
}
goNext = () => {
Alert.alert('Get full access now | Redux Stuff:)');
};
componentWillUnmount() {
if (purchaseUpdateSubscription) {
purchaseUpdateSubscription.remove();
purchaseUpdateSubscription = null;
}
if (purchaseErrorSubscription) {
purchaseErrorSubscription.remove();
purchaseErrorSubscription = null;
}
RNIap.endConnection();
}
getProduct = async () => {
try {
await RNIap.initConnection();
// console.log('init?', init);
const availablePurchases = await RNIap.getProducts(items);
console.log('availablePurchases', availablePurchases);
this.setState({
availablePurchases,
});
} catch (err) {
// console.warn(err);
Alert.alert('Error purchase available', JSON.stringify(err));
}
};
requestSubscription = async sku => {
try {
await RNIap.requestSubscription(sku, false);
} catch (err) {
Alert.alert(err.code, err.message);
}
};
render() {
return (
<View style={{flex: 1, backgroundColor: '#121212'}}>
<Header
style={styles.darkHeader}
androidStatusBarColor="#121212"
iosBarStyle="light-content">
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name="ios-arrow-forward" style={styles.colorWhite} />
</Button>
</Left>
<Body>
<Title style={styles.headerText}>الخطة المدفوعة</Title>
</Body>
<Right />
</Header>
<ScrollView>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<SearchBoard
width={deviceWidth - 120}
height={deviceHeight - 600}
/>
<View
style={{
// width: 80,
// height: 80,
// borderRadius: 100,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 1,
padding: 15,
borderRadius: 10,
borderColor: '#eeeeee',
// backgroundColor: '#f05',
}}>
<Text style={{fontSize: 30, color: '#eaff4c'}}>
{this.state.availablePurchases[0] &&
this.state.availablePurchases[0].price}{' '}
$
</Text>
</View>
<View
style={{
alignSelf: 'flex-start',
margin: 20,
}}>
<View style={styles.lableContainer}>
<Ionicons
style={styles.iconStyle}
name="ios-close-circle-outline"
size={22}
color="#eaff4c"
/>
<Text style={styles.lable}>بدون اعلانات</Text>
</View>
<View style={styles.lableContainer}>
<MaterialCommunityIcons
style={styles.iconStyle}
name="playlist-plus"
size={22}
color="#eaff4c"
/>
<Text style={styles.lable}>انشاء قوائم تشغيل</Text>
</View>
<View style={styles.lableContainer}>
<Ionicons
style={styles.iconStyle}
name="ios-heart-empty"
size={22}
color="#eaff4c"
/>
<Text style={styles.lable}>اضافة الاغاني للمفضلة</Text>
</View>
<View style={styles.lableContainer}>
<Ionicons
style={styles.iconStyle}
name="ios-radio"
size={22}
color="#eaff4c"
/>
<Text style={styles.lable}>تشغيل الاغاني في الخلفية</Text>
</View>
<View style={styles.lableContainer}>
<MaterialCommunityIcons
style={styles.iconStyle}
name="all-inclusive"
size={22}
color="#eaff4c"
/>
<Text style={styles.lable}> تخطي غير محدود للاغاني</Text>
</View>
</View>
<View style={styles.errorMsg}>
<Text style={styles.lable}>
Data: {JSON.stringify(this.state.availablePurchases)}
</Text>
</View>
<View style={styles.errorMsg}>
<Text style={styles.lable}>
receipt: {JSON.stringify(this.state.receipt)}
</Text>
</View>
<TouchableOpacity
onPress={() => this.requestSubscription(items[0])}
style={styles.btn}>
<Text style={[styles.lable, {color: '#000'}]}>اشتراك</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
darkHeader: {
backgroundColor: '#181818',
},
colorWhite: {
color: '#ffffff',
},
headerText: {
width: deviceWidth / 1.5,
color: 'white',
},
lableContainer: {
flexDirection: 'row',
alignItems: 'center',
marginVertical: 5,
},
btn: {
width: deviceWidth * 0.8,
backgroundColor: '#eaff4c',
borderRadius: 10,
paddingVertical: 10,
justifyContent: 'center',
alignItems: 'center',
marginVertical: 10,
},
lable: {
fontSize: 22,
paddingHorizontal: 15,
color: '#fff',
},
errorMsg: {
padding: 10,
borderWidth: 1,
borderColor: '#f00',
},
iconStyle: {marginTop: 5},
});
Raw
PurchaseScreen.js
import {Body, Button, Header, Icon, Left, Right, Title} from 'native-base';
import React, {Component} from 'react';
import {
Alert,
Dimensions,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import * as RNIap from 'react-native-iap';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import SearchBoard from '../../component/SearchBoard';
const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;
const items = Platform.select({
ios: ['com.myapp.premium'],
});
export default class PurchaseScreen extends Component {
constructor() {
super();
this.state = {
availablePurchases: [],
};
}
componentDidMount() {
this.getProduct();
}
getProduct = async () => {
try {
await RNIap.initConnection();
// console.log('init?', init);
const availablePurchases = await RNIap.getProducts(items);
console.log('availablePurchases', availablePurchases);
this.setState({
availablePurchases,
});
} catch (err) {
// console.warn(err);
Alert.alert('Error purchase available', JSON.stringify(err));
}
};
requestSubscription = async sku => {
try {
let req = await RNIap.requestSubscription(sku);
// is here should i check
// if (req) dispatch action?
} catch (err) {
Alert.alert(err.code, err.message);
}
};
render() {
return (
<View style={{flex: 1, backgroundColor: '#121212'}}>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<View>
<Text>
{this.state.availablePurchases[0] &&
this.state.availablePurchases[0].price} $
</Text>
</View>
<View style={styles.errorMsg}>
<Text style={styles.lable}>
Data: {JSON.stringify(this.state.availablePurchases)}
</Text>
</View>
<TouchableOpacity
onPress={() => this.requestSubscription(items[0])}>
<Text>Buy</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment