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

NameDescription
Window DimensionsReturns an object with width and heightkeys populated with the device's window/screen dimensions
Window WidthReturns a number representing the width of the device's window/screen
Window HeightReturns 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

NameDescription
Tablet or LargerReturns true/false based on the device's window/screen dimensions
Laptop or LargerReturns true/false based on the device's window/screen dimensions
Desktop or LargerReturns true/false based on the device's window/screen dimensions
Big Screen or LargerReturns true/false based on the device's window/screen dimensions
Tablet Min WidthReturns a number based on the minimum width for the Tablet and Larger breakpoint
Laptop Min WidthReturns a number based on the minimum width for the Laptop and Larger breakpoint
Desktop Min WidthReturns a number based on the minimum width for the Desktop and Larger breakpoint
Big Screen Min WidthReturns a number based on the minimum width for the Big Screen and Larger breakpoint

Safe Area

See the Safe Area doc for more info.

NameDescription
Top Safe Area InsetReturns a number based on the current top safe area inset
Bottom Safe Area InsetReturns a number based on the current bottom safe area inset
Left Safe Area InsetReturns a number based on the current left safe area inset
Right Safe Area InsetReturns a number based on the current right safe area inset

Date

NameDescription
DateReturns a new JavaScript Date object. Example: new Date()

Conditional

NameDescription
If/Then/ElseAdds a conditional statement to select different variables based on the evaluated condition

Current Theme

PropertyDescription
Theme NameReturns the name of the Theme the app is using
Color SchemeReturns light or dark depending on which color scheme the app is using

Colors

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