Skip to content

Latest commit

 

History

History
258 lines (152 loc) · 7.63 KB

readme-internal.md

File metadata and controls

258 lines (152 loc) · 7.63 KB
Raw

@vonovak/react-native-theme-control

Table of contents

Functions

React components

Type aliases

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