System Variables

A System Variable is a variable with a pre-defined value. Draftbit exposes different types of System Variables. System Variables are available in any variable dropdown where Variables can be used.

📘
System Variables are read-only and their value can't be set

Dimensions

Name	Description
Window Dimensions	Returns an object with `width` and `height`keys populated with the device's window/screen dimensions
Window Width	Returns a number representing the width of the device's window/screen
Window Height	Returns a number representing the height of the device's window/screen

Device

Name	Description
Is Online	Returns a `true` or `false` depending on the device's network state. If the device is is connected to a network, it will return `true` and vice versa. Uses React Native Netinfo API.
Is iOS	Returns a `true` or `false` depending on whether the app is running on an iOS device or not.
Is Android	Returns a `true` or `false` depending on whether the app is running on an Android device or not.
Is Web	Is Web - Returns a `true` or `false` depending on whether the app is running in a Web browser or not.

Breakpoints

See the Breakpoints doc for more on Breakpoints and specific dimensions

Name	Description
Tablet or Larger	Returns `true`/`false` based on the device's window/screen dimensions
Laptop or Larger	Returns `true`/`false` based on the device's window/screen dimensions
Desktop or Larger	Returns `true`/`false` based on the device's window/screen dimensions
Big Screen or Larger	Returns `true`/`false` based on the device's window/screen dimensions
Tablet Min Width	Returns a number based on the minimum width for the Tablet and Larger breakpoint
Laptop Min Width	Returns a number based on the minimum width for the Laptop and Larger breakpoint
Desktop Min Width	Returns a number based on the minimum width for the Desktop and Larger breakpoint
Big Screen Min Width	Returns a number based on the minimum width for the Big Screen and Larger breakpoint

Safe Area

See the Safe Area doc for more info.

Name	Description
Top Safe Area Inset	Returns a number based on the current top safe area inset
Bottom Safe Area Inset	Returns a number based on the current bottom safe area inset
Left Safe Area Inset	Returns a number based on the current left safe area inset
Right Safe Area Inset	Returns a number based on the current right safe area inset

Date

Name	Description
Date	Returns a new JavaScript Date object. Example: `new Date()`

Conditional

Name	Description
If/Then/Else	Adds a conditional statement to select different variables based on the evaluated condition

Current Theme

Property	Description
Theme Name	Returns the name of the app Theme the device is using
Color Scheme	Returns `light` or `dark` depending on which color scheme the device is using

Colors

All of your named theme colors are also available as System Variables