Blur View

A component that blurs everything underneath the it. On iOS, it renders a native blur view and on Android, a semi-transparent view.

A Blur View component is placed adjacent to the Component whose content you want to blur. It also wraps children components such as Text. The content of a child component on a Blur View will be displayed above to the adjacent component.

In the example below, there is an Image Background component in the Components tree. Next to it, is the Blur View that wraps a Text component.

318318

Adding a Blur View

  • Add the component whose content you want to blur in the Components tree. (In the example below, we're using the Image Background component.)
  • Select the Blur View component from the Components drawer. You can open the list of components by clicking the + button next to Components.
  • Then, add one or more child components whose content you want to display over the blurred view.
  • Additionally, in Styles tab (first tab) from Properties Panel, set the Position property of the Blur View to absolute and Top: 0, Bottom: 0, Right: 0, Left: 0.
  • If you want to blur effect to take over the whole screen (such as used in the example below), make sure to add a property of Flex: 1 under Layout > Selected Item > Flex.
  • Add the value for the child component of the Blur View.

To see the effect, go to one of the Preview modes (Web, iOS, or Android) to see the effect.

600600

Configuration Properties

PropertyDescription
Component NameTo alter the name of the component. The name is reflected in the Components tree. Defaults to Blur View.
TintA tint is a mode that is applied to the whole blur view. Select the type of tint to be applied to the blur view.
IntensityA number between 1 and 100 that controls the how intense the blur is. Defaults to 50.

Modifying Tint

There are three types of values for Tint property available:

  • default
  • light
  • dark
800800

Default Tint

800800

Light Tint

800800

Dark Tint

Modifying Intensity

To increase or decrease the blur effect, you can modify the value of the Intensity property.

In the example below, the intensity is set to 100.

800800

In the example below, the intensity is set to 30.

800800

📘

Setting a higher value of intensity, the content underneath the Blur View component will become less visible.


Did this page help you?