@vonovak/react-native-theme-control

Table of contents

Functions

• setThemePreference
• getThemePreference
• useThemePreference
• setNavbarAppearance
• setAppBackground

React components

• NavigationBar
• ThemeAwareStatusBar
• SystemBars
• AppBackground

Type aliases

• AppBackgroundProps
• SystemBarsProps
• NavigationBarProps
• NavbarAppearanceParams
• ThemePreference
• SetThemeOptions
• AppBackgroundProps

Functions

setThemePreference

▸ setThemePreference(style, options?): void

Sets the theme preference, which also influences the value returned by useColorScheme() hook. can be system, light or dark.

system means that the theme preference is determined by the system.

Parameters

Name	Type
style	ThemePreference
options	SetThemeOptions

getThemePreference

▸ getThemePreference(): ThemePreference

Function that returns the current theme preference

setNavbarAppearance

setNavbarAppearance(params): Promise<null>

Set the appearance of the navigation bar imperatively

Parameters

• _params: NavbarAppearanceParams

Returns

Promise<null>

setAppBackground

setAppBackground(bgColor): Promise<boolean>

Set the application background imperatively

Parameters

• bgColor: ColorValue

Returns

Promise<boolean>

---

useThemePreference

▸ useThemePreference(): ThemePreference

A React hook that returns the current theme preference, which might be dark, light (if you have set the theme before by calling setAppearance) or system.

---

React components

NavigationBar

▸ NavigationBar(props): null

Android-only component, which controls the navigation bar appearance: the background color, divider color and whether the navbar buttons are light or dark. If active color scheme is dark, then the button icons will be rendered as light by default. You can override this behavior by passing a custom barStyle prop.

Multiple NavigationBar components can be mounted in the app, and always the last one will be used (different screens of your app can have different appearance).

If you want to control the appearance imperatively, call setNavbarAppearance().

• dark-content means dark icons on a light navigation bar
• light-content means light icons on a dark navigation bar

Parameters

Name	Type
props	NavigationBarProps

If you want to control the appearance imperatively, call NavigationBar.setNavbarAppearance().

Name	Type
setNavbarAppearance	(params: NavbarAppearanceParams) => Promise<null>

---

ThemeAwareStatusBar

▸ ThemeAwareStatusBar(props): Element

Thin wrapper on top of react-native's StatusBar that automatically determines the barStyle prop based on the active theme. Specifically, if active color scheme is dark, then status bar icons will be rendered as light. However, you can override this behavior by passing a custom barStyle prop.

Parameters

Name	Type
props	ThemeAwareStatusBarProps

---

AppBackground

▸ AppBackground(props): null

Sets the background color of the UIApplication window (iOS) or the current Activity (Android). This is useful with React Navigation to prevent white flashes when navigating on Android, or to control the background color users see when presenting a modal on iOS.

You need to specify the background color for light and dark mode separately.

Multiple AppBackground components can be mounted in the app, and always the last one will be used (different screens of your app can have different appearance).

If you want to control the appearance imperatively, call setAppBackground().

Parameters

Name	Type
props	AppBackgroundProps

Returns

null

SystemBars

▸ SystemBars(props): Element

Combines the NavigationBar and ThemeAwareStatusBar into a single component.

Parameters

Name	Type
props	SystemBarsProps

Type aliases

ThemeAwareStatusBarProps

Ƭ ThemeAwareStatusBarProps: StatusBarProps

Props of ThemeAwareStatusBar

---

AppBackgroundProps

Ƭ AppBackgroundProps: Object

Background color of the application window (iOS) or the current Activity (Android), for light and dark mode separately.

Type declaration

Name	Type
dark	ColorValue
light	ColorValue

---

SystemBarsProps

Ƭ SystemBarsProps: ThemeAwareStatusBarProps & Pick<NavigationBarProps, "dividerColor">

Props of SystemBars

---

NavigationBarProps

Ƭ NavigationBarProps: Pick<StatusBarProps, "barStyle"> & { backgroundColor?: ColorValue ; dividerColor?: ColorValue }

Params that control the appearance of the Android navigation bar.

Also props of the NavigationBar component.

Type declaration

Name	Type
backgroundColor?	ColorValue
dividerColor?	ColorValue
barStyle?	"light-content" | "dark-content" | "default" | undefined

---

NavbarAppearanceParams

Ƭ NavbarAppearanceParams: Object

Type declaration

Name	Type
backgroundColor?	ColorValue
dividerColor?	ColorValue
barStyle?	"dark-content" | "light-content" | null

---

ThemePreference

Ƭ ThemePreference: "dark" | "light" | "system"

---

SetThemeOptions

Ƭ SetThemeOptions: Object

• persistTheme: whether to persist the theme preference across app restarts. Defaults to true. Note that you need to make changes to the native code to make this work (see installation instructions).

• restartActivity: whether to restart the Android activity when the theme changes. Defaults to false. Setting to true is not recommended, but might be useful for debugging.

Type declaration

Name	Type
persistTheme?	boolean
restartActivity?	boolean