# Rating

## Rating Overview

The Rating component is a visible component which can be used to display the rating of a product or content in your app, and allow the user to leave their own rating.

A Rating component is made up of 5-10 *icons*. An icon can be filled, partially filled, or empty, as seen below:

![A Rating component displaying a rating of 3.5/5](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MGxGXpTdTR3QC0TWFva%2F-MGxK6G1nzFoNDTdK8Uy%2Frating.png?alt=media\&token=e16e8406-3127-4296-b8ca-5788ee36b721)

## Event Blocks

### On Rate

This block fires when a user enters a rating in the Rating component.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHBFVjWLgpMW40ZqGwM%2F-MHBIJY9FgiRkI09Q-OP%2Frating%20on%20rate.png?alt=media\&token=fb2b14f4-6adb-4d41-ac73-3559b8251df4)

## Properties

### Count

Maximum rating that can be given. Can be an integer between 5 and 10, selected from a drop-down menu.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdG_LN1gAgFdDiwyL6%2Fcount.png?alt=media\&token=60bfb06c-27bd-41f3-b86c-94ab4ae2ced6)

### Direction

Select how the Rating component is displayed: as a **row** (left-right), **row-reverse** (right-left), **column** (top-bottom), or **column-reverse** (bottom-top).

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdGi5JZUygyGpNePut%2Fdirection.png?alt=media\&token=53bc356a-7f66-4917-8924-30f58350d042)

### Font Size

Change the size of the icons that make up the Rating component.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdGrtmh2psoYhHCxCq%2Ffont_size.png?alt=media\&token=3dfe42a4-af1b-459f-a953-0d844b9c2d56)

###

### Height 

Set or get the `height` of the rating component in pixels.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdHIMWJXuRW0Jcfo4q%2Fheight.png?alt=media\&token=1fd2e5d5-ae78-44c4-a7d4-052cfcae1e33)

### Icon Margin 

Get or change the size of the margin between the icons of the Rating component.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdHCAefg1JphCOLH5P%2Ficon_margin.png?alt=media\&token=df0f5887-a06f-4ea6-8613-7ddfca42fa53)

### Icon

You can select an image from the list available. All of the image options are suitable for any platform. You can preview the image options [here](https://icons.expo.fyi/).

You can upload your own images to be displayed for filled and empty icons.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdH7zN0Z3MOK9_YB4N%2Ficon.png?alt=media\&token=c82d8b89-dc62-498d-8d9e-798bb7de99ec)

### Read Only

Toggle whether the user can edit the value displayed on the Rating component. If read-only is true, the value cannot be edited. If read-only is false, the value can be edited.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdIOrTGLMqvCXkh5nK%2Fread_only.png?alt=media\&token=563db2af-fdb7-48a1-8bbf-5831f83d737d)

### Rating Background Color

Select the color of an unfilled icon.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdIWLWnrURFMi1Liym%2Frating_bg_color.png?alt=media\&token=2eb4afc0-6a92-4869-b26f-1fdd3caebe9c)

### Rating Color

Select the color of a filled icon.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdIYMfHzObjb6KDz8K%2Frating_color.png?alt=media\&token=e0dc4a66-b35b-476b-abc2-a7697edef132)

### Value

Initial value displayed on the Rating component. Can be any number between 0 and the maximum value, including decimals.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdI_ppIUEI9prHd8_5%2Fvalue.png?alt=media\&token=d82f1f1b-78ae-4c99-9a7e-4e0e5f92b6a4)

### Visible

Toggle whether your Rating component is visible.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdIcYt9bR5XRxqWivM%2Fvisible.png?alt=media\&token=49c43ef2-662b-4b8f-9b57-b48a928f02de)

### Width 

Set or get the `width` of the rating component. Given in Pixels.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdHgNUqfCGDwcwPhlW%2Fwidth.png?alt=media\&token=ebe883a5-e36a-4364-8c3d-e4f5d1e48399)

### X 

Set or get the horizontal position of the rating component on the screen. 

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdHoiZfVUE7G9jdKjc%2Fx.png?alt=media\&token=3b41866a-e14f-472a-885a-81a8c5d13774)

### Y

Set or get the vertical position of the rating component on the screen.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdHtOZDY2kXFF9wnDX%2Fy.png?alt=media\&token=9ca0e861-0bda-4e4e-912a-bc7daaac1c8c)

###