How to make a "Rate this app" link in React Native app?

Question

How to properly link a user to reviews page at App Store app in React Native application on iOS?

outofculture · Answer 1 · 2020-04-09T18:41:03.980

42

Use Linking to open up the url to the app store. To construct the proper url, follow the instructions for iOS and/or android. E.g.

Linking.openURL('market://details?id=myandroidappid')

or

Linking.openURL('itms-apps://itunes.apple.com/us/app/apple-store/myiosappid?mt=8')

edited Apr 09 '20 at 18:41

answered Apr 20 '16 at 22:50

outofculture

6,023
1
18
20

2

This should work fine, but when building for iOS 9+, you need to add `LSApplicationQueriesSchemes` as described here: http://facebook.github.io/react-native/docs/linking.html#canopenurl – Kevin Cooper Apr 19 '17 at 15:38
2

The iOS simulator also doesn't have the Play Store installed, so it will always fail on the simulator :( – Kevin Cooper Apr 19 '17 at 15:38
More info can be found here https://johnsonsu.com/react-native-custom-url-scheme-launch-apps-using-linking/ – Purvik Rana Jan 07 '20 at 13:49
1

This is outdated for iOS. It tries to open iTunes Store and not App Store. – Gezim Jan 28 '20 at 03:55
3

@Gezim replace `itms://` by `itms-apps://` – Masadow Mar 27 '20 at 10:47
myiosappid can be found on App Store -> App Information -> Search "Apple ID". – Tayyab Mazhar Apr 10 '23 at 11:31

score 40 · Accepted Answer · edited Oct 01 '20 at 09:01

40

For iOS you Have to add LSApplicationQueriesSchemes as Array param to Info.plist and add items to it.

For example to AppStore linking I use itms-apps as one of params in this array.

For example:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>itms-apps</string>
</array>

Your link should be like this

itms-apps://itunes.apple.com/us/app/id${APP_STORE_LINK_ID}?mt=8.

Well. Now you have all stuff to do Link component with method

handleClick () {
    Linking.canOpenURL(link).then(supported => {
        supported && Linking.openURL(link);
    }, (err) => console.log(err));
}

edited Oct 01 '20 at 09:01

cura

1,035
1
17
33

answered Dec 07 '16 at 15:18

SerzN1

1,814
23
15

1

Note that `LSApplicationQueriesSchemes` is only necessary when building for iOS 9+: http://facebook.github.io/react-native/docs/linking.html#canopenurl – Kevin Cooper Apr 19 '17 at 15:38
11

The iOS simulator also doesn't have the Play Store installed, so this will always fail on the simulator. You need to test on a real device. – Kevin Cooper Apr 19 '17 at 15:43
1

How to add `LSApplicationQueriesSchemes` just like this: **LSApplicationQueriesSchemes** or..?? – Hoàng Vũ Anh Sep 20 '18 at 08:04
As of https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/LaunchServicesKeys.html#//apple_ref/doc/uid/TP40009250-SW14 the value of the `LSApplicationQueriesSchemes` key is an array containing URLs you want to support. – jneuendorf Feb 01 '19 at 12:54
@HoàngVũAnh `LSApplicationQueriesSchemes itms-apps ` – Kruupös Nov 15 '19 at 17:40
If you are using Expo, you must add the LSApplicationQueriesSchemes to the app.json file into the infoPlist object in this format: "LSApplicationQueriesSchemes": [ "itms-apps" ] – mdikici May 21 '22 at 23:59

score 21 · Answer 3 · answered Nov 04 '16 at 19:16

This is something similar, it shows an alert box to update the app and it opens the play store or the app store depending on their device os.

function updateAppNotice(){
     const APP_STORE_LINK = 'itms://itunes.apple.com/us/app/apple-store/myiosappid?mt=8';
     const PLAY_STORE_LINK = 'market://details?id=myandroidappid';
     Alert.alert(
        'Update Available',
        'This version of the app is outdated. Please update app from the '+(Platform.OS =='ios' ? 'app store' : 'play store')+'.',
        [
            {text: 'Update Now', onPress: () => {
                if(Platform.OS =='ios'){
                    Linking.openURL(APP_STORE_LINK).catch(err => console.error('An error occurred', err));
                }
                else{
                    Linking.openURL(PLAY_STORE_LINK).catch(err => console.error('An error occurred', err));
                }
            }},
        ]
    );
}

What does `mt=8` do? I'm wondering if this is region specific and necessary? — Anshuul Kai, Apr 15 '17 at 21:13
@AnshulKoka, mt stands for "Media Type" and value 8 corresponds to "Mobile Software Applications". For more info see https://stackoverflow.com/questions/1781427/what-is-mt-8-in-itunes-links-for-the-appstore — mihai1990, Jan 19 '18 at 09:39

score 8 · Answer 4 · answered Aug 28 '18 at 10:21

I am using this library. seems pretty good. You just have to specify the package name and App store ID and call the function. And it's cross-platform too.

render() {
        return (
            <View>
                <Button title="Rate App" onPress={()=>{
                    let options = {
                        AppleAppID:"2193813192",
                        GooglePackageName:"com.mywebsite.myapp",
                        AmazonPackageName:"com.mywebsite.myapp",
                        OtherAndroidURL:"http://www.randomappstore.com/app/47172391",
                        preferredAndroidMarket: AndroidMarket.Google,
                        preferInApp:false,
                        openAppStoreIfInAppFails:true,
                        fallbackPlatformURL:"http://www.mywebsite.com/myapp.html",
                    }
                    Rate.rate(options, (success)=>{
                        if (success) {
                            // this technically only tells us if the user successfully went to the Review Page. Whether they actually did anything, we do not know.
                            this.setState({rated:true})
                        }
                    })
                } />
            </View>
        )
    }

score 5 · Answer 5 · answered Jan 11 '21 at 11:47

2021 Update:

Some of the other answers are quite old, and don't support using the in-app review API added in iOS 10.3 (SKStoreReviewController) and Android 5 (ReviewManager). If you're adding reviews to your React Native app in 2021 you should ideally use these if they are available.

Expo provide a library, https://docs.expo.io/versions/latest/sdk/storereview/ , which will use these newer APIs if they are supported on the user's device, and falls back to opening the store page if not.

There is also https://github.com/KjellConnelly/react-native-rate which has similar functionality, but with a lot more configuration options. E.g. you can decide whether or not to use the in-app API some or all of the time (which might be a good idea, as the in-app API has a lot less friction for the user but you can only ask a few times a year).

score 1 · Answer 6 · answered Oct 07 '20 at 10:41

Using third party libraries, in ios it is opening itunes, let me tell you the exact way for opening appstore. First thing your should be live and it'll work on physical device(simulator is not guaranteed)

const url = Platform.OS === 'android' ?
                    'https://play.google.com/store/apps/details?id=YOUR_APP_ID'   :  'https://apps.apple.com/us/app/doorhub-driver/id_YOUR_APP_ID'
                Linking.openURL(url)

You can find your ios link by searching your app on appstore and copy that url.

How to make a "Rate this app" link in React Native app?

6 Answers6

2021 Update:

Linked