Skip to main content

Returns

Which keys are set depends on the renderer. iOS sets colorScheme, displayScale, dynamicTypeSize, layoutDirection, and locale. Web sets colorScheme, platform, and screen. The Android renderer (bindjs-android 0.0.33) sets none of them. Read each with a fallback. An EnvironmentValues object with the following fields:
"light" | "dark"
The current appearance mode.
number
The display pixel density (e.g. 2.0 for Retina displays).
DynamicTypeSize
The user’s preferred text size setting. Not set by every renderer. See DynamicTypeSize.
string
The current locale identifier (e.g. "en_US").
"leftToRight" | "rightToLeft"
Text layout direction.
{ width: number; height: number }
Screen dimensions in points. Not set by every renderer.
string
The current platform. The web renderer sets it to "web".
(url: string, resultCallback?: (success: boolean) => void) => void
Opens a URL using the platform’s default handler.
Custom environment values set via the .environment() modifier are also available as additional properties on the returned object.

Usage

Adapt to color scheme

Responsive layout

Read custom environment values

Open a URL

Notes

  • useEnvironment must be called inside a component body function, not at the top level.
  • Custom values are set via the .environment() modifier on a parent component, e.g. .environment("accentColor", "purple").
  • The screen dimensions are in logical points, not physical pixels.

See Also