Star Rating

Star Rating

Star Rating is a visual component to collect and display measurable feedback from app users.

Adding a Star Rating component

To add a Star Rating to your app screen:

  • Select the Star Rating component from the Components drawer. You can open the list of components by clicking the + button next to Components.
  • Go to alter the properties of the component, go to the Configs tab (second tab) in the Properties Panel.

Configuration Properties

PropertyDescription
Component NameTo alter the name of the component. The name is reflected in the Components tree. Defaults to Touchable.
Field NameSet the name of the field that controls toggling the rating value and its state.
Star SizeSize of the star icons.
Max StarsThe number of stars to display.
EditableEnable it to allow the app user to edit the star rating.
Active ColorColor to display for active stars based on rating.
Inactive ColorColor to display for inactive stars based on rating.

Setting up the Star Rating component to use dynamic values

The Star Rating component can be hooked to the data incoming from an API endpoint.

To use the key in the API's JSON response and display the actual rating from the API endpoint:

  • Go to the Data tab (third tab) in the Properties Panel.
  • Set the value of Initial Value property under Setup to the key from the JSON response.

Here is an example of using a Star Rating component in a List component. Each item card on the list contains a rating key, with the value as a number:

{
  "rating": 4,
  ...
}

Editing the rating using the Star Rating component

To make the Star Rating component interactive:

  • Go to the Configs tab (second tab) in the Properties Panel.
  • Enable Editable property to make the component interactive.

Did this page help you?