Miss any of our Open RFC calls?Watch the recordings here! »

@pankod/react-native-store-rating

1.0.0 • Public • Published
            

React Native Store Rating

React Native Module to getting users to easily rate your app.

npm version npm downloads per month dependencies Status


Created by Pankod


Ratings and reviews influence how your app ranks in search results, and can affect whether someone downloads your app. Users can rate your app on a scale of desired amount of stars. They can also add a written review for iOS and Android apps.

Stores Supported:

Apple App Store Google Play

Getting started

$ npm install react-native-store-rating --save

or

$ yarn add react-native-store-rating

Usage

Users are presented with a modal allowing them to choose amount of stars which is defined with count props.

The star rate taken from the users is compared to the value defined in "commentOpenRating". If this value is greater than the value of "commentOpenRating", the user is directed to the App store or Google Play Store. If it is equal and smaller, comment popup will be opened and users will be allowed to type comment.

Example: Let's say we defined 3 as a value to commentOpenRating property,

<RateModal
    commentOpenRating={3}
    // ... props
/>

User redirect to App Store or Google Play Store when the given star rate is greater then 3.

Comment modal will be opened if the given star rate equal or less then 3.

Example

import React, { Component } from 'react';
import RateModal from 'react-native-rating-modal';
 
export default class example extends Component {
    render() {
        return (
            <RateModal
                rateBtnText={'Rate'}
                cancelBtnText={'Cancel'}
                count={5}
                defaultRating={5}
                showRating={true}
                sendBtnText={'Send'}
                placeHolderText={'Placeholder text'}
                nonComment={'Non comment text'}
                androidUrl={'market://details?id=${APP_PACKAGE_NAME}'}
                isModalOpen={true}
                commentOpenRating={3}
                style={{
                    backgroundColor: '#000',
                    paddingHorizontal: 30,
                }}
                ratingOnChange={(e: number) => {
                    console.log('change rating', e);
                }}
                onClosed={() => {
                    console.log('pressed cancel button...')
                }}
                sendContactUsForm={(state: object) => {
                    // state = {
                    //  isModalOpen: true,
                    //  rating: 3,
                    //  review: "Lorem ipsum dolor sit amet...",
                    //  reviewError:false,
                    //  showContactForm:true
                    // }
                }}
            />
        )
    }
}
 

Options


Properties Type Description Default
sendContactUsForm
*required
Function Read component state and function fired when send bottom click { isModalOpen: true, rating: 3, review: "Lorem ipsum dolor sit amet...", reviewError:false, showContactForm:true }
androidUrl
*required
string Google Play Store App Url
market://details?id=${APP_PACKAGE_NAME}
iosUrl
*required
string Apple ITunes App Url
itms-apps://itunes.apple.com/app/${APP_ID}
rateBtnText string The button text. "Rate"
cancelBtnText string The cancel button text. "Cancel"
count number The starts count on modal. 5
defaulRating number If no number set, it will determine 3 stars rating. 5
showRating boolean Shows rating on modal. true
sendBtnText string The text of send button. "Send"
placeHolderText string User review modal placeholder text. "You can write your comments here"
transparent boolean Background style true
reviews array The array of rating title. ['Terrible', 'Bad', 'Okay', 'Good', 'Great']
nonComment string User review comment box validation text "Please specify your opinion."
isModalOpen boolean Control if the modal open or not. false
commentOpenRating number ? 3
style Object An object containing the styles objects to style the modal. example:
{ backgroundColor: #000, paddingHorizontal: 30 }
ratingOnChange Function Function fired when the rating has changed. return: number
onClosed Function Function fired when the modal has closed. console.warn('pressed cancel button...')


Notes

As of version 1.0.0 this package is compatible with both iOS and Android.

Releases

  • 1.0.0 - Initial release

Install

npm i @pankod/react-native-store-rating

DownloadsWeekly Downloads

25

Version

1.0.0

License

MIT

Unpacked Size

83.8 kB

Total Files

38

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar