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.

| Type | Required | Default | | ------------------------------------------------------------ | -------- | -------------- | | AzirIcons,SolidIcons, RegularIcons, BrandIcons , CustomIcons | No | AzirIcons.Star |

onChange

Handler to be called when the user change the rating .

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

| Type | Required | | -------- | -------- | | function | NO |

rating

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

| Type | Required | Default | | ------ | -------- | ------- | | Number | No | 2 |

count

Total number of ratings to display

| Type | Required | Default | | ------ | -------- | ------- | | Number | No | 5 |

size

The Size of the Rating Icon

| Type | Required | Default | | ------------------------------------ | -------- | ------- | | azir-size | No | 25 |

scaleSize

The Size of the Rating Icon when its active

| Type | Required | Default | | ------------------------------------ | -------- | ------- | | azir-size | No | 40 |

activeColor

Active Rating icon Color.

| Type | Required | Default | | ------------------------------------------ | -------- | ------- | | azir-color | No | theme |

inActiveColor

In Active Rating icon Color.

| Type | Required | Default | | ------------------------------------------ | -------- | ------- | | azir-color | No | #BDC3C7 |

showAnimation

Show Rating Icons Change Spring animation

| Type | Required | Default | | ------- | -------- | ------- | | boolean | No | true |

showScaleEffect

Show Rating Icons Change Scaling Effect

| Type | Required | Default | | ------- | -------- | ------- | | boolean | No | true |

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

| Type | Required | Default | | -------- | -------- | -------------------------------------------- | | string[] | No | ["Terrible", "Bad", "Okay", "Good", "Great"] |

reviewSize

The font Size of the Rating Reviews

| Type | Required | Default | | ------ | -------- | ------- | | Number | No | 25 |

showRatingReview

If false, we hide rating reviews.

| Type | Required | Default | | ---- | -------- | ------- | | bool | No | true |

disabled

If true, disable all interactions for this component.

| Type | Required | Default | | ---- | -------- | ------- | | bool | No | false |

style

override Rating main Container Style

| Type | Required | | ----- | -------- | | style | No |

containerStyle

override rating icons container style

| Type | Required | | ----- | -------- | | style | No |

starContainerStyle

override Star Container Style

| Type | Required | | ----- | -------- | | style | No |

reviewStyle

override review Text style

| Type | Required | | ----- | -------- | | style | No |