azir-rating v1.0.0

Azir Framwork : https://azir.io/docs

Rating

An advance Rating component that should render nicely on any platform. Supports a great level of customization.

Installation

to install the latest version of azir-rating you only need to run:

npm install azir-rating  --save

or

yarn add azir-rating

Examples

Basic :

import Rating from "azir-rating" ;
---
<Rating
  size={60} rating={1}
  scaleSize={80} count={3}
  reviews={["Okay","Good", "Great"]}
  onChange={(rating,previousRating)=>{console.log(rating+" : " +previousRating)}}
/>

Advance with Styles :

import Rating from "azir-rating" ;
import  Icon,{ AzirIcons } from "azir-icon";
---
 <Rating
  reviewColor="red"
  activeColor="red"
  count={7}
  icon={AzirIcons.ThumbUp}
  starContainerStyle={ {borderWidth:1} }
  inActiveColor="#990000"
  reviewStyle={ {fontSize:18} }
  style={ {backgroundColor:"#eee"} }
  containerStyle={ {backgroundColor:"#aaeeaa"} }
  showAnimation={false}
  showScaleEffect={false}
/>

Props

Please make sure to download the latest version of Azir icons.

• icon
• onChange
• rating
• count
• size
• scaleSize
• activeColor
• inActiveColor
• showAnimation
• showScaleEffect
• reviews
• reviewSize
• showRatingReview
• disabled
• style
• containerStyle
• starContainerStyle
• reviewStyle

Reference

icon

Rating Icon.

onChange

Handler to be called when the user change the rating .

we pass two parameters (rating :current selected index,previousRating :previous index )

rating

Initial value for the rating. star rating started from zero.

count

Total number of ratings to display

size

The Size of the Rating Icon

scaleSize

The Size of the Rating Icon when its active

activeColor

Active Rating icon Color.

inActiveColor

In Active Rating icon Color.

showAnimation

Show Rating Icons Change Spring animation

showScaleEffect

Show Rating Icons Change Scaling Effect

reviews

Labels to show when each value is tapped e.g. If the first star is tapped, then value in index 0 will be used as the label

reviewSize

The font Size of the Rating Reviews

showRatingReview

If false, we hide rating reviews.

disabled

If true, disable all interactions for this component.

style

override Rating main Container Style

containerStyle

override rating icons container style

starContainerStyle

override Star Container Style

reviewStyle

override review Text style