react-native-color-manager

Library for managing the native colors of an Android app.

Instalation

To install react-native-color-manager - you can use npm or yarn package manager.

npm install react-native-color-manager --save
react-native link react-native-color-manager

or

yarn add react-native-color-manager
react-native link react-native-color-manager

Documentation

The react-native-color-manager library includes the ColorManager object interface that has the next methods: setStatusBarColor, setNavigationBarColor, setRecentColor. Below you can find the documentation for all methods.

Important! All colors should be provided in the hex format.

The setStatusBarColor method

Method that change the status bar color.

The setStatusBarColor method accept next arguments:

| Name | Type | Default value | Required | | -------- | ------- | ------------- | -------- | | color | string | | Yes | | animated | boolean | false | No | | duration | number | 300 | No |

The setNavigationBarColor method

Method that change the navigation bar color.

The setNavigationBarColor method accept next arguments:

| Name | Type | Default value | Required | | -------- | ------- | ------------- | -------- | | color | string | | Yes | | animated | boolean | false | No | | duration | number | 300 | No |

The setRecentColor method

Method that change the recent color.

The setRecentColor method accept next arguments:

| Name | Type | Default value | Required | | ----- | ------ | ------------- | -------- | | color | string | | Yes |

The getThemeMode method

Method that reports custom theme color.

The getThemeMode method returns next value:

| Type | Value | | ------ | ------------- | | string | light / dark |

Examples

  import React, { useEffect } from 'react';
  import { ColorManager } from 'react-native-color-manager';


  const App = () => {

    useEffect(() => {
      const needAnimation = true;
      const themeMode = ColorManager.getThemeMode();

      console.log(themeMode); // light or dark

      if (needAnimation) {
        ColorManager.setStatusBarColor('#2196F3', true, 300);
        ColorManager.setNavigationBarColor('#2196F3', true, 300);
        ColorManager.setRecentColor('#2196F3');
      } else {
        ColorManager.setStatusBarColor('#2196F3');
        ColorManager.setNavigationBarColor('#2196F3');
        ColorManager.setRecentColor('#2196F3');
      }
    }, [])

    return null;
  }