1import { StackNavigationProp } from '@react-navigation/stack';
2import * as StoreReview from 'expo-store-review';
3import React from 'react';
4import { Platform, StyleSheet, Text, View } from 'react-native';
5
6import Button from '../components/Button';
7import Colors from '../constants/Colors';
8
9type Props = {
10  navigation: StackNavigationProp<any>;
11};
12
13function getStoreUrlInfo(): string {
14  const storeUrl = StoreReview.storeUrl();
15  if (storeUrl) {
16    return `On Android devices pressing this button will open ${storeUrl}.`;
17  }
18  return 'You will need to add ios.appStoreUrl, and android.playStoreUrl to your app.config.js in order to use this feature on Android.';
19}
20
21function StoreReviewScreen({ navigation }: Props) {
22  React.useLayoutEffect(() => {
23    navigation.setOptions({
24      title: 'Store Review',
25    });
26  }, [navigation]);
27
28  const [isAvailable, setAvailable] = React.useState<boolean>(false);
29
30  React.useEffect(() => {
31    StoreReview.isAvailableAsync().then(setAvailable);
32  }, []);
33
34  const isSupportedText = isAvailable ? 'is available' : 'is not available!';
35
36  return (
37    <View style={styles.container}>
38      <View style={styles.textContainer}>
39        <Text style={styles.isSupportedText}>Native Store Review {isSupportedText}</Text>
40        <Text style={styles.description}>{getStoreUrlInfo()}</Text>
41      </View>
42
43      <Button
44        onPress={StoreReview.requestReview}
45        style={styles.button}
46        buttonStyle={!StoreReview.hasAction() ? styles.disabled : undefined}
47        title="Request a Review!"
48      />
49
50      <View style={[styles.textContainer, { marginTop: 5 }]}>
51        <Text style={styles.description}>
52          {Platform.OS === 'android' && 'Warning: this will not work in unsigned APKs'}
53        </Text>
54      </View>
55    </View>
56  );
57}
58StoreReviewScreen.navigationOptions = { title: 'Store Review' };
59
60const styles = StyleSheet.create({
61  container: {
62    padding: 16,
63    flex: 1,
64    backgroundColor: Colors.greyBackground,
65  },
66  textContainer: {
67    marginBottom: 16,
68  },
69  isSupportedText: {
70    color: Colors.tintColor,
71    paddingVertical: 4,
72    fontSize: 16,
73    fontWeight: 'bold',
74  },
75  description: {
76    color: Colors.secondaryText,
77    fontSize: 14,
78  },
79  disabled: {
80    backgroundColor: Colors.disabled,
81  },
82  button: {
83    alignItems: 'flex-start',
84  },
85});
86
87export default StoreReviewScreen;
88