1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3import { StoreReview } from 'expo';
4
5import Button from '../components/Button';
6import CannyFooter from '../components/CannyFooter';
7import Colors from '../constants/Colors';
8
9class StoreReviewScreen extends React.Component {
10  static navigationOptions = {
11    title: 'Store Review',
12  };
13
14  onRequestReview = () => StoreReview.requestReview();
15
16  get isSupportedText() {
17    return StoreReview.isSupported() ? 'is supported! :D' : 'is not supported! D:';
18  }
19
20  get storeUrl() {
21    const storeUrl = StoreReview.storeUrl();
22    if (storeUrl) {
23      return `On iOS <10.3, or Android devices pressing this button will open ${storeUrl}.`;
24    } else {
25      return (
26      'You will need to add ios.appStoreUrl, and android.playStoreUrl to your app.json in order to use this feature.'
27      );
28    }
29  }
30
31  render() {
32    return (
33      <View style={styles.container}>
34        <View>
35          <View style={styles.textContainer}>
36            <Text style={styles.isSupportedText}>Native Store Review {this.isSupportedText}</Text>
37            <Text style={styles.storeUrlText}>{this.storeUrl}</Text>
38          </View>
39
40          <Button
41            onPress={this.onRequestReview}
42            style={styles.button}
43            buttonStyle={!StoreReview.hasAction() ? styles.disabled : undefined}
44            title="Request a Review!"
45          />
46        </View>
47
48        <CannyFooter />
49      </View>
50    );
51  }
52}
53
54const styles = StyleSheet.create({
55  container: {
56    padding: 16,
57    flex: 1,
58    backgroundColor: Colors.greyBackground,
59    justifyContent: 'space-between',
60  },
61  textContainer: {
62    marginBottom: 16,
63  },
64  isSupportedText: {
65    color: Colors.tintColor,
66    paddingVertical: 4,
67    fontSize: 16,
68    fontWeight: 'bold',
69  },
70  storeUrlText: {
71    color: Colors.secondaryText,
72    fontSize: 14,
73  },
74  disabled: {
75    backgroundColor: Colors.disabled,
76  },
77  button: {
78    alignItems: 'flex-start',
79  },
80});
81
82export default StoreReviewScreen;
83