Skip to main content

PlatformColor

Functions to access native colors on the target platform by supplying the native color’s corresponding value.

PlatformColor.ios​

PlatformColor.ios is used to get color information from iOS UI Element Colors (and related UIKit colors).

ios: array<Ios.t> => Color.t

Pass one or more fallbacks; the first supported value wins:

PlatformColor.ios([#label, #black])

PlatformColor.android​

PlatformColor.android is used to get color information from Android colors or attributes.

android: array<Android.t> => Color.t

Colors use the full resource form (e.g. #"@android:color/primary_text_dark"). Attributes use forms like #"?android:attr/colorPrimary".

You may mix colors and attributes. The first value is treated as default and the rest as fallbacks:

PlatformColor.android([
  #"@android:color/primary_text_dark",
  #"?android:attr/colorPrimary",
])

See also:

PlatformColor.unsafe​

Depending on platform & OS version (and for Android you can have user-defined attrs for colors), this function is used for getting platform colors from strings.

unsafe: array<string> => Color.t

This can be any Android resource query, for example: "?attr/colorPrimary" or "?android:attr/colorPrimary", even resources defined within your Android app. The first value will be treated as default and the rest as fallbacks.

PlatformColor.unsafe(["?attr/colorPrimary", "?android:attr/colorPrimary"])

Example​

open ReactNative
open Style

let styles = StyleSheet.create({
  "container": s({
    color: switch Platform.os {
    | os if os == Platform.android =>
      PlatformColor.android([
        #"@android:color/primary_text_dark",
        #"?android:attr/colorPrimary",
      ])
    | os if os == Platform.ios => PlatformColor.ios([#label])
    | _ => "black"
    },
  }),
})