1.0.2 • Published 5 years ago

react-native-color-manager v1.0.2

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

react-native-color-manager

Library for managing the native colors of an Android app.

npm version npm downloads npm license


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:
NameTypeDefault valueRequired
colorstringYes
animatedbooleanfalseNo
durationnumber300No

The setNavigationBarColor method

Method that change the navigation bar color.
The setNavigationBarColor method accept next arguments:
NameTypeDefault valueRequired
colorstringYes
animatedbooleanfalseNo
durationnumber300No

The setRecentColor method

Method that change the recent color.
The setRecentColor method accept next arguments:
NameTypeDefault valueRequired
colorstringYes

The getThemeMode method

Method that reports custom theme color.
The getThemeMode method returns next value:
TypeValue
stringlight / 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;
  }