GithubHelp home page GithubHelp logo

catalinmiron / react-native-rating-requestor Goto Github PK

View Code? Open in Web Editor NEW

This project forked from jlyman/react-native-rating-requestor

2.0 3.0 0.0 115 KB

A React Native component to prompt users for a rating after positive interactions

License: MIT License

JavaScript 100.00%

react-native-rating-requestor's Introduction

react-native-rating-requestor

A React Native component to prompt users for a rating after positive interactions

The Rating Requestor is a very simple JS module that you simply instantiate and call from time to time, as your user performs actions that result in a "happy path." For example, maybe your users get a smile on their face every time they save money with your app, beat a level, or clear out their inbox. After a certain number of these positive events, it might be a good time to ask the user for a review.

Installation

npm i --save react-native-rating-requestor

Usage

Import and create a new instantiation of the Rating Requestor somewhere in the main portion of your application:

    import RatingRequestor from 'react-native-rating-requestor';
    let RatingTracker = new RatingRequestor('[your apps store ID]');

    let MyApp = React.createClass({ ... });

When a positive UX event occurs, let the Rating Requestor know so that it can keep track of these:

	if (user_saved_the_world) {
		RatingTracker.handlePositiveEvent();
	}

The example above is used without callback. A callback can be provided that reports on result of the handling. The callback accepts two parameters: the first indicates whether the request dialog appeared (boolean), and the second returns the user decision (string: 'decline', 'delay', or 'accept').

if (user_saved_the_world) {
	RatingTracker.handlePositiveEvent(function(didAppear, userDecision) {
		if (didAppear) {
			switch(userDecision)
			{
				case 'decline': console.log('User declined to rate'); break;
				case 'delay'  : console.log('User delayed rating, will be asked later'); break;
				case 'accept' : console.log('User accepted invitation to rate, redirected to app store'); break;
			}
		} else {
			console.log('Request popup did not pop up. May appear on future positive events.');
		} 
	});
}

If enough positive events have occurred (defined by the timingFunction) then a rating dialog will pop up. The user can rate the app or decline to rate, in which case they won't be bothered again, or can choose to maybe do so later, in which case the Rating Requestor will keep on tracking positive event counts.

You can also trigger the rating dialog to appear immediately by invoking RatingTracker.showRatingDialog([callback]). If you have a "Rate this App" button or link in an about page or something in your app, this would be a good place to use that.

Configuration

All configuration occurs on the construction of a new RatingRequestor.

    let myRR = new RatingRequestor(appStoreId, [ options ]);

You must pass in a string as the first parameter, which is the app store ID of your application. Optionally, but highly suggested, is a second parameter: a set of options to customize the request dialog and the timing of the dialog. This object follows this pattern:

	{
		title: {string},
        message: {string},
        actionLabels: {
        	decline: {string},
        	delay: {string},
        	accept: {string}
        },
        timingFunction: {func(currentCount) => boolean}
	}
  • title: A string used as the title for the dialog (e.g., "Please rate me!")
  • message: The message you'd like to show the user (e.g., "If you are loving [my app's name], would you please leave me a positive review?")
  • actionLabels: An object with three properties (all required if you don't want weird blanks or OKs):
    • decline: The "no thanks, I don't want to ever rate this" button label
    • delay: The "maybe I'll rate this later if I'm feeling charitable" button label
    • accept: The "oh my gosh I love this app so much so I'll rate it right now" button label
  • timingFunction: A method that takes the current total count of positive events recorded for the app, and returns if the Requestor should display the dialog or not. By default, the timingFunction evaluates as 3^n, and if 3^n == currentCount then it returns true/shows the dialog. Source looks like this:
timingFunction: function(currentCount) {
    return currentCount > 1 && Math.log(currentCount) / Math.log(3) % 1 == 0;
}

Notes

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

Releases

  • 2.0.0 - Supports Android, requires RN v0.20.0+, and added showRatingDialog() thanks to @maximilianhurl.
  • 1.1.0 - Added an optional callback to handlePositiveEvent() that reports on the result of the handling. Props to @sercanov.
  • 1.0.0 - Initial release

Questions?

Feel free to contact me:

react-native-rating-requestor's People

Contributors

jlyman avatar sercanov avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.