Splash Feedback (Touchable Opacity)

The Splash Feedback is a visual feedback mechanism that creates a ripple or splash animation when a user interacts with a widget. This effect enhances the user experience by providing immediate visual confirmation that an action, such as a tap or click, has been recognized by the interface.

In many user interfaces, buttons come with a default splash effect, providing instant feedback during interaction. Recognizing the value of this visual feedback, Ensemble introduces the ability to extend the splash effect to other widgets, such as rows, columns, and containers, which don’t have a splash effect by default.

Kitchen Sink Example 

Widget List

Following are the list of widgets that support Splash Feedback

Enable Splash Feedback

To enable splash feedback on a widget, use the enableSplashFeedback property in the widget’s styles. Set this property to true to activate the visual effect. However, keep in mind that the splash feedback will only work if the widget is using onTap action.

Row:
  styles:
    enableSplashFeedback: true
    padding: 10
    borderWidth: 1
  onTap:
    executeCode:
      body: |
        console.log("Enabled Splash Feedback")

Splash Color

To enable splash feedback on a widget, use the enableSplashFeedback property in the widget’s styles. Set this property to true to activate the visual effect. However, keep in mind that the splash feedback will only work if the widget is using onTap action.

Row:
  styles:
    enableSplashFeedback: true
    padding: 10
    borderWidth: 1
  onTap:
    executeCode:
      body: |
        console.log("Enabled Splash Feedback")

Set max and min text scaling

You can continue supporting text scaling, but set max and min for the scaling factor:

Disable text scaling

To disable text scaling globally across your app, go to your app’s theme, and add the following:

App:
  textScale:
    enabled: true  # this is the default behavior
    maxFactor: 1.2
    minFactor: 0.8

In the above example, text size will be increase by max 20%. E.g. if user selects a scaling factor of 1.5 in the OS settings, the text will no be increased more than 20%.