Star Rating

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

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Component Specific Styles

PropertyDescription
Star SizeSize of the star icons.
Active ColorColor to display for active stars based on rating.
Inactive ColorColor to display for inactive stars based on rating.

Configuration Properties

PropertyDescription
Component NameTo alter the name of the component. The name is reflected in the Components tree. Defaults to Touchable.
Max StarsThe number of stars to display.
EditableEnable it to allow the app user to edit the star rating.

Data Properties

PropertyDescription
Data SourceThe data source to attach to the component

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.

Triggers

Trigger nameDescription
On PressRuns the Actions when the component is pressed

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 Data Source property under Setup to the key from the JSON response.

Here is an example of using a Star Rating component in a List component.

{
  "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.