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?

Solution 1

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));
}

Solution 2

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')

Solution 3

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));
                }
            }},
        ]
    );
}

Solution 4

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>
        )
    }

Solution 5

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).

View more solutions

Comments

[Anshuul Kai]

What does mt=8 do? I'm wondering if this is region specific and necessary?

[Kevin Cooper]

This should work fine, but when building for iOS 9+, you need to add LSApplicationQueriesSchemes as described here: facebook.github.io/react-native/docs/linking.html#canopenurl

[Kevin Cooper]

The iOS simulator also doesn't have the Play Store installed, so it will always fail on the simulator :(

[Kevin Cooper]

Note that LSApplicationQueriesSchemes is only necessary when building for iOS 9+: facebook.github.io/react-native/docs/linking.html#canopenurl

[Kevin Cooper]

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.

[mihai1990]

@AnshulKoka, mt stands for "Media Type" and value 8 corresponds to "Mobile Software Applications". For more info see stackoverflow.com/questions/1781427/…

[Hoàng Vũ Anh]

How to add LSApplicationQueriesSchemes just like this: <key>LSApplicationQueriesSchemes</key> or..??

[jneuendorf]

As of developer.apple.com/library/archive/documentation/General/… the value of the LSApplicationQueriesSchemes key is an array containing URLs you want to support.

[Kruupös]

@HoàngVũAnh <key>LSApplicationQueriesSchemes</key> <array> <string>itms-apps</string> </array>

[Purvik Rana]

More info can be found here johnsonsu.com/…

[GrayedFox]

This is outdated for iOS. It tries to open iTunes Store and not App Store.

[Masadow]

@Gezim replace itms:// by itms-apps://

[mdikici]

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" ]