Skip to main content
The useEnvironment function provides access to the current environment context, including configuration values, system information, and runtime-specific data. 
const environment = useEnvironment(): EnvironmentValues

​
Parameters

None

​
Returns

Returns the current environment object (EnvironmentValues) with the following properties:
​
colorScheme
"light" | "dark"
The current color scheme setting.
​
displayScale
number
The display scale factor for high-resolution displays.
​
dynamicTypeSize
DynamicTypeSize
The user’s preferred text size setting for accessibility.
​
locale
string
The current locale/language setting (e.g., “en-US”, “fr-FR”).
​
layoutDirection
LayoutDirection
Text and UI layout direction.
​
screen
{width: number, height: number}
The screen dimensions object containing width and height properties.
​
platform
string
The current platform identifier (e.g., “ios”, “android”, “web”).
​
openURL
(url: string, resultCallback?: (boolean) => void) => void
Function to open URLs with an optional success callback.
​
[key: string]
any
Additional custom environment values that may be set by the host application.

​
Usage

​
Accessing environment data

const body = () => {
  const env = useEnvironment()

  return VStack([
    Text(`Platform: ${env.platform}`),
    Text(`Screen Size: ${env.screen.width}x${env.screen.height}`),
    Text(`Locale: ${env.locale}`)
  ])
}

​
Notes

  • The environment is set by the runtime and can be customized by the host application
  • Default environment includes an openURL function for external link handling
  • Environment values are shared across all components in the same runtime instance
  • Changes to environment typically require runtime reinitialization
  • Use environment for feature flags, platform detection, and runtime configuration