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

Colors

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