Last active
October 30, 2021 03:10
-
-
Save anastely/8974a3b2e8dbf3aa622cc58d0e5b626a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}, | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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